WordPress and CSS

WordPress and CSS:

An Introduction to CSS
CSS (Cascading Style Sheets) is a smart way to add styling information to web pages.While it’s possible to add styling to HTML (e.g. using the font tag) HTML should only be used to structure your content, CSS is the only way you should apply styling.

Styling Lists with CSS
When presenting lists of things, WordPress uses standard XHTML elements:

for an Ordered List (where the order of items is important, so items are numbered)

for an Unordered List (normally shown as items with bullets)

for each item in a list, ordered or unordered.
By default, most lists (and some list items) in WordPress are identified by id or class attributes, making styling lists easy. With fairly simple changes to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting, change the bullet or numbering style, remove the bullets altogether, or any combination of these.

Begin by examining the style.css file found within the Theme’s folder you are using. Most WordPress Themes label their sidebar menu section with the words sidebar, menu, or a combination of both. So, look for the sidebar Template file, typically called sidebar.php. This is a sample sidebar.php layout; your version may be different, but the concept will be the same.

When you are working with nested lists and you want an individual style for each list, you have to recreate the “nest” in the stylesheet (style.css).
#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}
ul
The first style (#sidebar ul) sets the look for the overall list. It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.
li
The #sidebar li assigns a style to the actual list item. Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.

ul li

The #sidebar ul li determines the style of the first nested list. Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific CSS ID. In the above example, after the #search section, the first nested list is #pagenav. If you use Pages this is where the list of Pages would be generated. Since Pages work outside of The WordPress Loop, and often highlight specific information like “About Us”, “Contact”, and “Site Map”, you may want to design the Pages style differently than the rest of your lists by putting the specific information about the look of the Pages in the #pagenav.

ul ul li
The #sidebar ul ul li applies style to the links within the #sidebar ul ul to help customize the look of this list. Again, if you have customized the #pagenav list, it will be different from the rest of your nested list items.

ul ul ul li

The #sidebar ul ul ul li is the style for the sub-sub-list. If you have a list of categories with subcategories, the category title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below. Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:
* Category Title
o Category One
o Category Two
+ Sub-Category One
+ Sub-Category Two
o Category Three

Styling Specific List Items
Do you want your Categories List to look different from your Archives List? Then open up the index.php or sidebar.php and carefully add the following style references to the appropriate list item:
To customize the Categories and Archives list, add the following to your stylesheet to customize these individually:
#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}
Go through any other sections of your list and give them a style reference name and add them to your style sheet. When you’ve identified which part of the list controls which aspect of the list, it’s time to start changing the look of the list.

Styling individual items
If you want to use image replacement techniques to style your list, each LI tag will need its own class or ID. Try the Classy wp_list_pages plugin.

Styling Your Lists
An important part of a list is the bullet – an eye catching dot, spot, or graphic that tells viewers “this is a list”. The style of bullet or numbering for a list is determined by a list-style-type property in the style sheet. The default value is disc. Other basic values are circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none. Let’s change the default value to something else, like a square.

#sidebar li {
list-style: square;
}

Instead of typing list-style-type, you see a shorthand form of list-style, and instead of using the default disc, the list now features small squares.
But not all lists need bullets. By their overall layout, you just know a list is a list. To eliminate the bullet, change the stylesheet to this:

#sidebar li {
list-style: none;
}

Now, anything tagged with
within the DIV of the ID of #sidebar, would have no bullet. Experiment with different values to see the results you can achieve.
HINT: In terms of accessibility, an ordered list is easier to navigate than an unordered list.

Using a Custom Image Instead of a Bullet
Tired of boring bullets? Let’s get rid of the boring with a few CSS techniques. In this case, use list-style-image to instruct the browser to use your bullet image instead of the old boring default bullets.

Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists:

#sidebar ul {
list-style-image: url(/wp-images/image.gif);
}

