Home · Designer's Guide · Making template step 2

Making template step 2

OK. we have so far created a XHTML document in which we will show all of our content on the new website. And we have made an basic CSS (Cascading Style Sheet) document which will be containing the rules that will control the look of mentioned website.

Leaving the XHTML document awhile, we now need to apply some attributes to the CSS selectors we have added in the CSS document in order to make the layout visible. We started out by intending to make a 800px wide two column layout with a header and a footer, so lets do that and, at the same time, add the attributes to the basic selectors we added to the CSS document in step 1.

Notes:
- A id is always marked with a # in the CSS document (eg #container).
- A class is always marked with a dot . (eg .classname).
- The total width is influenced by all things such as border, padding and margin on each and every single selector.
Keep the size type the same throughout the CSS (either em's OR px, not both). I do however use px on width, and border-size as I want them to be fixed.

Step 2 - applying the outlines

1. We use the following to zero out the margin and padding, and thus making these look the same in the major browsers. IE and Firefox for instance do not always treat these things the same. so we need to tell the document what to start from regardless of what browser the viewer uses.

* {margin:0;padding:0;}

2. The Body tag contains the general settings meant to be inherited by nearly every selector through out the page. If need be to alter some styles to differ from this later, it's made in that specific selector. Here I often tend to set things like font-color, font-family, font-size, and of course possible settings just for the body such as settings for the background of the webpage (background-color, image and so on). Text-align here is to make sure all selectors will have all text to the left.

body { color: #333; font-family: Arial, Verdana, Sans-Serif; font-size: 0.7em; margin: 0; background-color:#fff; text-align:left; }

3. The container tag. Now this is the important part when it comes to the width of the website. It's here where we set the width of it all. So we give the container the attribute width, and set that to 800px. We also add the margin attribute (read from left: top setting, right setting, bottom setting and left setting). We use auto on left and right side here to make sure it stays in the middle of the browsers viewport and add 1em to the top margin, in order to have it slided down just a bit.

#container{ width:800px; margin:1em auto 0 auto; padding:0px; background:#fff; }

4. The heading tags. We might want to add general stuff such as padding, margin and things appliable to all headings, and that we do with the following.

h1, h2, h3, h4, h5, h6 {padding:.3em 0 .3em .5em;margin:0;}

And then the specific settings for the headings I porefer to use. One for each heading. Mind you the differences in size. H1 is always the bigger one, and then they are descending.

h1 { font-size: bold 1.9em; }
h2 { font-size: bold 1.2em; }
h3 { font-size: bold 1em; }

5. The paragraph tag. If we do have a general idea of how the paragraphs should be styled, it's in this selector we add that. Now we have already set the font-family, font-size and color of text in the body tag and as we do not want the paragraph tag to differ in anyway, we do not need to add settings for that here. We just add some padding and margin to maintain some whitespace.

p {padding:.5em;margin:1em;}

6. The link tags. As in the paragraph, the font characteristics are already set, aside for one thing. the color. I think the links should differ from the general text so that one is able to spot them. One thing is to have another color on them, and another is to have them underlined. We do both here. We also make a link differ from when hovering it or if it is currently being used (as a page or category link). Therefor we do here add different colors to a and a:hover, and the current link becomes bold, all links underlined.

a {color:#993300;text-decoration: underline;}
a:active {color:#999999;text-decoration: underline;}
a:hover {color:#121712;text-decoration: underline;}
a.current{font-weight:bold;text-decoration: underline;}

7. The img tag. As mentioned img tag is mostly used to remove borders and stuff that Internet Explorer add by default to any image. So we do that here.

img{border:none;}

8. The layout itself. The tags that our creation will consist of was these, remember ? It's now we're getting down and dirty.

#header {}
#content {}
#leftcol {}
#footer {}

We will have to add more to these, than to the previous in order to have them display as we want. So therefor we'll take them one at a time. First we go with #header. The header will have to display ontop and across the layout, so it needs to be (including all margins, paddings and borders) 800px wide, right ? And if we add a border to wrap the header in, the left and right side will have a pixel of border each. Thus making the width setting to be (800 - 2px= 798px) 798px. And then we will separate this from the following by adding a border of horrible color (just for visibility purposes). I will also be using the float attribute on some of the divs here, so if you're wondering what that is, go read some here.

Note:
- Normally one uses hexcodes for colors, I use plain text here in order to illustrate the different colors on the borders. Most good image editors will display the hex color codes in the color picker.

#header {width:100%;border:1px solid red;}

In good order the leftcol will come next (we read from left to right and also place and code CSS that way). This one will have to be placed alongside with the content (as in two columns), and therefor we will make this div floated. We will make it roughly a third of the total width (300px) and surrounded by a border which makes... Yes, 298px plus the border equals 300px.

#leftcol {float:left;width:248px;border:1px solid green;}

The content is the next div to be positioned, and similary to the leftcol we will have to make this floated aswell, in order to have them positioned beside eachother.

#content {float:left;width:548px;border:1px solid blue;}

So, the footer is the last div left. This one is supposed to appear benieth the two columns, and across the layout. We add a border to this aswell, making the width setting a little less than 800px to compensate for the 2px's the border sets us back. and in order to elude the float coding, we add a clear attribute to make sure the footer appears benieth the two columns.

#footer {clear:both;width:798px;border:1px solid purple;}

There. We now have a simple, and I grant you ugly, two column layout with a header and a footer. In order to make it a little less ugly, we might add some margins to the last divs (bolded in the following). In the #header we add a bottom-margin in order to move all things benieth that down a bit. In the #leftcol and the #content we add both bottom and right margin in order to move down #footer and separate the two columns a bit. Also note that when doing this we add to the total width of it all, so we need to reduce the width of the two columns width (bolded). Now we have a CSS document that looks like this:

* {margin:0;padding:0;}
body {color: #333333; font-family: Arial, Verdana, Sans-Serif; font-size: 0.7em; margin: 0;background-color:#efe;}
#container{width:800px;margin:1em auto 0 auto;padding:0px;background:#fff;}
h1, h2, h3, h4, h5, h6 {padding:.3em 0 .3em .5em;margin:0;}
h1 { font-size: bold 1.9em; }
h2 { font-size: bold 1.2em; }
h3 { font-size: bold 1em; }
p {padding:.5em;margin:1em;}
a {color:#993300;text-decoration: underline;}
a:active {color:#999999;text-decoration: underline;}
a:hover {color:#121712;text-decoration: underline;}
a.current{font-weight:bold;text-decoration: underline;}
img{border:none;}
#header {width:798px;border:1px solid red;margin:0 0 0.5em 0;}
#leftcol {float:left;width:245px;border:1px solid green;margin:0 0.5em 0.5em 0;}
#content {float:left;width:545px;border:1px solid blue;margin:0 0 0.5em 0;}
#footer {clear:both;width:798px;border:1px solid purple;height:40px;}

If you now try this layout in your browser, it will be quite empty and not showing much other than the two column layout on a pale-blue background, much like this one. So now we need to add the functions from sNews that we want to display. Which is covered here.

As said in the beginning this would just be a glimps of insight in how to make a template. The rest, the idea's, the design of the layout is best left up to your own imagination and now increasing skill in designing websites. And that isn't somehing that is easily, if at all , thought to others. You need to search for inspiration, try out ideas, and just keep on designing in order to be able to make a design you're satisfied with. Remember nothing comes for free in this world (except sNews) so you'll have to do the three P's, practise, practise and practise before you'll get there. And remember, if you get stuck, and you don't know whats happening, you can always come to us for help. Please visit the forum for this.

Have fun.

20.08.2007. 11:22

Creating a Template:

• Introduction
• Template Tags
• Making template step 1
• Making template step 2