Migrating an "old" blogger.com site to use the new "template designer"

Before starting to change your "old" blogger.com site, test the new blogger templates using especially created blogs. Blogger.com allows up to 100 blogs per user, so you have plenty of potential test-sites to create :-) . Import the texts from your "normal" site and play with colours and backgrounds. It is a "trial and error" -iterative- process. Many template variants are not as different as they seem. Once you apply your future website's intended look and layout, the differences are small but important. For example, the corners of the content "boxes" of the "grey green" Awesome Inc. template are rounded, whereas the pure grey one has edges. The navigation menu for the pages is transparent with some, appears 3-dimensional with other Awesome Inc. templates.

For tickertxt.org we chose the grey-green-menu Awesome Inc Template by Tina Chen as the basic design. We wanted our site to look a little fresher spending as little time as possible. So here is what we did within a couple of hours:

• Select the template - we used the Awesome Inc with the green navigation menu for the blogger pages. Reasons were the nice menu bar and the round border corners of the post section. 
• Background Image - we chose the same image as with our old template and uploaded it to the designer. We like the image to stay "in place" when the blog is scrolled, therefore we un-selected the tickbox "scroll with page" which appears next to the thumbnail of your background image after the successful upload. 
• Layout Section - we chose the single column layout, kept the 2-column footer and adjusted the width to 770px

The Advanced Layout changes are numerous, therefore here is the list of all changes:

• Page - set the font to Verdana 
• Links - colours to #bf9000 only the hover link is lighter #f1c232 
• Blog Title / Blog Description - our logo in the header is set to replace the Blog title and description, we set the font to courier and to the link colours, even though nobody will see that. 
• Tabs Text - Courier 14px bold, text colour #333333, selected text colour #f1c232 
• Tabs Background - #f1c232 inactive / #bf9000 active (current page) / border transparent 
• Date Header - Verdana 10px, #666666, border #bf9000 
• Post Title - Courier, 20px, #bf9000 
• Post Background - #fefdfa (unchanged), border and bevel colour set to #bf9000 
• Gadget Title - set to Courier, else unchanged 
• Gadget Text - verdana, 12 px else unchanged 
• Gadget Links - same as normal links ie colours to #bf9000 only the hover link is lighter #f1c232 
• Gadget Background - colour #333333, other settings transparent 
• Sidebar Background - transparent (unchanged) 
• Images - default / unchanged 
• Feeds - default / unchanged 
• Feed Links - same as normal links ie colours to #bf9000 only the hover link is lighter #f1c232 
• Pager - #cac4a9 
• Footer - background #333333 text #cabf88 

Further changes

• Added Page Link gadget 
• Added Pages (about / contact / ...) 
• Edited the previously linked pages for "about" and "contacts" which were normal blog posts. Changed them to draft versions as the new pages replace those posts. 
• Added a HTML gadget with the Google Presentation code. The trick is to move it to the top of the "posts-section" in the Design Layout by dragging and dropping it with the mouse. That way the slides are always positioned on top of the post list, as if we used a "featured" gadget (which does not yet exist)

Planned changes using the Advanced CSS (see this post for a how to)

• The bottom attribution gadget will be replaced by a more generic footer text and links. Of course the credits of the attribution will be included. 
• The footer background might be transformed into dark grey transparent. maybe the gadget background as well. 
• The Blogger navbar might be changed to a "hover-in" stle rather than the "always-on" state. 

History of the site and reasons for the migration
Early 2010 we re-designed tickerTXT.org for a more "corporate" look and feel. To do that we heavily modified a blogger template called Nexus-5. We published those mods as the free-bee-template. We learned a lot about blogger.com.
Then Google released the new template designer to draft.blogger.com users in spring and to normal users in the summer 2010. And overnight our template was outdated and incompatible with the new designer. But we are not complaining, the new features are great. We left our design as it was until we needed to turn a bit more blog style. So it was time to "re-create" an improved version of the design using a new blogger template.

This article is a qompute.net cross-post.

tickerTXT site re-design: the prototype sites

We have among the developers agreed to a convention to test code and previews of the template evolution. Of course you can host the code in a team sharing fashion. Lot's of tools around for that, but, blogger is not yet allowing for an automatic update feature for code stored outside the blogger CSS-HTML. Of course you can upload code manually.

