Sunday, March 04, 2007

Creating a Blogger Template (2)

... the layout ...


Let's introduce some basic CSS to give this rough and unformatted page a respectable and decent look!

testblog8

[ click image to view page ]

First set the body margin and padding to zero:

body {
     margin: 0px;
     padding: 0px;
     }

Use a width (here 960px, so this layout works in a 1024 resolution minimum) and center the content (using margin-left and margin-right = auto):

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

Give the header some inner space:

#header {
     padding: 10px;
     }

The important part!
For positioning one can use floating divs here.
Give main and sidebars their widths and add the floats and some margins:

#main {
     width: 560px;
     float: left;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     margin-left: 10px;
     }

(Notice both sidebars are styled the same, so we can use a shorthand here!)

Some space inside the footer too, and a clear to make the footer the last one in the page flow:

#footer {
     padding: 10px;
     clear: both;
     }

This resulting in a clean Main - Column - Column page:

See the working Main-Column-Column

[ click image to view page ]

Changing the above into a Column - Main - Column layout is really simple.
Introducing one negative margin and one new margin:

#main {
     width: 560px;
     float: left;
     margin-left: 200px;
     }

#sidebar1 {
     margin-left: -760px;
     }

#sidebar2 {
     margin-left: 10px;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     }

These minor alterations (only two margin settings and necessarily changing the one sidebar shorthand) is all it takes to create the following Column - Main - Column skeleton:

See the working Column-Main-Column

[ click image to view page ]

Here in the rear I give you the Complete and Unabridged Template for this last layout.
This is the one I used, so now naturally sidebars and footer do have some Page Elements included:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
*/

/***************************/
/* Thur Broeders */
/* march 2007 */
/* From Scratch v0.1 */
/* */
/* http://www.thurboeders.nl/ */
/* postmaster (at) thurbroeders (dot) nl */
/***************************/

body {
     margin: 0px;
     padding: 0px;
     }

#container {
     width: 960px;
     margin: 10px auto;
     padding: 0 10px;
     }

#header {
     padding: 10px;
     }

#main {
     width: 560px;
     float: left;
     margin-left: 200px;
     }

#sidebar1 {
     margin-left: -760px;
     }

#sidebar2 {
     margin-left: 10px;
     }

#sidebar1, #sidebar2 {
     width: 190px;
     float: left;
     }

#footer {
     padding: 10px;
     clear: both;
     }

]]></b:skin>
</head>
<body>

<!-- begin container -->
<div id='container'>

<!-- begin header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<!-- end header -->

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

<!-- begin sidebar1 -->
<b:section class='sidebar' id='sidebar1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<!-- end sidebar1 -->

<!-- begin sidebar2 -->
<b:section class='sidebar' id='sidebar2'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
<!-- end sidebar2 -->

<!-- begin footer -->
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
<!-- end footer -->

</div>
<!-- end container -->

</body>
</html>

This all is not a True Guide nor a profound How-To!
It is merely about the indispensable basics!!
But it shows those basics are essentially all you need!!!

Posted by thur at 1:26 PM

Labels: , , ,

6 comments:

bhjayalaxmi said...

i am using minima template.how to make my sidebars widen.please email me at jaidurgamathahyd@yahoo.co.in i will be thankful to you.

16/3/07 18:41
Annie said...

Hi, thank you for a nice simple template to work with and all your help on this site.

I'm using the Likewise template, but having a problem with the Labels bit which will not show in the post footer. It keeps sticking itself at the beginning of posts.

Can I fix this somehow in the template as setting the position with the Page Element editor makes no difference.

Thanks for any help :)

4/4/07 15:57
thur said...

Hi Annie,

I don't know, to be honest.
Your problem is not a LikeWise Template Problem.
That template has no modified Main code - in other words: the template is delivered with a collapsed MAIN widget and will take whatever code there already is in your existing widget code (stored for you by Blogger).

When you create a fresh blog with the LikeWise, the labels are behaving properly.

So my question: are you using an existing blog?

In that case you could try the following:

1) Save a copy of your LikeWise locally
2) create a new blog
3) choose whatever template
4) go to the Edit HTML Window
5) choose Expand Widgets
5) copy the whole expanded (and default) MAIN section
6) paste that section into your LikeWise Theme and upload that Theme to your target blog.

That way you are uploading a default Main Widget again.

Err ... am I making sense?

Thur

4/4/07 18:27
rozanighani said...

please post about full script on minima from what you do just now.
i want it in minima please.

nurrozaini@gmail.com

30/5/07 20:13
cristina amil said...

Hi,
Your instructions were very helpfull, I was afraid to try xml but it's not that difficult (the basics, of course).
But now I'm having a problem. I want to align the header to left and the blog title to right. With Firefox everything seems right but with IE I can't get it to work.. I try to change the margin and padding but with no results(#header). If I change to #header-wrapper it aligns to left, like I want, but also the title...
see http://sacodepano.blogspot.com.
Thank you!

20/7/07 11:53
anne1978 said...

By the way, I have been looking up on the Internet and I have found some tools which are really cools to monitor the positioning of the competition, as well as seeing their tips and tricks. If you are interested, I advised to you have a look. It seems they are free: http://www.lineared.com/es/recuperar/en-datos-posiciones-google-msn-yahoo.htm

21/7/07 15:34

Post a Comment

Subscribe to: Post Comments (Atom)