4:13 PM -:- Posted by Allen    

More re Full-width templates; Styles


Here's the solution for full-width templates where the template comes with embedded styles that set the widths.

This is specific to the styles in the template used by Doug Kenline.

Here's a stripped-down version of the template that Doug posted for the question.

It's a simple 2-step edit, but as always, back up your template! If you don't know how to do that inline, do it to offline: just open the template for editing, highlight the entire template code, and then paste it into a text editor on your computer (Notepad, etc.) and save it. To restore, just copy it from the text file you created with Notepad, and then paste it in over the top of everything in your edit template window.

If there's anything in these instructions that you don't understand, don't do anything. You could render your blog unreadable and not be able to recover it.

The Problem

The style sheet includes absolute positioning. As:
position:absolute; left:10px; top:20px; width:760px; height:60px; z-index:1;

Note that some of this code doesn't look like positions, but it's all part of the positioning code. The way these definitions work is that you have a name (position), a colon (:), and then one or more attributes (absolute; left:10px; top:20px; width:760px; height:60px; z-index:1;) and then another name and colon with its attributes. So everything following a name, until the next name, is attributes of the first name.

Absolute positioning forces the named elements to appear at specified position on the viewer's screen.

The Fix

To make the blog appear full-screen width, the positioning code must be removed from the style sheet, and then the body elements must be entabled.

First

Remove all four position:absolute sections from the style section near the top of the template.

In Doug's template, these are as follows:

position:absolute; left:10px; top:20px; width:760px; height:60px; z-index:1;
position:absolute; left:10px; top:100px; width:170px; height:100px; z-index:1;
position:absolute; left:200px; top:100px; width:370px; height:200px; z-index:1;
position:absolute; left:600px; top:100px; width:170px; height:100px; z-index:1;

Don't remove anything other than what I've quoted above, or you'll break the style.

Second

Edit the formatting code in the body of the template so your blog looks like this revision.

To view and save the code changes, go to the revision, use your browser's View Source or View Code function.

Sorry, but that's just a lot easier for me than trying to walk you through it step-by-step, particularly since I'd have to change the coding characters "<" and ">" to something else so the code would be visible here and not interpreted as actual code by your browser as you read this blog. And that might even make it more confusing. This way, you can just go to the revision and get it, save and or print it out, and compare it to your template so as to see what you have to change.

Note that the commented lines at the bottom of the example's source code are not necessary. I just saved them there when I deleted them from the style.