T U T O R I A L S E R I E S
CSS explained
2. The date.
This is styled from the following statement:
If you want the gap between different days posts to be larger, increase the 15px in margin.
If you want the font altering, either in size or family, help yourself.
In a default install, the h2 tag is only used for the date. So if you want your date to appear on the right of the main area, just add:
text-align: right;
to the above definition.
This is styled from the following statement:
h2 {If you don't want the dotted line across your page, delete the 'border-bottom' line.
border-bottom: 1px dotted #ccc;
font: 80% "Times New Roman", Times, serif;
letter-spacing: 0.2em;
margin: 15px 0 2px 0;
padding-bottom: 2px;
}
If you want the gap between different days posts to be larger, increase the 15px in margin.
If you want the font altering, either in size or family, help yourself.
In a default install, the h2 tag is only used for the date. So if you want your date to appear on the right of the main area, just add:
text-align: right;
to the above definition.
3. Your post title
This has 3 elements of the CSS which affect it. They are;
From the top .... the border-bottom gives the line across the screen, and the #eee gives the colour of that line. The font-family is self-explanatory, and the margin-top stops the browser automatically putting a gap between the post title and whatever is above it (Browsers will do that with header tags).
The two .storytitle statements .. the first one ensures no margins are added in any direction, and the second one makes sure that even though the post title is a link, it will not be underlined when hovered.
To alter the colour of your post title, add
color: #00ff00;
just under the 'text-decoration: none;'
This has 3 elements of the CSS which affect it. They are;
h3 {
border-bottom: dotted 1px #eee;
font-family: "Times New Roman", Times, serif;
margin-top: 0;
}
.storytitle {
margin: 0;
}
.storytitle a {
text-decoration: none;
}
From the top .... the border-bottom gives the line across the screen, and the #eee gives the colour of that line. The font-family is self-explanatory, and the margin-top stops the browser automatically putting a gap between the post title and whatever is above it (Browsers will do that with header tags).
The two .storytitle statements .. the first one ensures no margins are added in any direction, and the second one makes sure that even though the post title is a link, it will not be underlined when hovered.
To alter the colour of your post title, add
color: #00ff00;
just under the 'text-decoration: none;'
4. Post data
This line is styled by the meta div
Looks complicated ........ from the top it means;
The font to be used should be smaller (.75em), the font colour should be grey (#808080), it should be a normal font, not a bold font, and the last two parts mean that because items could appear in this which would normally be put into a list, the display should keep them on the one line (a post could fit into different categories for instance).
Seen that in the screenshot the word 'General' is underlined ? If you don't want that to happen, add this line
text-decoration: none;
to the .meta a section.
This line is styled by the meta div
.meta {
font-size: .75em;
}
.meta, .meta a {
color: #808080;
font-weight: normal;
letter-spacing: 0;
}
.meta ul {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
.meta li {
display: inline;
}
Looks complicated ........ from the top it means;
The font to be used should be smaller (.75em), the font colour should be grey (#808080), it should be a normal font, not a bold font, and the last two parts mean that because items could appear in this which would normally be put into a list, the display should keep them on the one line (a post could fit into different categories for instance).
Seen that in the screenshot the word 'General' is underlined ? If you don't want that to happen, add this line
text-decoration: none;
to the .meta a section.
5. Blockquote
As it is, your blockquote style consists of indented text with a grey bar down the left side. That code looks like this;
In contrast, the blockquote style I have been using here is this;
Everything there is up for alteration.
Note:I have defined each border individually. This is to show you how to alter different borders if you wanted to. It is better, if using the same border all the way around, to just use one line to do this: border: 1px solid #000099;
Want only 2 borders ? Then delete the ones you do not want.
Want 3 borders ? Again, erase the unwanted line .
Want dotted borders ? Change the word 'solid' to dotted'.
Fancy a bolder background colour ? Drop the #ccc for your particular shade.
And the font ? Up to you again.
As it is, your blockquote style consists of indented text with a grey bar down the left side. That code looks like this;
blockquote {The border is described - 5 pixels, solid grey - and the whole quoted part will be 1.5em's in from the left with a padding of 5 pixels between the border and the words within it.
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}
In contrast, the blockquote style I have been using here is this;
blockquote {You can see how that looks just by looking at the box that code is in.
border-top: 1px solid #000099;
border-bottom: 1px solid #000099;
border-left: 1px solid #000099;
border-right: 1px solid #000099;
margin-left: 1.5em;
padding-left: 5px;
background-color: #ccc;
font-family: Arial;
}
Everything there is up for alteration.
Note:I have defined each border individually. This is to show you how to alter different borders if you wanted to. It is better, if using the same border all the way around, to just use one line to do this: border: 1px solid #000099;
Want only 2 borders ? Then delete the ones you do not want.
Want 3 borders ? Again, erase the unwanted line .
Want dotted borders ? Change the word 'solid' to dotted'.
Fancy a bolder background colour ? Drop the #ccc for your particular shade.
And the font ? Up to you again.
6. Your entry text
The controlling CSS is
If you want to change the font, alter the 4 font names to your desired choice.
Letter-spacing is self-explanatory, but try changing the value there just so you can see it's effect.
To alter the colour of your post text, add;
color: #00ff00;
just underneath the 'letter-spacing: -1px;' line,
but read the part below first - this css statement affects 3 parts of your post. You may only want the colour in one.
If you want to alter the colour of the background of the post, you need to add a colour to the content div.
The controlling CSS is
p, li, .feedback {Changing the 90% will change the text size, while changing the 175% will change the text spacing.
font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: -1px;
}
If you want to change the font, alter the 4 font names to your desired choice.
Letter-spacing is self-explanatory, but try changing the value there just so you can see it's effect.
To alter the colour of your post text, add;
color: #00ff00;
just underneath the 'letter-spacing: -1px;' line,
but read the part below first - this css statement affects 3 parts of your post. You may only want the colour in one.
If you want to alter the colour of the background of the post, you need to add a colour to the content div.
#content {Will make your post background bright green. Unfortunately, this will clash with the rest of the background. If you need to alter that, then go to this page.
margin: 30px 13em 0 3em;
padding-right: 60px;
background: #00ff00;
}
7. .storycontent
There is another tag that can control just the content of what you post - .storycontent
It does not control the post title, or the post data, or the comment. It just covers what you have written in the main entry box when writing a post.
Using this tag, you could have a separate font for your entries, or a separate background just for your entries. In fact, you will gain more control over how all aspects of your post appear if you take the time to define the different elements.
So, what can you define then ?
Here is a basic list: normal text, links, an ordered list, an unordered list, text indentation for paragraphs, link classes, how images appear. Of these, I will cover some examples.
Normal Text
You can define which font you use, the spacing between letters / lines.
The font size is set at 100% of the VIEWERS browser setting. (This is important for accessibility reasons. Setting your font in point (pt) sizes is not recommended as they scale badly.)
The line spacing is set at 130% of the original font size.
The font is set with a selection of fonts and a generic last font.
The colour of the text is #ccc (which is a light grey).
If you wanted to increase the gap between lines of text, just increase the "130%" figure.
If you wanted to increase the gap between individual paragraphs, add a line to the above definition: margin-top: 20px and then adjust from there.
Links
On your page, you have links in the header, for the title of your post, for some of the post data, in your menu, for the Comments link and in the footer. That's a lot of links, and you can style how each of them appear and react when hovered. Other links will be mentioned elsewhere, but for links in your posts, read on.
.storycontent a - Links will be green, and have a green dotted underline.
.storycontent a:hover - When the mouse goes over the link, the dotted line will become solid.
.storycontent a:visited - Visited links will still be green, but there will be no underlines.
Of course you can change the colours and underlining to whatever you want. See the page on Link Classes for more details on what you can do.
An Ordered List
Additionally, you might want an image to represent each item on the list.
There is another tag that can control just the content of what you post - .storycontent
It does not control the post title, or the post data, or the comment. It just covers what you have written in the main entry box when writing a post.
Using this tag, you could have a separate font for your entries, or a separate background just for your entries. In fact, you will gain more control over how all aspects of your post appear if you take the time to define the different elements.
So, what can you define then ?
Here is a basic list: normal text, links, an ordered list, an unordered list, text indentation for paragraphs, link classes, how images appear. Of these, I will cover some examples.
Normal Text
You can define which font you use, the spacing between letters / lines.
.storycontent p {The above will automatically indent the first line of each paragraph.
text-indent: 3em;
font: 100%/130% arial, verdana, 'lucida sans unicode', sans-serif;
color: #ccc;
}
The font size is set at 100% of the VIEWERS browser setting. (This is important for accessibility reasons. Setting your font in point (pt) sizes is not recommended as they scale badly.)
The line spacing is set at 130% of the original font size.
The font is set with a selection of fonts and a generic last font.
The colour of the text is #ccc (which is a light grey).
If you wanted to increase the gap between lines of text, just increase the "130%" figure.
If you wanted to increase the gap between individual paragraphs, add a line to the above definition: margin-top: 20px and then adjust from there.
Links
On your page, you have links in the header, for the title of your post, for some of the post data, in your menu, for the Comments link and in the footer. That's a lot of links, and you can style how each of them appear and react when hovered. Other links will be mentioned elsewhere, but for links in your posts, read on.
.storycontent a {From the top:
color: #669933;
border-bottom: dotted 1px #669933;
}
.storycontent a:hover {
border-bottom: solid 1px #669933;
}
.storycontent a:visited {
color: #669933;
}
.storycontent a - Links will be green, and have a green dotted underline.
.storycontent a:hover - When the mouse goes over the link, the dotted line will become solid.
.storycontent a:visited - Visited links will still be green, but there will be no underlines.
Of course you can change the colours and underlining to whatever you want. See the page on Link Classes for more details on what you can do.
An Ordered List
- A default ordered
- list will appear something like
- this. The numbers are roman, and you can see the indenting
- and the line spacing.
ol li {it would indent into the page a lot further, the list items would indent even further than that, and instead of 1,2,3 it would be i, ii, iii.
list-style: lower-roman;
margin-left: 5em;
text-indent: 4em;
}
Additionally, you might want an image to represent each item on the list.
ol li {Note: This can be used for unordered lists too, just replace the 'ol' with 'ul'.
list-style-image: url('bug.gif');
}