Skip navigation.

Posts tagged with "stylesheet"

Step 1: Title Text

, , ,

If we take a look at the main.css stylesheet found in most any of the default themes, we will notice a part called Title. See below for a walkthrough of each element and what it does.

#top h1 {
    margin:0;
    width:100%;
    overflow:hidden;
    font-size:30px;
    font-family:'trebuchet ms',arial,helvetica,sans-serif;
    line-height:normal;
    padding-top:22px;
}

Here's Ivan's line by line walkthrough:

margin:0;
The CSS margin properties define the space around elements. In this case, the margin is 0.
width:100%;
The width property sets the width of an element. In this case, the width of the title area is 100%, and that means that it will be possible for users to write their title as long as there is space in the header. In other words, as wide as the header is, is as wide (100%) as the area is for the title.
overflow:hidden;
The overflow property sets what happens if the content of an element overflows its area. Hidden means that the content is clipped, but the browser does not display a scroll-bar to see the rest of the content.
font-size:30px;
Font-size sets the size of a font. It is expressed in pixels (px), ems or percentages of the default. In this case, font size is set in pixels.
font-family:'trebuchet ms',arial,helvetica,sans-serif;
Font-family is a prioritized list of font family names and/or generic family names for an element. It's a good idea to offer several common fonts available on the Mac and Windows PC, and always declare a generic (serif, sans-serif, monospace, etc.) font family. When declaring fonts that have more than one word in their name (e.g., Trebuchet MS or Times New Roman), enclose the font name in single or double quotes. In this case, the font-family contains: Trebuchet MS, Arial, Helvetica,and Sans-Serif. The browser will look on the user's machine to see if he or she has those fonts, in the order listed. If it cannot find any of the fonts, it will use an approximation.
line-height:normal;
The line-height property sets the distance between lines. Value normal sets a reasonable distance between lines.
padding-top:22px;
The padding-top property sets the top padding (space) of an element. In this case it is set to 10 pixels.

Default Theme: Theme 4

, , ,

Discussion

This theme has an 852x152 pixel fixed-width header graphic. Therefore, any other "drop and go" headers that are 852 pixels wide (the height doesn't matter as much) are suitable for use with this theme. This theme also has a drop shadow tiled image flanking the wrapper area. These can be deleted if desired, with no adverse effect on the overall design or the template's functionality.

The Stylesheet

The entire stylesheet, comprising common.css and main.css, can be downloaded below. Having every element in a custom stylesheet allows you more leeway to change things, and yet, unchanged items do not disturb any portion of the design you do not wish to change. Refer to other sections of this blog for tips and tricks to further customize your stylesheet.

theme4.css

Download Opera, the fastest and most secure browser
December 2009
S M T W T F S
November 2009January 2010
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31