Note that you could also use an absolute link rather than a relative link. Simply change the url(/wp-images/image.gif ) to url(http://example.com/wp-images/image.gif).

Adding a Border to Your List

To add a border, like an underline, after your title, you can simply add a border style to the top of the ul under the title, rather than on the title itself.

#sidebar ul ul {…; border-top: solid 1px blue; ….}

Go a step further and add a whole box around your list with the title sitting atop it:

#sidebar ul ul {…; border: solid 1px blue; ….}
Add a colored background to your list along with its new border:

#sidebar ul ul {…; border-top: solid 1px blue;
background:#CCFFFF; ….}

And your end result would look like this:

Category Title
Category One
Category Two
Category Three
Or really expand the possiblities to something like this:
Category Title
Category One
Category Two
Category Three
You can have a lot of fun with your list bullets and list layouts. If you are having.

The Header Box

From the top, it means

The background is that green / grey colour.

The border at the bottom should be a double border, 3 pixels wide, and be the colour of #aba
That the borders on the other three sides should be solid, 1 pixel wide and the colours described.

The ‘margin’ line means there is no white space between the header box and the screen sides of your display.

The ‘padding’ is the space that is automatically put between the weblog title and the sides of the box.
Want to make the header thinner ? Make the first and the third number smaller. (The numbers for the padding refer to the space that should be inserted on the top, the right, the bottom and the left in that order).

Want to make the header bigger ? Increase the first and third numbers.

So you can change the font you want, you can alter it’s colour, and you can make the background a different colour too. Wonderful ! But you might want an image …….. so here’s how to do it.

Putting an image into the header box.
Before I start, one or two points:
Although you may have a fast line, not all your viewers will. Try to keep image sizes to around 50K or less – it will save you bandwidth too.
If you have changed the image, but it is not showing up, it could be an issue with your browser cache. Clear the cache and / or – on a Windows machine – press CTRL-F5. This will force a hard refresh. If this does not work, then check your image upload again.

From the top, it means

The background is that green / grey colour.

The border at the bottom should be a double border, 3 pixels wide, and be the colour of #aba
That the borders on the other three sides should be solid, 1 pixel wide and the colours described.

The ‘margin’ line means there is no white space between the header box and the screen sides of your display.

The ‘padding’ is the space that is automatically put between the weblog title and the sides of the box.
Want to make the header thinner ? Make the first and the third number smaller. (The numbers for the padding refer to the space that should be inserted on the top, the right, the bottom and the left in that order).

Want to make the header bigger ? Increase the first and third numbers.

So you can change the font you want, you can alter it’s colour, and you can make the background a different colour too. Wonderful ! But you might want an image …….. so here’s how to do it.

Putting an image into the header box.
Before I start, one or two points:
Although you may have a fast line, not all your viewers will. Try to keep image sizes to around 50K or less – it will save you bandwidth too.
If you have changed the image, but it is not showing up, it could be an issue with your browser cache. Clear the cache and / or – on a Windows machine – press CTRL-F5. This will force a hard refresh. If this does not work, then check your image upload again.

Your text is actually still being displayed, but as it’s a couple of feet to the left of your monitor, you can’t see it. But, even though it is there, the code above causes the whole area to act as a hyperlink.
So you now have an image that is a link, but without any writing on it, and without having to edit the index file.

Your post title
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;’

Post data
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

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,

From the top:
.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
1.A default ordered
2.list will appear something like
3.this. The numbers are roman, and you can see the indenting
4.and the line spacing.
But if you changed your CSS to this:
ol li {
list-style: lower-roman;
margin-left: 5em;
text-indent: 4em;
}

Change the background colour at the top.
If you would like the double border at the bottom too, add this line below the ‘border-top’
border-bottom: double 3px #aba;

Don’t like the double border ? Want a dotted one ? Replace ‘double’ with ‘dotted’
Change the border colour by altering the ‘#aba’ to whatever you want.

The Margin will set the bar 10px below content on the page, the padding will make the bar 3px thicker than the height of the text, and the text will be centre aligned. If you want the text in that bar to be on the left, put ‘left’ where ‘center’ is.

(That bar actually passes behind the menu, so if your menu is covering part of the bar, although the text will not be centred according to your content, it is still centred according to the page size).

If you don’t want a full bar across the screen, you can alter that too.

Add this line to the above;
width: 20em;
This will shorten the bar.
Now look at the line
margin: 10px 0 0 0;

The numbers refer to the margin that should be allowed in each of the four directions, but in this order – top, right, bottom, left (think of it as clockwise).

Alter the last zero to read ‘100px’ and see what happens. It moves away from the side. Try 150px or 200px and just fiddle with it until it is exactly the place that you want it to be. You can also alter the ’12em’ and the ‘padding’ if you want.
Images
I suppose you now want to know how to get the background image onto your page then ? Okay …..

In your style.css is the #body tag;
body {
border: solid 2px #565;
border-bottom: solid 1px #565;
border-top: solid 3px #565;
font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: white;
color: black;
}
We need to tell the body to call an image.
Move the menu

In style.css is this part;
#menu {
background: #fff;
border-left: 1px dotted #ccc;
border-top: solid 3px #e0e6e0;
padding: 20px 0 10px 30px;
position: absolute;
right: 2px;
top: 0;
width: 11em;
}
Now the bit we will change is the right: 2px; part. Change the word right to left. If you now look at your weblog,
Move the header

We’ll move the weblog title first. Strictly speaking, we are not actually moving the header. We are just moving that part of the header that you want to see. So that’s the title then.
Look at your css again, and find this part;
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
We just need the bottom line of that statement.
Try changing that number 60 into 260. You should now see that your weblog title has been moved into view.

Okay, so that’s the header bit sorted.

Make the Content content

The soon-to-be-altered part of the css is this;
#content {
margin: 30px 13em 0 3em;
padding-right: 60px;
}
I suppose it’s about here that I try to explain what an ’em’ is. Hmm, okay then.
An ’em’ is equal to an ‘M’ in the font you are using.
So a horizontal space of ’13em’ in this font would be the same width as MMMMMMMMMMMMM – because that’s 13 M’s. Bigger font ? Bigger space .. get the idea ?
So why use ’em’ here and not pixels like we do pretty much everywhere else ? Because we want what we write to have a nice, straight, unruled edge to it. We want the left side of our paragraphs to be neat. There, that’ll do eh ? Right ……

So, an explanation of the above #content css.
Your content will have margins around it, and going from top – right – bottom – left they are 30px, 13em, 0 (none) and 3em.
Now look again at the image above.
The top and bottom margins are fine, and can stay the same. The left margin is too big though, and so is the right.
If the page worked the other way around though, it should work this way if we switch the numbers, so swap the 13em and the 3em.