Showing posts with label template designer. Show all posts
Showing posts with label template designer. Show all posts

More Fonts Means More Choice

Posted by Wongoo Lee, Software Engineer

Self expression is a beautiful thing.  It’s one of the best things about having a bloga place where you can control the look and feel of your message and how it’s presented.  Today we’re excited to announce another amazing way to make your blog truly youWeb Fonts.

The Web has traditionally been pretty limited when it comes to font selection, especially for non-Latin alphabets such as Cyrillic and Greek.  But great strides have been made in this arena by our friends on the Google Web Fonts team, and finally there are more choices out there than just Arial and Times New Roman.  In fact, there are now 40 new fonts on Blogger in Draft for you to choose from.  And we’re just getting startedlots more to come!


Simply go into the Advanced tab of the Blogger Template Designer, select the type of text you’d like to change (Post Title, Page Text, etc.) and pick from a number of exciting, new fonts such as Reenie Beanie (which we've used for the title of this post!) or Neucha (Cyrillic) or GFS Didot (Greek) or even Hanuman (Khmer).  You will be spoilt with choice! For the full list, please take a look at the Web Fonts page in our Help Center.

Give it a try, and as always, we’d love to hear your feedback.  Just leave us a comment.

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.

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.

The Blogger Template Designer

We’ve added a fair bit to Blogger over the years, but one thing that’s been constant for some time has been our collection of templates. While a number of talented designers around the web have offered their own fresh and interesting designs that you can apply to your Blogger blog, our stock set has grown a bit stale, and you’ve noticed. You let us know — in the forums, on Twitter, sitting next to us on airplanes, even from across the counter at a Harvard Square stationary store, and we’ve been listening.

Today we’re taking a big first step in improving not just our template designs, but all the ways that you can customize the look and layout of your blog. We even made a video with jaunty music to show it off:


Here’s what we’re launching today to Blogger in Draft:
  • 15 new, highly-customizable templates from our design team, split into four families: Simple, Picture Window, Awesome Inc, and Watermark
  • One-, two-, and three-column layouts for each template, with complete control over the size and arrangement of the columns
  • Hundreds of background images and patterns from iStockphoto, the leading microstock image marketplace


Try it Now

Go to http://draft.blogger.com/ to log in to Blogger in Draft. (If you’ve never been there before, Blogger in Draft is just like regular Blogger, except with new, in-development features like this one.) Click on your blog’s “Layout” link to go to the Layout tab. The link to the Template Designer is at the end of the row of sub-tabs.


You can use the live preview to see your new template without affecting your blog. When you find a new look that you’re happy with, just click the “Apply to Blog” button to publish it to the world. Note: You can backup your existing template ahead of time by going to Layout > Edit HTML. We recommend this if you have a customized blog design that you might want to go back to.

Classic template blogs: If you have a “Template” link or tab instead of “Layout,” you’ll first need to switch from Classic to Layouts before you can try out the Template Designer. Go to Classic > Customize Design and follow the instructions there. You’ll need to switch to one of our old templates first, but then you’ll be able to use the Template Designer to pick a new one.


Tips from the Blogger Team
  • Get your links to match a background image quickly by using the Background panel’s “Main color theme” to adjust all of your blog’s colors at once. This works particularly well with Simple’s second design.
  • With a three-column footer, you can fit in several gadgets to interest your readers after they’re done reading your post. For inspiration, read Derek Powazek’s post, “Embrace your bottom!
  • If you’re using our new Pages feature, put the Page List gadget in the wide section at the top of your blog. We’ve added unique tab designs to all of the new templates.
  • Many of the patterns in the background image picker are semi-transparent, to let your blog’s background color show through. Look for the “transparency page curl” to see which patterns these are.
  • The Attribution gadget (added to the footer by all new templates) is there to give credit not just to the designer and artist of the background image, but to you as well. Edit its settings by clicking “Edit” on Layout > Page Elements to add your own authorship or copyright information.


Get Involved
  • Show off your new design on Twitter by tweeting your blog’s URL with the hashtag #newbloggertemplate. We’ll be looking for creative designs to feature in upcoming blog posts or as Blogs of Note.
  • We’re taking feature requests. Let us know what else you’d like to see with our Google Moderator page. (And don’t worry: uploading your own background image is already filed and at the top of our list!)
  • To report bugs or discuss the Template Designer in more detail, start a thread on our discussion forum. Include “Template Designer” in the subject so we’ll be sure to see it.
  • Do you design templates for Blogger? Join our template designer group for documentation and discussion on working with the new templates, as well as details on how to get your designs into the Template Designer.
Over the coming weeks and months we’ll be adding new features, templates, and images guided by the feedback we hear from you.


Miscellaneous Notes
  • The Template Designer is not supported on Internet Explorer 6, nor, for that matter, are the new templates. While we’ve made an effort to ensure that they’ll still be readable, the new designs are not going to look particularly attractive on IE6. We strongly encourage the very small number of bloggers and readers still using IE6 to upgrade to a more modern browser. For more information about browsers, visit Google’s What Browser? site.
  • The rounded corners and drop shadows used in several of the templates may not be visible in older versions of some browsers. Opera users will need to wait for Opera 10.5, currently in public pre-alpha release. IE7 and 8 users will not see these effects within the Template Designer, but will see most of them on the live blog itself.
  • From within the Template Designer you can only move gadgets around, you can’t add, delete, or change their settings. Those features are still on the Layout > Page Elements page.
  • Some gadgets, such as Poll, Reactions, or third-party Google Gadgets will not reflect color changes in the live preview but will after the template is applied. Others, such as Followers and AdSense, will not change colors automatically at all. It may be easiest to remove and re-add these gadgets to refresh their palettes, though you could also tweak the colors by hand by editing their settings.
  • Customizations to widget templates will be cleared when applying a new template to preserve the new layout. If you have made changes to your widget templates, save them first by going to Layout > Edit HTML and clicking “Download Full Template.” You’ll be able to copy them back in as needed after you apply your new template.