Simple Hack To Turn A Full Width Liquid Template Into Centered Fixed Width
- Make A Fixed Width Blogger Template
- How To Make Your Blog Template Centered In The Browser Window
- Works With Almost ANY Template
- Works In Internet Explorer And Mozilla Firefox
- Simple To Implement – Just 3 Copy-And-Pastes – Takes 2 Minutes!
Purpose of the Fixed-Width Hack
Want to go from this:
Or how about from this:
What the Fixed-Width Hack does:
The Fixed-Width Hack should work with pretty much all templates that are so-called 'liquid' or 'fluid' where the design automatically expands to fill the screen. It may have unexpected results if you use it on a template that is already fixed-width but to a larger display size.
- Makes your template fixed-width, any size you specify (default is 760 pixels)
- Makes your blog webpage display in the center of the browser window
- Allows you to easily adjust the top margin of your webpage, or remove it altogether
- Removes the Blogger NavBar (so your template can move to the top of the screen)
Why Make Your Liquid Template Fixed-Width?
- Allows you to take control over how your blog is displayed. Monitor resolutions are getting higher and screens are getting wider. If you want to ensure that your blog looks the same on any display, use the Fixed-Width Hack.
- Efficiency for the reader. Text in columns is much easier for the human eye to scan and read quickly. That’s why newspapers print in columns.
- If the reader is likely to print your web content, a fixed-width webpage ensures no text is lost in the printout.
The Fixed-Width Hack
Make sure to backup your Blogger template before making any changes.
Open your Blogger template editor. Copy the Part 1 code from below and insert immediately after the HEAD section tag of your template.
Copy the Part 2 code and insert immediately after the BODY section tag of your template.
Copy the Part 3 code and insert immediately BEFORE the /BODY tag of your template. Save template changes and publish.
Total project time: 2 minutes!
Variations to the Fixed-Width Hack.
Many Blogger templates are designed with a built-in top margin (eg 40-50 pixels is common) so that the Blogger NavBar does not interfere with the webpage. The code ‘margin-top:-50px;’ in .maincontainer class (Step 1) is used to bring the webpage back up to the top of the browser window. Adjust this figure to increase or decrease the top margin to suit your design.
You can easily change the background color by editing the ‘background: #aaa;’ in .pagecontainer class (Step 1). If you want to change the background color of the blog template area itself the edit ‘background: #fff;’ in .maintcontainer class. Note that you may not see any effect if the template designer has set the background color within the main design.
To vary the width of the display area, edit ‘width: 760px;’ in the .maincontainer class (Step 1).
Background Image Instead Of Solid Color
It is very easy to set a background image instead of solid color, just by adding the URL. Just use the Alternative Part 1 code given here and edit the URL as required.
Here is an example. From this:
In my opinion this turns a no-frills template into something that looks pretty good for text-heavy blogs.
How It Works
Something to do with CSS I think. Cool though, ain’t it?
The reason to set ‘text-align:center’ in Body is to ensure the display is properly centred in Internet Explorer. This is then reset back to the default ‘text-align:left;’ in class .maincontainer.
HTML/CSS Sites I like
This article is not a CSS tutorial. These are, though:
A List Apart