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.