Ohmystinkinheck

I like to personalize everything I touch. Some projects take longer to do than others, but if I stick with something, it eventually has “my mark” on it.

I enjoy working within the WordPress platform because I can customize until the cows come home (and trust me, that’ll be a looooooong time because we don’t have any cows.) and make my blog match what I see in my mind’s eye.

When I first started out with WordPress, I had to devote a bit of time in getting to know it. Much like a first date, I was giddy, but unsure. After we began holding hands I was feeling more comfortable. And then? Well, aren’t you a voyeur! My WordPress and I moved on to bigger and better things. We stretched our imaginations, downloaded some plugins, laid out a new pallete or two, and got down and dirty. Oh yes, we did.

And you can too.

True you may have found a theme you really, really like, but if you downloaded it for free somewhere, the likelihood is that SO HAVE 100 TRILLION (okay, maybe not that many) other people. So, where do you start in personalizing your WordPress blog’s theme? You start with a basic understanding of the CSS, Cascading Style Sheet.

But before you do that, make sure you’ve jumped through a few other WordPress Wednesdays hoops to get you started. You and WordPress have to hook-up before you can move on to 2nd base is all I’m sayin’.

CSS In Briefs

…er, I meant BRIEF, not “briefs”. I’m…uh… not THAT familiar with my CSS. *ahem* heh heh…

Now understand we aren’t getting into any heavy petting today. We need to control ourselves here and just introduce some of the basic modifications you can make to your CSS to personalize your blog.

Now, if you like to make changes to your blog from within your WordPress Interface, then you need to log into your Dashboard.

Then, scroll cross the horizontal light blue navigation bar at top until you see the text link for “Presentation”. Click it.

You will see the header “Current Theme” with the large thumbnail image of the theme you are currently running. Right above it, click on the white text link (in the navy blue horizontal nav bar) that says “Theme Editor”. Here you will be able to edit your files for each theme, as long as you have made your theme files editable.

The initial default theme to edit in the Theme Editor is the style.css. Do you see the suffix for that file? While the others are .php, this one is .css - this is the current theme’s CSS. And this, ladies and gentleman (or is it men - are there more than one of you?), is where we’ll be today.

Now, if you prefer to download your style.css using Filezilla or another FTP program (and I highly recommend you learn how to do this so you can easily maintain a backup of all your work on your hard drive), you will follow a path similar to mine to get there on your server.

/public_html/wp-content/themes/mrtechie/style.css
(with /public_html/ being the same as /www/ or your root directory)

As a special precaution, whether you work within the WordPress Theme Editor or download the style.css and work within a text editor, make an original copy of your work and SAVE IT SOMEWHERE on your hard drive. This gives you a sort of safety net when perhaps you make several changes that don’t jive well together and you want to put it all back as it was and start over. I do it every time. You’ll want to do it too, I promise. Just SAVE AN ORIGINAL to save yourself some heartache.

Moving on.

First things first. You see this:

/*
Theme Name: Mr. Techie
Theme URI: http://www.freewpthemes.net/preview/mrtechie
Description: A three-column theme with the third column allocated for ads. Features Web 2.0 design ideal for 1024x768 resolutions. Widget-ready for WP2.2+
Version: 2.0
Author: Free WordPress Themes
Author URI: http://www.freewpthemes.net/
*/

Be nice and leave it there. Even if you are modifying the theme - you didn’t create it; this person did. Even if you rename the theme, give kudos as to where it came from and leave all this up. If you make major modifications to it, add your own information at the top alongside the originator of your theme. Basically, this is where we all show our true character. Y’know, doing the right thing even if no one is looking and no one will know? Yea, that.

Who knows? One day you may design your own theme for the WordPress Theme Directory.

So, we’re looking at my style.css (stylesheet) below for the theme I selected, Mr. Techie, showing at the test site I’m slowly building week by week over at WordPress Wednesdays.

Your stylesheet, unless you chose the same as me, will not look exactly like mine, but the fundamentals are the same. For instance, you will most probably have CSS assigned to the “body” of your blog, like below.

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #7F7772;
}

Stylesheets really do make sense when you look at them item by item. In the CSS above, I see that the body of my blog will have a background color of #FFFFFF, which is white. If you are not familiar with the color references, you can visit Visibone’s Color Lab.

The body of the blog also has assigned the font size of 13px and assigned the font, “Trebuchet MS”, Arial, Helvetica, sans-serif to display in the font color, #7F7772.

The string of font styles listed tells browsers viewing the site to try and view in “Trebuchet MS” first, but if that isn’t available, try “Arial”, and then, “Helvetica” or any sans-serif font.

Skipping down further you can see this bit of CSS:

input, textarea {
	padding: 5px;
	border: 1px solid #626262;
	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

This tells me that any place assigned as input or a textarea (like the search box and comment box) will have a 1px solid border around it of the color, #626262. In other words, it is creating a text box with a padding of 5px (so the text doesn’t jut-up directly against the edge of the textbox), and again, the font is assigned.

You’ll notice that the font size that was assigned was 1em. There is a lot of discussion across the internet whether it is wiser to use em or px for your font sizes, etc… and I’ve yet to settle one way or another. Bottom line, px is an absolute font - it won’t change size dependant on anything else. On the other hand, em is a relative font that will adjust dependant on other settings within the CSS. This theme has already assigned 1em, and for now, I’ll stick with it. You can read about The amazing em unit and other best practices to understand how the different font size methods function, and why you might want to familiarize yourself with it for your future coding needs.

Now we’re heading into the styles set for the header and subheaders.

h1, h1 a, h2, h2 a, h3, h3 a {
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	color: #6AA2FD;
}

First thing you should notice is that there are a string of different styles being set here and they are all separated by commas. This is saying that the h1, h2, and h3 headers and subheaders are all going to follow the same margin, text-decoration, font-weight and color style. Note that font size isn’t delineated here. This is just assigning their color when not linked, or in the case of h1 a, h2 a, and h3 a, their color when they serve as links within the WordPress html.

If you do not know already, a stands for text-link. So, if it states h1 a, it is assigning a particular style to the h1 header link.

Further along, it gives more specifics for each one of the header styles.

h1 {
	letter-spacing: -3px;
	font-size: 2.6em;
}

h2 {
	letter-spacing: -2px;
	font-size: 2em;
}

h3 {
	margin-bottom: 2em;
	font-size: 1em;
	font-weight: bold;
}

The h1 header has assigned a letter spacing of -3px. What does that mean exactly? It means that whoever wrote this theme wanted the white space between each of the characters in the h1 and h2 tags to lessen by -3px and -2px. Letter-spacing can increase or decrease the white space between characters according to what is keyed into the stylesheet, changing the overall look of how the font would normally display within the header tags.

In html, your main header should always be h1, with your subheaders being h2, h3, h4 and so on. In WordPress, whenever there is a text header at the very top (like, the name of the blog at WordPress Wednesdays), it is most always using the CSS from h1. And the individual blog titles almost always use the CSS from h2.

The reason the h1, h2, and h3 tags are separated out above is because this theme needs them to look differently. Each of the headers/subheaders are used for different purposes and require a different look, letter-spacing, font-size, font-weight, or even a bottom margin. You can manipulate any of those things and watch how it plays out across your blog.

REMEMBER, before making changes, SAVE the original!

Are you starting to see how you can manipulate some of your blog’s basic cosmetics through the CSS?

Below, the theme is assigning a style to the blockquote function. Look at the margins. See how it shows “0 0 0 1.5em”? Think of a clock with one of its hands straight up at 12. The first “0″ in this style attribute indicates the top margin, the second “0″ is the right margin (going around the clock, clockwise), the third “0″ is the bottom margin and the final “1.5em” is the left margin. So it is saying that there are to be no margins, EXCEPT for on the left, and it is to be “1.5em.”

It is also assigning padding on the left of “1em”.

blockquote {
	margin: 0 0 0 1.5em;
	padding-left: 1em;
	border-left: 5px solid #DDDDDD;
}

What is the difference between margin and padding? Well, both of them are about the white space around your text or your image, but they each handle that white space differently, relative to the text or image. Because I find no need to reinvent the wheel, check out the images and descriptions for margin -v- padding CSS properties for a better understanding.

In addition, you can see that any blockquote I have at WordPress Wednesdays will have a 5px solid border of the color #DDDDDD on the left.

Here is an example of my blockquote style of 1px solid border here on my personal blog.

Like my neat and tidy border? I don’t particularly. It is rather boring. Perhaps we’ll fix it up another time. Yes, perhaps. And perhaps we’ll have tea? Yes, perhaps. And perhaps I’ll stop talking like someone from England and get on with it.

Again, we’re moving on.

Finally, let’s look at the link color (a) and the link hover color (a:hover). Notice that there is a request for “text-decoratioin: none:” on the a:hover? That tells the browser not to display an underline beneath the link whenever someone mouses over the text-link. All text-links will default to displaying an underline beneath the text unless it is specified otherwise.

a {
	color: #6AA2FD;
}

a:hover {
	text-decoration: none;
	color: #FF7400;
}

img {
	border: none;
}

And we can even ADD a visited link color (a:visited) if we desired. We’ve also designated that we do not want borders on any images.

So there you have some of the basics.
Go.
Play.
Color your blog.

Next week we’ll hit on more of the CSS - like your headers and sidebars and footers, OH MY!

20 Responses to “WordPress Wednesdays: CSS is NOT a series on TV.”

1. Mrs. Wilson

   One day I will get wordpress so that I can tag along on the journey! I love customizing layouts - becuase yes - I don’t want the same one as 100 billion other people!

2. WordPress Wednesdays » Blog Archive » Get intimate with your CSS

   [...] week we covered the basics of your WordPress CSS Next week, we’ll move on to the headers, sidebars and [...]

3. BOSSY

   You rock Bossy’s world! In fact now she’s a little seasick.

4. bethany actually

   Ooh, this is exactly the WPW I have been waiting for! Stylesheets are juuuust different enough from old-school html to throw me off. This will be extremely helpful to me. Thank you!!!

5. Capturing Today

   I think it is so fabulous that you are willing to share so much of your knowledge with us! I can’t wait to get a WordPress blog so I can learn along with everyone else!!!

6. Just Beachy

   Just dropping by to say thank you…. Love CSS. Love it.

7. Lisa Clarke

   I just wanted to say I am enjoying your WPW posts. I’ve already taught myself most of these things in an effort to customize my own blog (I wanted it to blend in seamlessly with the rest of my site), but I’m still picking up some tips from you. Like the 0 0 0 0 relating to positions on a clock - brilliant! Knowing that sure beats having to google the syntax every time I want to use it…

8. Sue at nobaddays

   Heather, you are so good at this … the technical stuff and the communicating it stuff. Kudos! And thanks.

   I am working on a new blog — a niche social networking thingamy, which I will unveil fairly soon (I hope). Using a third-party theme called Pomodoro, which I am customizing a fair bit, so today’s lesson was especially helpful.

   Aside from that, looking at the grey text color at wordpresswednesdays.com made me realize that my dark brown text color was too close to my link color and that I needed to switch to a dark grey text to contrast with the brownish-reddish link color. Looks much better. A totally unexpected side benefit of reading your lesson today ;-)