Also we wanted to compare the prototype versions. Therefore we came up with that simple method.  Each one of us working on a particular aspect is creating his own blogsite under blogspot.com. And we use a naming convention, in our case ttxt-design-XX.blogspot.com. Ok it's not great, because there is a bit of manual preparation.  In your blogger.com dashboard...

1. create a new blog, give it a name and immediately do some changes in the settings (in our case the sub-header text)
2. Invite your collaborators, and once thy accepted, increase their access level from "author" to "admin"
3. then upload the template XML on which you want to make your changes or add new code
4. Often, some changes need to be done in the Page Layout, as widgets need to be removed or added and edited.

So in our case, the bases for future changes is now template number 5, ie ttxt-design-05.blogspot.com. We like the basic look. Maybe we will change the Menu to a more visually elaborate version including background images. Also rather than using the normal text und sub header for the header-section, we might change that to some graphical logo. The "embossed style" is only visible in modern browsers, such as Chrome, Safari 6 co and Firefox 3.5 plus.

ttxt-design-06 and ttxt-design-07 have been tests of different shadows, especially a top shadow line for the articles. That looks weird, as visitors are accustomed to have bottom shadows only. Our eys are easily tricked thinking that the bottom line is bent, though this is just an illusion.  This trick works less well with a shadow on top of elements.  

ttxt-design-08 has been a trial for the manual code "featured article" slider.  We will replace that code with an automatic pull of posts.  That will be prbably ttxt-design-10, which at the time of the article was simply a test for the driftwood template.

tickerTXT site re-design: the "featured article" slide show (1)

So far so good.  Check out our prototype number 5.  Looks pretty good. What we now want for tickerTXT is a better "feature" section. This section should be pleasing to the eye, informative for the casual viewer and teasing the interested reader for more information. So we went looking for a so called "featured article" code for blogspot which teases selected posts.

The slider should include:

• an image as slide background
• a title or header
• a teaser or summary
• a link for further reading
• ... and if possible a code, that pulls all data from articles with a common "label" (solution at the end of the post)

Our prototype number 8 shows a slider we have copied from the driftwood magazine blogger template by be-insight. There are similar sliders in the following templates: MagzStyle Slider, and on RevolutionChurch, Alpha, Chucky, Hybrid News, and so on...  Most of these blogger templates have been "migrated" or "ported" from Wordpress Theme designers. If you check out the links, you will usually find a reference to the original designers.

Unfortunately, though the sliders were quite nice, we weren't really happy, because all of the templates mentioned above "hardcode" the content into CSS-html blogger script. So for non-designers or developers, changing the content is a no-no. So we abandoned that code and didn't even bother to smoothen the CSS details of our prototype 8.

I had found some other code before, "lost it" and then finally found this gem called Simplex Darkness.  You can see it in action here. And best of all, the designer described the slider code in two articles (first, second). The javascript pulls all content of the most recent articles by simply reading the explicit home URL. So rather than using http://www.tickerTXT.org/ we will use http://www.tickertxt.org/search/label/featured et voilà - only posts with that tag (or in blogger speak "label" will be pulled into that preview section.)

Of course we need to change the CSS and layout of that Featured Section, as we want the list of articles on the right side look more like a "1 2 3 4 ... menu" above or below slides. A bit like the magazine1 template described in this tutorial.

tickerTXT site re-design: the engraved header text

It shouldn't be a problem, text / font effects such as text-shadow or font-effect were defined in CSS2 , omitted in 2.1 and re-introduced in CSS3.  Unfortunately only Chrome, Safari and Konquerer are supporting text-shadow.  Firefox only from 3.1 onwards and Internet Explorer, well...

The engrave effect using the text-shadow setting would be likte this

h1 {

text-shadow: 1px 1px white, -1px -1px #333;

}

But unfortunately, the only way to make shadow, engrave, emboss effects work for everybody is to use CSS-hacks (workarounds) or javascript. Just google "CSS-hack text-shadow" and you will find some, though to us they all look mighty complicated.  Mike Matas has used a Javascript and so will we.

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.