WordPress and CSS


WordPress and CSS:

The Header:
weblog title:
The CSS that controls how those words are displayed

#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;
}

#header a {
color: #fff;
text-decoration: none;
}

#header a:hover {
text-decoration: underline;
}
(I have highlighted in bold only that part which affects the appearance of ‘my weblog’ in the top statement.)

the part in bold tells the font to be over double the normal size, that the font used should be Times New Roman, and the letters should be .2 of an ’em’ apart.

The #header a says that the letters should be in white, and that even though it is a link, it must not be underlined normally.

The #header a:hover bit tells the code to underline the link when it is hovered.

You can alter what you want in those sections of css I have just described.
The Header
The Header box:
Here’s some CSS again:
#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;
}
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.
3: 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.
Okay, image time.
Here’s that code again;
#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;
}
The background has been set with a colour, but if we add an image statement after it, this will take over.
You can leave the ‘background: #90a090;’ line in, comment it out, or delete it, or change the colour to that of your page. Your choice.

Just under that line you need to add this line;
background-image: url(”);
and in between the ” goes the address of the image you are going to use.

Unless you tell the CSS otherwise, it will repeat your image if there is any extra space in the header.
If you are using an image that is smaller, you can add the following to the CSS to alter how it repeats: background-repeat: no-repeat; Image is displayed only once.
background-repeat: repeat-x; Image repeats horizontally.
background-repeat: repeat-y; Image repeats vertically.
background-repeat: repeat; Image repeats constantly. Good for tiled images.

Looks straightforward eh ? Hmmm … not quite🙂

The default header box is what ? around 50px tall ? If you load an image that is 1000px tall, all you will see is the top 50px of it (though why you would want a header picture that big is beyond me, but you see what I mean). The image properties matter not if the image is too big – the box will win the contest. So you have to alter the box – not the image.

Let’s say you have an image that is the perfect width, but is slightly too tall. This is how we alter the box. Look at that ‘padding: 15px 10px 15px 60px;’ line – this is where we change things.
(I’m assuming you have chosen an image and can see part of it on your weblog).
Now we are going to alter the first and third numbers.
Altering the first will make the box bigger, but will push your weblog title down.
Altering the third will again make the box bigger, but your title will stay where it is.

For now, increase the third number until the whole image appears in the box. If you are happy with how it looks, cool ! You’re done🙂
If you want the title to be at the bottom though, swap the first and third numbers around.
If you want it in the middle, adjust those numbers to be the same.

You may now want to either change the border colours to suit the image or your page, or lose the borders – just delete those lines in the latter case.

With the example below, here is the CSS used to display it.
#header {
background: #fff;
background-image: url(‘fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 150px 60px;
}
One last thing …. the header box actually fits the whole screen width in a default install. And you may have an image that wide – and of course you want to see all of it. In this case, you need to bump the menu down.
Here’s the menu CSS;
#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;
}
See the line ‘top: 0;’ ?
Make the 0 into 100px, see where it goes, and then adjust it to suit.

That’s how to add an image to your header.
It does get a bit more complicated – but not that much – when you want to use an image that is smaller. If this is what you want, please head over to the WP Styles page and check out the other effects than can be achieved. Study the same part of their CSS as detailed above, and you should, knowing what you do now, be able to see how they did it.
Removing the weblog title.

If you have taken the time to create a new image for your weblog, you might not want the title to be written all over it.

It’s easy enough to alter ‘index.php’ so that is not in the header id, but that removes an important part of your site’s navigation. If someone were to view a single post, or a category list of posts, they would have no easy way to return to your main page. So what is needed is for a way for your header image to act as the hyperlink, even without your weblog title there.