9. whimsy

   SQUEEZEE!!!!

   That’s the big ole hug I’m sending you. I needed this lesson in the worst way.

   My method of changing the colors to a bright blue one at a time to see what each thing did, is SO not the best way to learn this stuff.

10. Moira

    Oh, thank you x infinity! I bought books, I upped my Typepad account, I tried until blood came out my ears…but I still couldn’t wrap my head around CSS. I’m going to print your tutorial, read it a hundred times over, and give it another shot. You’re the best!

11. OMSH

    I’m thrilled that this is making sense. These posts do take time because I have to remember to talk about it as if I DO NOT already know it.

    Oh how I remember the frustration of trying to learn from tutorials that assumed I knew far more than I did.

    We’re all at some point in our learning. I’ve jumped through this hoop, but dangit if I don’t have a few dozen new hoops just a’waitin’ for me to get my springs on!

12. Serene and Not Herd

    Welcome to WordPress, huzzah!
    You definitely make this stuff accessible. Sadly, I’d already dug into WordPress .css fairly deeply before your tutorials began.
    I understand it, but don’t think I could explain it to others nearly so well.

13. Angella

    I want to learn more about CSS, and this is what I needed. Yeehaw!

    (That was for the cows)

14. Serene and Not Herd

    Ack! Can you help? I’m having a margins problem, text is way too close to my borders.

    Could you take a look, make a suggestion?

    Thanks!

15. Katie

    ok, first of all, let me say i am a new reader to your blog (about a month now) and i love it, and i think we would be great friends in real life. :) second, i have a question about WP - right now i blog on wordpress.com but would love to transition to a .org account hosted somewhere. i have tried to do so using these posts and also using the instructions on WP but can’t even seem to figure out how to begin - other than buying the domain name and the web hosting service. after that, i’m stumped. i’m on a Mac - are your instructions for PCs? It seems that cPanel doesn’t work for Macs, is that true? Not sure what to do….. any tips? THANKS A MILLION! and thanks for your wonderful, transparent, encouraging, and thought-provoking posts. love ‘em.
    katie

16. OMSH

    Serene and not Herd - I wrote to you, but didn’t hear back - I’m assuming you worked it out?

    Katie - cPanel is online and it works with a Mac or a PC. Yes, my instructions are PC based, but they apply across the line when I’m talking about cPanel or other things of that nature.

    Tell me what you need to do at this point forward and I can help you.

17. Serene and Not Herd

    My yahoo spam filter ate your message, so I included my other email address on this message. Thanks!

18. WordPress Wednesdays: Center and Border your Images using CSS

    [...] do this using CSS. Now, I talked briefly about a few things you can do with your WordPress stylesheet (style.css) last Wednesday. This will be brief as well, but brief is good when the end is so [...]

19. Wednesday’s What’s Worse V | Freaked-Out Fathers

    [...] Some blogs use Wednesday for serious profound and even helpful purposes, like Tully’s Wordless Wednesday (Definitely worth a look) or Wordpress Wednesdays. [...]

20. Oh My Stinkin Heck » Blog Archive » WordPress Wednesdays: Wrap Text Around Images Using CSS

    [...] that whether or not you choose to edit your stylesheet (style.css) and/or other web files via the WordPress Dashboard or edit using a text editor and then upload to your server via a FTP program, just be consistent. [...]