ronde hoek in contempo

https://aarg.blogspot.nl/2017/03/new-blogger-templates.html


New Blogger Templates...


Yesterday, I received a notification that Blogger has new templates. The new templates have the more responsive feel of the dynamic templates without some of the limitations of the dynamic templates. I tried a variety of different templates and settled on one of the Contempo themes. Out of the box, the new themes have some nice features like a popup sidebar menu, a floating title bar, a featured post gadget and a popular post gadget. They have a clean minimalist feel that apparently works on the small screen as well as on the big screen. It remains to be seen, but, that, at least, is the claim.

There were some issues settling into the new template, but, I can live with the new design. My legacy site had a custom title image. The new template offers the ability to change the bsckground of the top half of the page and also to add a custom image to the title area. However, I wanted to apply my header image to the floating header bar. So, I had to add some custom CSS to the advanced section of the customize theme menu. In addition, I wanted to enhance the image and text with rounded corners and text shadows. Below is a snippet of CSS that I used to achieve the effects:
.blog-name {
background: #000000 url(your-image-link-goes-here) no-repeat scroll 0 0;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 1px solid #d3d3d3;
}

.blog-name h1, .blog-name p, .tabs a {
text-shadow: 0 1px #000;
}

.blog-name h1, .blog-name p {
padding-left: 10px;
}

.centered-top-container.sticky .widget.Header h1 {
color: #ffffff;
padding-left: 10px;
}

.centered-top-container.sticky .widget.Header h1 a, .centered-top-container.sticky .widget.Header h1 a:visited, .centered-top-container.sticky .widget.Header h1 a:hover {
color: #ffffff;
}

.post-outer-container, .FeaturedPost, .PopularPosts {
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 2px solid #cccccc;
}
The blog-name container houses the title text, the blog description text and the tab menu, so, the image needs to be appropriately sized to accommodate all of the header content. I found through trial and error that for my purposes, 900x200 seems to work reasonably well. The text color on the floating header bar is dark because the assumption is that the header bar background should be white, but, with my image as a background, I needed the text color to be white. The sticky widget entries (see above) are where I change the text color to white. I also added a bit of padding to move the text away from the edge of the floating header.

The featured post gadget will take a post image and artificially enlarge the image to fill a space above the featured post. It would look pretty good if the source image was high resolution, but, when the images are low resolution, as is the case with many of my images, the results can be less than appealing. I tried to work around this issue, but, in the end, I decided to just turn off the feature as it was more trouble than it was worth for my humble needs. On the bright side, the popular posts gadget makes use of the usage data to provide a handful of links to popular content on the site. That was actually quite useful, so, I turned that feature on. Sadly, the popular posts gadget is apparently only visible on the individual posts, rather than on the main page.

The navigation scheme is a bit different with the new templates. There appears to be an issue where the sidebar menu is not accessible below a certain page width. Since my display is set to a width of 1280, I found that I had to set the Zoom level to 80% to force the sidebar to appear on post pages, otherwise it was inaccessible. I don't like editing the HTML as it can become a maintenance issue down the road if the default template is changed.

After poking around on the Blogger Help Forums, it seems that the Blogger team is still addressing some of the issues reported by users, so, for the time being, I'll avoid making changes to the HTML and use a clean template. I'll wait to see how the template evolves before making any changes to the HTML. But, one change that I might make, would be to add the hamburger icon to the post pages so I could access the sidebar menu. On an unrelated matter, while I was on the forums, a user pointed out that it was possible to add a second pages gadget to the Page List (top) section of the Contempo template. This would allow the tabs to appear on post pages. But, it would also display two sets of tabs on the home page. I added some custom CSS to the advanced section of the customize theme menu to hide the second set of tabs (see below).

With the success of the multiple tab menus, I decided to return to the issue of the Popular Posts gadget not appearing on the home page. I added a second popular post gadget above the existing popular post gadget and that successfully made the popular post gadget appear on the home page. But, it also created two popular post gadgets on the post pages. I added some custom CSS to the advanced section of the customize theme menu to hide the second popular post gadget (see below).

I added some custom CSS to the advanced section of the customize theme menu to position the sidebar menu icon. While I was at it, I also fixed an issue where the sidebar would appear in the wrong position when activated after scrolling the page. In addition, I fixed an issue where the thumbnail images were not being cropped correctly in Internet Explorer and where the search box background was transparent, making it difficult to read the search text against an image background. Below is a snippet of CSS that I used to achieve the effects:
.return_link {
position:relative;
left: -50px;
}

.sidebar-container {
position: fixed !important;
margin-top: 50px;
border-top: 20px solid #f38a23;
height: 75%;
overflow-y: scroll;
overflow-x: hidden;
}

.snippet-thumbnail {
overflow: hidden !important;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #cccccc;
}

.BlogSearch {
background-color: #ffffff !important;
}

#PopularPosts2 {
display:none;
}

.widget.PageList:nth-child(2) {
display:none;
}
Overall, the new Contempo template is very good. The navigation leaves a little to be desired. Also, it took a bit longer than I would have liked to settle in, but, more than a few things work out of the box, so, kudos to the Blogger team on a job well done. I would give the Contempo template a 3 out of 5.

The one issue that remains is that the sidebar is not accessible from the post pages at my current resolution (1280). I have a fix in mind which involves editing the HTML, but, for the time being, I'm going to refrain from editing the HTML as the Blogger team is still making changes behind the scenes.

Reacties

Populaire posts van deze blog

gadgets in footer and sidebar in mobile version

Reisverslagen en camperverhalen

Volgende en Vorige aan het einde van blogpost