The ‘#header’ and ‘#header a’ CSS needs replacing for this to happen.
First, find the measurements of your header image in pixels.
Then, in the CSS, find where #header is defined. It may look something like this if you already have an image there:
#header {
background: #fff;
background-image: url(‘fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 150px 60px;
}
Delete lines until you are left with this:
#header {
background-image: url(‘fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
margin: 0;
}
Now add the dimensions of your background image:
#header {
background-image: url(‘fisherman.gif’);
background-repeat: no-repeat;
border: solid 1px #000;
margin: 0;
height: 200px;
width: 718px;
}
That now controls the image, but it doesn’t yet take the text away. To do this, find where ‘#header a’ is defined. In a default CSS, it looks like this:
#header a {
color: #fff;
text-decoration: none;
}
Delete that. In it’s place, put this code:
#header a {
display:block;
height:100%;
text-indent:-500em;
text-decoration:none;
}
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.

Post Content

The date.
This is styled from the following statement:
h2 {
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 don’t want the dotted line across your page, delete the ‘border-bottom’ line.
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;
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
.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;
blockquote {
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}
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.

In contrast, the blockquote style I have been using here is this;
blockquote {
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;
}
You can see how that looks just by looking at the box that code is in.
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
p, li, .feedback {
font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
letter-spacing: -1px;
}
Changing the 90% will change the text size, while changing the 175% will change the text spacing.
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 {
margin: 30px 13em 0 3em;
padding-right: 60px;
background: #00ff00;
}
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.

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.
.storycontent p {
text-indent: 3em;
font: 100%/130% arial, verdana, ‘lucida sans unicode’, sans-serif;
color: #ccc;
}
The above will automatically indent the first line of each paragraph.
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 {
color: #669933;
border-bottom: dotted 1px #669933;
}

.storycontent a:hover {
border-bottom: solid 1px #669933;
}

.storycontent a:visited {
color: #669933;
}
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;
}
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.
Additionally, you might want an image to represent each item on the list.

The CSS that produced that:
ol li {
list-style-image: url(‘bug.gif’);
}
Menu

The menu itself is controlled by:
#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;
}
From the top again:
The background is white
If you do not want a border on the left, delete that line.
If you want a thicker border, change the 1px to 2px (or 3px or 4px ..)
If you want the border to be a solid line, use ‘solid’ not ‘dotted’
Change the border colour by changing #ccc
The same things apply to the border-top.

Padding:
This is the white space that surrounds the words inside the menu.
There will be 20px (px=pixels) between the top of the menu and the start of the words, no space on the right, 10px space at the bottom, and the 30px mean that the text will be indented from the left side. This 30px applies to the link titles (Links, Categories etc)
right: 2px; means position the menu 2px in from the right, and top: 0px; means put the menu right at the top of the screen.
If you wanted to drop the menu, increase the top value.
If you want the menu on the left, change right: 2px; to left: 2px; BUT!! you will also need then to alter the header and the content divs. (Please check the Index page for when this is added).
1. The Link Title
Controlled by:
#menu ul li {
font: italic normal 110% ‘Times New Roman’, Times, serif;
letter-spacing: 0.1em;
margin-top: 10px;
padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}
Change fonts and spacing here. To alter the colour of a link title, add
color: #00ff00;
to the above statement. (You can change the #00ff00 to a more subtle colour if you really want to !)

The links themselves are controlled by:
#menu ul ul li {
border: 0;
font: normal normal 70%/115% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
letter-spacing: 0;
margin-top: 0;
padding: 0;
padding-left: 12px;
}

#menu ul ul li a {
color: #000;
text-decoration: none;
}

#menu ul ul li a:hover {
border-bottom: 1px solid #809080;
}

Okay.. actually there is more css that affects them, but this lot will do for starters.
Change the link font in the top part
Change the normal link colour in the second part
Change how the link acts when it is hovered in the third part.
If you do not want it to be underlined, and just want it to change colour, make that line read:
color: #00ff00;
If you would rather have a dotted underline, and in bright green, make it:
border-bottom: 1px dotted #00ff00;
If you want the link to get bigger:
font-size: 150%;

This is an example of overkill!
#menu ul ul li a:hover {
font-size: 150%;
border-bottom: 1px solid #809080;
border-top: 2px dotted #00ff00;
}
But it should give you some idea of what you can mess with.

