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
ofcourse.
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 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;
# Search:
<form id=”searchform” method=”get” action=””>
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 Footer}
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’The Footer
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 lineThe Footer
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 Footer
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;
}The Footer
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;The Footer
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;The Footer
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’;
WordPress 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.
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:
With Regards
Hemakumar.S
