my weblog

It would appear that some people don’t ‘GET’ what this blog is about.
I’ll tell you:

1. if you want a background image on the body
2. if you want to know how to create different links
3. if you want to indent your paragraph text
4. if you want to style all your textarea’s
5. if you want to change input text colour
6. if you want to change the ‘Powered by WordPress’ in the footer
7. if you want lists in different styles
8. if you want to style your menu
9. if you want to style EACH PART of the menu links list by changing the font, the font size, the background color, the background image, by adding borders, by altering the hover behaviour
10. if you want to style the Search form
11. if you want to know how to put an image into your Comments boxes
12. if you want to style different parts of the Comments area
13. if you want to make your blog look more individual and less generic

Then you will find the code you need HERE.

If I had used subtle colours that blended well, used a design scheme that worked very well together, then if you know no CSS, you may have taken one look and thought that it was all too good for you to be able to learn. That is totally not the point of this blog.

Some colours exist in only one place on this page, and certainly the patterns do. That should make it much easier for you to find where in the CSS an effect is, and to hopefully understand how that effect has been applied.
If you have tried to learn CSS, and gone to look at the work of Meyer, Zeldman, Shea, it looks great, but their code is so well done, it is so well written and their designs fit together so seamlessly that it makes things confusing to understand for someone who doesn’t know any CSS. This is written in a way that hopefully makes things easier to understand.

Many people coming to WordPress haven’t used CSS before - they just dropped a ’skin’ into a folder on their site and their blog changed. That’s okay, but you still have a blog that looks the same as several thousand others. CSS, as so uniquely demonstrated here, gives you the chance to style your blog in a very individual way, and that is no bad thing. A default WordPress install, as this is, gives a lot of scope for customising the template already, and all without needing to know any PHP whatsoever. THAT is the point of this page.

The Comments form at the base of the page is open should you wish to say anything.

I hope you do find this, as it says further down, “useful".

Podz

This is a default WordPress Installation. The ONLY file that has been altered is ‘wp-layout.css’

This is here just to show you what basic CSS can do. Imagine … if I can make this incredible mess, then how good could YOU make yours, and without resorting to outdated and non-compliant code.

This page, and the CSS validate.

Due to the amount of colours used, I recommend you get this file - ColorPic. It’s a small, no-install freeware program. Use it to hover a colour so you can see the colour code - it will help you to read the CSS.

I also recommend that you install Firefox and also the Web Developer extension. This will allow you to view the CSS here very easily, and more importantly, allow you to edit the CSS of any page - including your blog - live. Saves making lots of edits in your admin area just to see if something works.

The CSS effects here have been tested in Firefox 0.9.2 and Opera 7.23
In IE6, the hover effect in the calendar fails to show properly.

This blog is not meant to look ‘pretty’ - hopefully it looks ‘useful’.

Scroll down to the bottom entry to see some Comment Styling.

Use this blog in conjunction with the other CSS guides here on this site.

This blog demonstrates only very basic CSS techniques. A blog that covers much more advanced use will be along soon ………..

The CSS can be viewed here: http://www.tamba2.org.uk/wordpress/1css/wp-layout.css

CREDITS
The link category styling was discovered by Root
Background images courtesy of Squidfingers

DISCREDITS
All colour and pattern choices by me. My apologies

And one last thing ……..CSS isn’t scary !!!!

Comment / Menu styling completed.

The text that appears outside of comments themselves is styled upon the #body statements.
Also, the font size defined in #body is used as the base figure when a % size is given later in the CSS.

This post illustrates most of the tags from the Quicktags bar.
Ordered list / Unordered list / Links within both / Post link / Comments styling / Blockquote / Footer behaviour.

There is minimal inheritance of any characteristic.

I have deliberately used different fonts and colours to both show the range of styling you could apply, and to help you in translating what is here to what is in the CSS.

This is not an example of how to write CSS - it is purely to demonstrate how your CSS can, in a default install, be used to control all aspects of the display without you having to resort to such old techniques as
<font color="#ccc"><font size=-1">Hello World</font>

1. The category link above is styled away from the meta
2. The post area is coloured
3. Links in .storycontent exhibit one behaviour
4. Links in this list exhibit another, as shown here

• I am using the square tag here - it’s lower greek above
• This font is somewhat, and deliberately, different too
• And links here appear differently

The comments link is styled.

This blockquote is already styled, so I’m not changing this.
An example of how to alter this tag is in the other css guide.

You can return to a less colourful environment by…… going to the Site Index

Welcome to WordPress. This is the first post. Edit or delete it, then start blogging!