2. Categories
The same CSS as above applies here.
If you want the number of posts in each category to be displayed though, edit your ‘index.php’ to read like this;

  • Categories:
    • If you would like drop-down categories, then put this into your index.php;
      <form action="” method=”get”>

      3. The Search Box

      First, instead of it being on 2 lines, with “Search” on a button below, how about making it one line only ?

      Add this to your style.css – it doesn’t matter where;
      form.searchform {display: inline;}
      Now edit your index.php, and you will see these lines;
      <form id="searchform" method="get" action="”>


      <input type="submit" name="submit" value="” />

      and delete the
      that is in bold.
      If that does not do the trick, see this part above ? size=”15″ />. Make that ’15’ into 5 and increase it by 1 to whatever your template will tolerate.
      If altering THAT doesn’t move things around, look inside the CSS:
      #menu input#s {
      width: 80%;
      And change the 80% to something smaller. That’s that done.

      Notice I changed the word from “Search” to “Go!” ? Put whatever you want of course.

      Colour the Search box.
      Add this to your css;
      #menu li form input{
      background-color: #ffff00;
      }

      #menu li form input#s{
      background-color: #ffff00;
      }

      That will give you a bright yellow background where your viewers can enter the text they wish to look for.

      Colour the Search button
      Add this to your css;
      #menu li form input.purple{
      background-color: #ff00ff;
      }
      and in your index.php, edit these lines to include what is in bold
      <form id="searchform" method="get" action="”>


      <input class="purple" type="submit" name="submit" value="” />

      That will give you a purple button. Again, use the colours you want, and what you call it does not matter – you could alter the background colour to whatever you want but still call it purple. It’ll work, though it is always better to use the name of a colour when using classes.

      Now … you may have a really nice colour button, but you now want to alter the text on it too, so let’s change that too.
      In the CSS you added above, make it like this;
      #menu li form input.purple{
      background-color: #ff00ff;
      font-size: 10px;
      font-weight: bold;
      color: #fff;
      }

      Again, you can change the font size, font weight, and text colour.

      Make the Search button an image

      First, go make your image. I’d recommend that you start with an image that is around 20 pixels square, no larger, and that it is a tranparent gif. This will merge well with your existing colour scheme.
      Upload that image to wherever you want, and note it’s location.

      Into your CSS, you need to add a class;
      .button {
      repeat: no-repeat;
      margin-bottom: -5px;
      }
      When trying to do this, I could not get the bottom of my image button to line up with the bottom of my search box. I have no idea right now why, but it just wouldn’t. That’s why I have a negative margin. You may need one, you may not. (If I come up with a better way of doing this, I will update the page).

      Next, you need to modify your index.php;

      Note the ‘src=”pix/button.gif” ‘ That is where I have my button – you must put your location.

      And if, after reading all this, you do not want the Search function on your page, just delete that part of ‘index.php’

      4. Archives
      For drop-down archives, edit your ‘index.php’ to be like this;

    • Archives:

      By Month

    • 5. The Calendar
      The colours of the days of the week can be altered by adding to this;
      #wp-calendar th {
      font-style: normal;
      text-transform: capitalize;
      }
      so to make them red, turn the above into this;
      #wp-calendar th {
      font-style: normal;
      text-transform: capitalize;
      color: #ff0000;
      }

      To alter the numbers, you need this part;
      #wp-calendar td {
      color: #ccc;
      font: normal 12px ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: normal;
      padding: 2px 0;
      text-align: center;
      }
      Change the colour on the top line, and the font on the second.

      To change the colour of the text, and the colour of the highlight box that appears when a date you have posted is hovered;
      #wp-calendar a:hover {
      background: #e0e6e0;
      color: #333;
      }

      To change the colour of the highlight box that appears when any date is hovered, alter the top line in the css below.
      To change the colour of the text that appears in the highlighted box when it is hovered, alter the second line below.
      #wp-calendar td:hover, #wp-calendar #today {
      background: #eee;
      color: #bbb;
      }

      The colour of the border that surrounds the calendar is controlled by;
      #wp-calendar {
      border: 1px solid #ddd;
      empty-cells: show;
      font-size: 14px;
      margin: 0;
      width: 90%;
      }
      Alter the top line to change the colour.
      If you want a thicker border make the ‘1px’ into ‘2px’
      If you don’t want a border, don’t delete the line – just make it’s colour the same as that of your page. That way, if you ever want to put it back, it’s very easily done.
      You can also alter the width by changing the 90%.

      6. Login / Registration
      Delete either or both of these from your ‘index.php’ if you do not want visitors to see / use them.

      Boxing in your links

      This creates the impression that you have cleverly made vertical boxes for your links content.
      To do this, you modify the following part – this part was discussed above. It looks like this right now;
      #menu ul li {
      font: italic normal 110% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.1em;
      margin-top: 10px;
      padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
      }
      and you make it into this;
      #menu ul li {
      font: italic normal 110% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.1em;
      margin-top: 10px;
      padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
      padding-left; 2px;
      background-color: #fff;
      border-top: solid 1px #000;
      border-left: solid 1px #000;
      border-right: solid 1px #000;
      border-bottom: solid 1px #000;
      }
      Note: I have added a padding of 2px so that your link titles are slightly away from your new borders.
      You can add a colour to the menu background by adding
      background-color; #0000ff;
      to your #menu div – it’s the one at the top of this page.
      You can again just have the borders you want, the sizes you want, colours etc..
      The Footer

      In a default install, the footer will stretch across the entire screen. Now footers are a good thing, but as it is, it’s more of a ‘catch all’ than a footer. So it needs moving.
      Edit ‘index.php’ and scroll to the bottom. You should see this:

      <!–num_queries; ?> queries. seconds. –> <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?>

      All you need to do is move a closing div to below the footer code. Like this:

      <!–num_queries; ?> queries. seconds. –> <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?>

      Now, if your footer still goes all the way across the screen, it’s because you have not defined the rap div. Define that, and your footer will sit nicely where it is meant to.

      1
      The CSS that sorts this bar out is;
      .credit {
      background: #90a090;
      border-top: double 3px #aba;
      color: #fff;
      font-size: 11px;
      margin: 10px 0 0 0;
      padding: 3px;
      text-align: center;
      }
      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.

      2
      The CSS in the above box still controls this.
      The font will be 11 pixels tall.
      ‘color: #fff’ means that text will be white.
      If you want to add extra links in the bar, you will need to edit your ‘index.php’.

      3
      The ‘WordPress’ link is affected by these two elements;
      If you want to alter the colour of the word ‘WordPress’ in the bar, add the following to your css;
      .credit cite a {
      color: #00ff00;
      }

      .credit cite a:hover {
      color: #ffff00;
      }
      That will make the word bright green, and yellow when hovered.

      Note:If you have removed the link to WordPress from your links, please leave the link to WP in this bar. It’s only polite to do so, after all, if someone used your work and didn’t at least let their viewers know where they had got it from, it would annoy you, right ?

      You may want to show the amount of database queries that it took to create your page, and the amount of time it took to render your page. This is the code to do that:

      num_queries; ?> queries. seconds. <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform.”)); ?>

      Links
      On your default WP install, links in your posts appear a green/grey colour and are underlined. They also change colour slightly when hovered. This behaviour applies to most links anywhere in your weblog, and you may well want to change it. Here’s how.

      Now before you start, think for a moment about how you want your links to look to your visitors. If you have a large site, then the colour of a link that your visitor has already seen is quite important. It can help them to navigate through your site if a visited link looks different to one they have not yet been to. On your average weblog, it’s no huge deal, but if your site begins to grow, it can become important. Anyway ….

      To do this, we need to create some link classes, and then change our code.
      Right at the top of your wp-layout.css is the CSS that curretly has control.
      a {
      color: #675;
      }

      a img {
      border: none;
      }

      a:visited {
      color: #342;
      }

      a:hover {
      color: #9a8;
      }
      Ignore the line with the ‘img’ in (that just stops all images having borders if they are links).
      Now don’t go getting rid of this part above! If nothing else, it’s your backup, and if it’s not used, it’s not exactly taking up a lot of space.

      So let’s create a link that will be bright green, and go dark green when hovered.
      Copy the above section into a text editor (like Notepad).
      Edit out the ‘a img {border: none;}’ line.
      You should be looking at this;
      a {
      color: #675;
      }

      a:visited {
      color: #342;
      }

      a:hover {
      color: #9a8;
      }
      The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      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.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      Now we add our first ‘class’.
      Alter the above lines so they look like this;
      a.green {
      color: #00ff00;
      }

      a.green:visited {
      color: #669933;
      }

      a.green:hover {The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      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.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      color: #669933;
      }
      Paste that into your ‘wp-layout.css’ – it doesn’t matter where, but close to the other similar links is good. Now that will colour links bright green, visited links will be a darker green, and hovered links will also be a darker green…..but only if we tell the code the right thing.

      A link normally looks like this;
      WordPress

      but if we want to use our new colours, we need to add the ‘class’;
      WordPressThe rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      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.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!
      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      You can add as many classes as you want – just change the colours and change the class name (which as you have seen is the word between ‘a.’ and ‘:link’).
      If you have these classes, and you forget to add a class to the href, it will look like a default link. Just edit your post.

      This has covered just those links in the main content area. The section of this guide that covers the menu will show how to alter some of the link colours there, and the ‘Post Content’ section has details there too.

      If you want to go all out on your links, then an excellent article is Custom Underlines from A List Apart.

      The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      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.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.
      A left sided Menu
      So you want to move your column of links to the left hand side ? Keep reading then !

      The above is what you have now.
      This tutorial will take you through moving first the menu, then the header, then the middle bit where you post. All it involves is changing the file ‘style.css’ in a few (well, quite a few) places.
      This tutorial, unlike the others, involves more changing of numbers. While the numbers I give will work for what you see, they may not be exactly right for you. If they aren’t, then change them little by little until they do work for you. It will work in the end🙂

      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, it’s a mess like this;

      Now there is nothing wrong there, the code is still fine, but we do need to shift the stuff from behind the newly placed menu.

      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.

      And you should now see this;

      There you go – job done !
      Image Alignment & Drop Shadows

      When you put an image into your post, this is the sort of thing that you will see…

      The image just sits there on the left.

      Let’s move it…..

      1. Stick it in the middle

      We need to create the CSS to center the image.
      Actually, it will center anything, not just images.

      From your login, go to Options, and edit ‘style.css’
      Paste this into your css file;
      div.cent {
      text-align: center;
      }
      I know it says ‘text-align’ but it works with pictures too. Now, when you post something that you want to be centred, you write it like this;

      Everything here will be centred

      For this next part, you are going to need some code and images.
      This is already done – by Laughing Lizard – and you will need to go to his site, get the code, and follow all the instructions there (they are brief and easy!) before you can do the rest of this page.
      Go to the Weblog Tools Collection.

      2. On the left with text wrap

      The code you have just got will enable you to have images like the above on your weblog.
      If the image ‘breaks through’ your entry box, then you will need to add this code to your css;
      div.clearer {
      clear: left;
      line-height: 0;
      height: 0;
      }

      and then when you enter your last image – not at the end of your text – put this;

       

      That image above was produced by the entry into WP identical to that below;

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt …….
      Note the gap ! There is a carriage return between the

      and the start of the text. If this is not there, your entered text will be in bold text.

      3. On the right with text wrap

      You need to copy and alter the css that Laughing Lizard wrote now.
      This is part of his original CSS:
      .img-shadow {
      clear: both;
      float:left;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 20px 0 0 17px !important;
      margin: 20px 0 0 8px;
      }

      .img-shadow img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 4px;
      }

      In your ‘style.css’, copy that, then paste it again into your css file. Yes, you do have a doubling up, but only for a moment.
      Now alter the pasted code by making the following changes which I have highlighted in bold. (Or you could just copy this code below🙂 )
      .img-shadow1 {
      clear: both;
      float:right;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 20px 0 0 17px !important;
      margin: 20px 0 0 8px;
      }

      .img-shadow1 img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 4px;
      }

      And the entry in WP that produced that screenshot above was this;

       

      magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation …

      Again, note the carriage return and where the

       

      goes.

      Note also that if you use your new ‘Quicktag’, that the image will always be left-aligned. If you want it right aligned, you can still use the Quicktag, but be sure to put the ‘1’ in as in the above example.

      Credits

      The CSS, as mentioned, is the work of Laughing Lizard. Many thanks to him for allowing his work to appear here.

      The clearer div has been taken from Complex Spiral. I recommend that you read the article here on containing-floats. I have permission from the author of that page – Eric Meyer – for the quoting and use of his code.
      Customising Comments

      This part of the tutorial will enable you to do the following;
      Change the font family used for the comments
      Change the font size used for comments
      Put borders around the comment boxes
      Have a background colour or image for the comments box
      Change the “Comments by” line
      Altering the page background
      The Comments link
      Extra bits
      Files involved are: style.css, comments-popup.php / comments.php

      Change the font-family
      At present in your css, this is all the code that affects comments
      ol#comments li p {
      font-size: 100%;
      }
      Okay … there is some more, but we can ignore it for now.
      Now if you were to ‘View Source’ on a comment page, you will see that there are some tags that are called, but are not defined, so that’s what we are going to do here, and later on. So, changing the font-family ..
      Add the following to your style.css (you can copy and paste it if you want)
      ol#commentlist p {
      font-family: Tahoma;
      font-size: 100%;
      }
      We now have the font-family Tahoma, and it is set at a size of 100%.
      Now this will only affect text that is an ordered list within your comments page – that is, just your comments. It will not affect other text on the page. To be precise, it will only affect paragraph text that is contained within a commentlist div. Remember, if the font-family that you want has more than one name, such as Lucida sans unicode, it should be entered in quotes – “Lucida sans unicode”

      Change the font size
      Easy, alter the 100% in the code you just entered;
      ol#commentlist p {
      font-family: Tahoma;
      font-size: 150%;
      }
      That’s BIG text!
      A point: the bit in your comments that says “Comments by …….” is affected by this 150%. So if this text in your comments gets bigger, so does that bit. Likewise, if you make the comment text smaller, the “Comments by …” will be even smaller than that. See further down the page “Change the “Comments by” line”

      Bordering
      Time to add some css;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      }
      This tells the browser that each list element (in an ordered commentlist div) must have a border on each side, and that the border should be solid, 1 pixel wide and be bright red.

      I have added a margin so that the comments are slightly apart. Change or remove this as you wish.
      Now you don’t need all sides bordered if you don’t want, and you can of course change the border styles and sizes to suit the look you want.

      Another point: There is a very good reason why we are not using the ‘p’ element in the above definition. Take a look at this screenshot

      That uses the same code as above, but with the top line being ol#commentlist li p {
      See how the comment is in a different box from the person who made it ? Now that’s not so bad on it’s own, but look at the bottom entry … when I entered that, I wrote the first line “Here’s a lyric from Apoptygma Berzerk” I then pressed Enter, and continued writing. The code though thought that this was another paragraph, so it put a box around the first line, and then a box around the rest. So you could end up with several boxes for just one comment entry. Messy. So that’s why the ‘p’ is not there. Anyway…….

      Colour or Image the Comments box

      Look again at this code which you put into your page;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      }
      We’ve told it what to do around the box that the words are in, but not what to do with the inside of the box. So let’s do that then. We’ll add a line to make that code look like this;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      background-image: url(‘image.gif’);
      }
      You can use a .gif .png .jpg – it matters not.
      The image goes in your main WP directory.
      Remember that the comments boxes are usually quite small, so don’t have a huge image loading into it.
      Something more subtle than that scribble would be good too !

      If you just want a background colour, then you need this instead;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      background-colour: #0000ff;
      }
      That will give you a blue background. Change to suit of course.

      Change the “Comments by” line
      Because we have changed the background, it’s maybe not as quickly obvious as to who has made the comments. If you like the look you have, then just ignore this bit.

      If though you want to alter the ‘Comments by…” then we need to make a change elsewhere.
      From your login, go to Templates, and edit the comments template that you use (either ‘popup comments’ or ‘comments’) and look for this part (It’s about a third of the way down);

      by — @ <a href="#comment-“>

      You need to change it so that it looks like this – add the 1 in both locations.

      by — @ <a href="#comment-“>

      Now save the change.
      Now we need to add cite1 to your css, so open style.css
      cite1 {
      font-size: 90%;
      font-style: normal;
      background-color: #fff;
      }
      We have had to to this because the element cite is used elsewhere, and we only want these changes to affect the comments page.

      The new code above will produce a result like this.
      The commentor now stands out that bit more.
      You can change anything on each of those lines, and add borders like the examples above if you want. It’s a bit small for an image, but you could try !

      By now, you should be able to change the font and font size of your comments, you can have your comments box bordered, and you can have a background image or colour too. Pretty good. Shame about the rest of the page ……… but read on !

      Altering the page background

      There is a div that is used on the page, but it’s not actually defined. Yet.
      Here is some code for style.css;
      #commentspopup {
      background-image: url(‘image.gif’);
      }
      It’s only a page background, so not a lot of code is needed. If you don’t want an image, use something like this;
      #commentspopup {
      background-color: #ff00ff;
      }
      I think that’s a purple colour ?

      The Comments Link
      In a default install, this part of the CSS controls how that link looks.
      p, li, .feedback {
      font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: -1px;
      }
      If you are going to customise your page, it’s a good idea to split these statements. This was described on the ‘Post content’ page. So you should have this:
      .feedback {
      font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: -1px;
      }
      Change the 90% up or down to make the text larger / smaller. If you make the font a fixed size – by using a ‘pt’ measurement, this may make it hard for people with other screen resolutions to see the words you have there.

      The ‘Comments’ is a link, and can be styled as such too. Here for instance, it is coloured green, but when it is hovered, it turns yellow.
      .feedback a {
      color: #00ff00;
      }

      .feedback a:hover {
      color: #ffff00;
      }

      Extra bits
      You can put some colour into the comments boxes too.
      Each of those boxes is named in the WordPress code, so all we need to do is create the CSS that will colour those named areas.
      #commentform #author {
      border: 1px dotted #000;
      background: #ff0033;
      padding: .2em;
      }

      #commentform #email {
      border: 2px solid #000;
      background: #ff6633;
      padding: .3em;
      }

      #commentform #url {
      border: 3px dotted #000;
      background: #ff9933;
      padding: .4em;
      }

      #commentform textarea {
      width: 100%;
      background: #ffff33;
      }
      That CSS looks like this:

      That bug is the submit button.
      To have something similar, in the CSS, put this:
      .button {
      repeat: no-repeat;
      margin-bottom: -5px;
      }
      And in comments.php (or comments-popup.php) change this line:
      <input name="submit" type="submit" tabindex="5" value="” />
      into this:

      1. January 23rd, 2010

      Leave a Reply

      Fill in your details below or click an icon to log in:

      WordPress.com Logo

      You are commenting using your WordPress.com account. Log Out / Change )

      Twitter picture

      You are commenting using your Twitter account. Log Out / Change )

      Facebook photo

      You are commenting using your Facebook account. Log Out / Change )

      Google+ photo

      You are commenting using your Google+ account. Log Out / Change )

      Connecting to %s

      %d bloggers like this: