Friday, August 28, 2009

Using An HTML Template With Layouts Blogger

Up to now, I've written about Blogger blogs, and Classic vs Layouts templates, as if classic and layouts templates are two separate worlds. Classic = HTML = old school. Layouts = XML = new and shiny. Sometimes, you might want to blur the distinction between the two. Maybe you got a shiny HTML design for your blog, or you want to combine your blog with your web site. And, you want to use Layouts accessories, comments, and posts, written in XML.

Is it possible to have the best of both worlds? Use a Layouts Blogger blog, and base the template around HTML code? The answer is, yes. And, it's not all that difficult to do so.

Take it one step at a time, and you can do it.
  1. Start with a clean and new Layouts Minima template.
  2. Remove the XML based body code.
  3. Replace the removed body code with the body code from a well defined HTML template.
  4. Take the XML based Minima Blogger code that defines the sidebars and posts area, and paste it into the middle of the body code, as just installed.
  5. Add any CSS rules required by the body HTML to the template header.
  6. Ensure that all added rules have unique names which will not conflict with existing Blogger Minima code.


And as an overview, that's it. Details follow.

Well defined CSS / HTML is essential.

Raw HTML uses all style information in the HTML code. HTML with CSS uses CSS code defined in the template header, in both external and internal style sheets. CSS for the HTML can use all 3 definition techniques, just as CSS for XML in native Layouts Blogger blogs.

You'll define style rules - just as with any CSS based template, in external style sheets, and inline style sheets. And you'll use these rules in the body HTML, installed below.

You will have to know what style rules are essential in your template, and you will have to take careful precautions, and ensure that the rules are unique, and do not conflict with Blogger code. This has been the number one problem seen in using this technique, to date. Uniquely defined CSS references are essential.

Take a clean and up to date Minima template.

I use a Minima template, because it contains a minimum of decorations and style rules that might conflict with any HTML content. To properly display accessories, comments, posts, and other XML based content, I leave in all external and inline Minima style rules.

It's possible that the new Minima, aka Simple, templates might be better suited for this task. So, there is a possible variation, to be evaluated. Watch this space.

Add any CSS rules which your template requires.

If your HTML templates uses any inline CSS rules, you'll copy them as part of the body code, below. If your template uses an external or internal style sheet, copy the external reference and / or the internal style rules into the header of the new template, just as it is setup in the HTML of the existing template.

All style rule names must be distinct, and must not conflict with style rule names used in Blogger template Minima style rules. Best choice (my recommendation) would be to add a prefix to all style rules which are essential to your layout. Rules like "footer", "header", "main" (for instance), I would code as "nitecruzr_footer", "nitecruzr_header", "nitecruzr_main", etc.

Remove all code between "<body>" ... "</body>".

All containers and objects on the screen, with the exception of the main and sidebar containers (added next), will be HTML based. So, start by removing all body code from the new template.

Install the HTML template code between "<body>" ... "</body>".

The HTML template body code, from the existing template, replaces the body code, in the new template.

Remove all body code between the header and footer sections of the screen.

The header and footer will be HTML, but comments, posts, and sidebars will be XML. A possible enhancement of this procedure, coming next, would be to include the header and footer as XML. Right now, let's leave header and footer objects as HTML, and use them to define the upper and lower border of the contents.

Simply find the header and footer objects in the new template. Remove all code between the two objects.

Paste Main and Sidebar XML code between header and footer code.

In a Layouts Blogger blog, the accessories (in the sidebars), and the comments and posts (in the main container) are written as XML. With all native Blogger CSS rules provided complete and non conflicting, the main and sidebar containers will work as natively installed.

Minima templates use a container named "content wrapper", which contains a cross column wrapper at the top, the posts and sidebar(s), and a break at the bottom. This container is well outlined.

Here, for instance, is the Content wrapper, setup for a standard Minima 3 column template.

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main1-wrapper'>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
</b:section>
</div>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->


Here, on the other hand, is the Content wrapper from this blog. This is a standard Minima 2 column template.

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->


When you insert code, count the <div> ... </div> pairs, with great care. Ensure that each <div> ... </div> is properly matched.

That's it. Really.

It's really simpler than it looks. Try it, and see.

>> Top

2 comments:

Floyd said...

I am doing something wrong I tried this but must have gotten something wrong? So the HTML code goes between body and /body and put the sidebar XML between the head and footer ? Is this correct?

Chuck said...

Floyd,

I added some illustration above, see if it helps.

If not, maybe you could post in BHF: How Do I?, or in Nitecruzr Dot Net - Blogging, where we can work on this easier.