Blogger.com's still lacks conditional "widgets"

Google's Blogger team has been quite productive since last year (2009). First the new handling of widgets, aligning this feature with iGoogle gadgets. Then little but much needed features like the menu bar for pages (or alternatively the link gadget). And of course the "read more" feature, new and improved gadgets... The biggest and most significant upgrade has been the Blogger Template Designer. With one stroke, it made our previous design tweaks to templates out-dated. Which we appreciate :-)
As of autumn 2010, the designer is a great, though unpolished, diamond. Lot's of little things which we would love to see improved.

But most of all we would like to be able to use "display conditions" for widgets / gadgets. Only show selected posts or gadgets on the homepage. Please let us select when to display gadgets, they don't need to be on every page or post. This would also make it so much easier to display "featured posts or articles" on the homepage. Ie, it'll be great to indicate if a gadget should be shown:

• "only/not on homepage"
• "only/not for posts which have the label/tag/filter 'ABC'"
• "only/not on pages"
• "only/not on page 'XYZ'"

Additionally, those display conditions would be great to combine with layout areas of the "Page Elements". IE, "only display the right sidebar if..."

We have of course tried to include those conditions when creating our own gadgets. But Blogger seems to parse the code and ignore those <b> conditions within widgets / gadgets. 

Amanda Kennedy has posted a nice and relatively simple tweak on her BloggerBuster. Of course, one "problem remains". If you change your template in the new designer, you will loose all tweaks which are not "within" blogger elements such as those gadgets.

tickerTXT site re-design: tweaking the background of Nexus5

The first task is to tweak the background of Amanda's Nexus5 template to this striking concrete background, that Mike Matas uses in his blog.

Now Mike is using a trick to emphasize the blog header.  The top of the background image is slightly lighter and therefore subtely enhancing the blog title.  How does he do that?

At first his solution appears to be quite quite normal.  By using a normal background "repeat" variable in the CSS, the image is "tiled" and therefore covering all background surface of the page.

The clever part is to "center" and "top" the starting point.  And then an additional CSS layer is superposing on top of the normal background.  In his case, for the basic background declaration he uses a CSS "html" definition, quite unusual, but it works.  On top of which is the "body" layer.  Here Mike set the image to "no-repeat".  Without any further declarations, the space of the body which is wider and longer than the image would appear as in a white colour or whichever background colour is defined.  So to undo this, Mike declares the "body-background" "transparent".

html {

background: #fff url(files/bg2.jpg) repeat scroll center top;

}

body {

background: transparent url(files/bg.jpg) no-repeat scroll center top;

font-family: "Helvetica Neue", Helvetica, Arial, sans;

line-height: 18px;

}   Mike Matas background CSS trick 

So at first we are simply tiling a concrete background image.

tickerTXT site re-design: the search of inspiration

Simplicity and easy navigation for the new tickerTXT site narrowed the focus to 1-column designs (at least for header and main content.  The default templates of blogger offer all 2-column designs.

The team's favourite for a visually stunning and yet simple design has quickly become the photo blog of Mike Matas. The concrete-look of the background helps the pictures to stand out.  The colours of the photos are enhanced by the simple white frame which look like an old-style photobook, even more when Mike plays with photos of a vintage plane, which seem like 1940s originals. Not to forget his beautiful and intriguing photos, which appear unnaturally sharp and colourful, yet they don't seem overly re-worked.  Just take a few moments and enjoy his site.

One free blogger template seemed to blend both single column design and a concrete look:  Falling Dreams.  As so often it is a wordpress them (by Razvan Teodorescu) which has been converted to blogger (by  by Naeem Noor) .  But in order to be used for tickerTXT, it would have needed quite a bit of tweaking.  Then we remembered Nexus5 by Amanda Fazani of BloggerBuster.com.

Nexus5  is beautiful in it's simplicity and ultra-"tweakable".  Amanda really has pulled quite a few stops.  The menu bar offers a nice way to be useful not just to CSS and HTML people.  The menu bar is integrated with the "Link-List" blogger gadget.  Great idea, nice execution.


So Nexus 5 is the basis, and the team wanted the looks to be inspired by Mike Matas' blog.  Let the tweaking begin.