1024 Templates: Tictac 1024 Template

Changing the width of Tictac template is not that linear because of the several CSS entries we need to adjust and some images that need to be adapted.

I have increased the size of the TicTac Template by 140 pixels and here is the step by step guide for you:

Step 1

Follow the menu links:

Customize -> Layout -> Edit HTML

Step 2

Find the css entry #outer-wrapper and add 140 pixels to the width property. The change should be:

#outer-wrapper {
width: 987px;

Step 3
Repeat Step 2 to the css entries:

#content-wrapper

...
#main

...

body#layout #outer-wrapper,
body#layout #content-wrapper

Step 4

Now that the new width was applyed, we need to adjust the images to the new size.

The new images need to be 140 pixels wider but the extra pixels need to be added carefully to mantain the same design.

The images that neeed to be changed in the template are:

bottom_sash_left.gif

bottom_sill.gif

tile_left.gif

top_div_left.gif

top_h1.gif

Be aware that in the template "left" is replaced by a variable named "$startSide". For instance to find "bottom_sash_left .gif" you neeed to search in the template for "bottom_sash_$startSide.gif".

If you don't want to do your own version of this new images just use the new images I've created.

And that's all you need to know to increase the width of your blog!

Download

If you don't want to do the changes yourself, just replace your's b:skin tag by the following:

Tictac 1024 Template

New Images

tictac_bottom_sash_left.gif