Template Designer: Color theme matching, faster in IE, variable-width support

A few quick pieces of news about the template designer and the new templates:

• Choosing a new background image will shift the main color theme to try to match it. You can of course tweak the color theme or specific colors afterward, but this offers a nice starting place. Works best on the Simple and Picture Window variants that have a background color in their headers.
• We’ve temporarily disabled the “retrofit” code that adds rounded corners and drop shadows on Internet Explorer. Its current implementation was causing some pretty dramatic freezes on many blogs. We’ll be bringing it back once we’re confident that its performance is acceptable, but in the meantime IE7 and 8 viewers will see unshadowed, square-cornered boxes. Nevertheless, if your IE-using readers were complaining about crashing and freezing on the new templates, those problems should now be gone.
• There’s no user interface for it, but the templates now have support for variable widths, which you can trigger by playing in Add CSS. Here’s some sample code to get started:

For Simple and Picture Window (except for Simple’s last variant):

body {
  padding-left: 50px;
  padding-right: 50px;
}

html body .content-outer {
  max-width: 1600px;
}

For Awesome Inc., Watermark, and Simple’s last variant:

html body .region-inner {
  padding-left: 50px;
  padding-right: 50px;
  max-width: 1600px;
}

These keep the minimum width at whatever you set in Adjust width but let the blog content grow to a maximum of 1600px wide, leaving 50px or so on the sides to keep from bumping up against the edges of the window. Bear in mind that many of your readers may have small screens, especially laptops, so make sure that your blog still looks nice even when the window is in the 1000–1100px range.

PSA about Edit HTML: If you’ve changed things in Layout > Edit HTML then this might not work, since your HTML template will be based on our stock version at the time you made the edits, and will not have picked up some of the recent additions. In this particular case, you can replace your template’s <b:template-skin> section with that of a fresh blog. That being said, I strongly encourage you to not use Edit HTML unless you reeeeeaaaaalllllyyyyy need it because it does prevent your blog from getting improvements that we make to the default versions.

If you need to add a snippet of HTML or JavaScript to your blog, prefer using an HTML/JavaScript gadget over Edit HTML. If you find instructions that say “add this right before </body>,” just put the gadget at the bottom of your footer. It’s typically close enough. (Please pass this note along if you see any tutorials that recommend using Edit HTML when an HTML/JavaScript gadget will suffice.)

Finally, for those of you reading on an iPad, we’ve added a default viewport width of 1100px that will better-contain most blogs, giving a slightly nicer presentation.


Seeing any issues with the new templates? Leave a comment.

Read More

Small Template Designer Tweaks: Two More Variants and Bug Fixes

Last week we updated the Blogger Template Designer with two new variants for Simple, some minor tweaks, and bug fixes. Here’s what you can expect:

• Simple gains two more variants, one that’s, well, bookish, with serif text and an image background, and another with a full-width background image behind the header and tab regions. Try them out, let us know how they work for you.
• Links from the background image picker directly to iStockphoto so you can browse an artist’s entire portfolio and see if they have other images you’d like to purchase and use.
• Bug fixes with in the template designer, including showing the correct background color in the background image picker, showing fonts better in IE, and behavior improvements on the “Templates” tab.
• Bug fixes in the templates, such as showing deleted comments in italics, fixing the readability of the Search Box gadget’s results, and repositioning Simple’s tab bar to fit better when using a custom header image.
• A number of stability improvements to our Internet Explorer compatibility code, which should prevent missing embedded videos, cut off backgrounds, and other odd behaviors when rounded corners and drop shadows are rendered in IE.

While the template designer and new templates are still on Blogger in Draft we’re able to change them more easily, so if you find something that isn’t looking right on your blog let us know so we can fix it sooner rather than later. Just leave a note in the comments.

Read More