How to Edit a WordPress Theme – Part 2: Stylesheet

AD

If you carefully read the first part of our WordPress Editing guide, you should have a very good idea about the basics of WP themes editing. We already know where can we edit our themes and which files corelate with a particular part of our website.

The task ahead of us today is to become familiar with the Stylesheet (style.css), which is responsible for the looks of fonts, headlines, various margins and paddings or images formatting.

This article is a follow-up to the How to Edit a WordPress Theme – Part 1: The Basics

The area of our concern is located in Appearance / Editor / style.css

First of all, what exactly will we try to accomplish?

  • delete elements or pictures we don’t like
  • modify headings in terms of size, margins etc.
  • pick up an alternate color for various elements
  • play with (un)ordered lists on our website

Our goal is to change some of the basic looks and rules of the installed theme in order to assure a 100% desired performance.

The best way to approach this would be to have an extra WordPress site of your own which is still brand new and empty. You can then have a playground to test your new skills and no harm would be done should it go badly or even crash.

If you can’t get yourself a testing site, no worries, there will be enough screens and examples to cover it anyway.

A theme named JogFest has been chosen to demonstrate everything we will be talking about, because it has a lot of features and it’s somehow complex. You can download it here (obviously free of charge).

Foreign and Text Elements

The thing is that after installing a theme, you may recognize that you don’t like a particular element and you need to get rid of it, be it a picture, a piece of a text box or anything else.

Say you are setting up a site for a local business and although there is a nice graphic visualization inviting users to subscribe to the RSS feed, you know very well that most of the visitors won’t have even the slightest idea what RSS is and therefore you need to remove it.

Let’s have a demonstration, our attempt will be to remove the background image:

Original background wordpress theme

Be advised that there is no common way how to perform the desired changes, you will always need to think it through a bit. This particular example requires to look for the background image in the style.css in order to find out:

  • whether it’s even editable in style.css
  • if so, will then be deleting possible?
  • and again, if yes, won’t it create an obvious blind spot in the website design?

Let’s see how it turns out here:

Editing background in wordpress

There are more occurrences of the word background, but if you did this on your own, either by your new sense for CSS or by trial and error you would figure out we want to work with this one.

edited background wordpress code

As you can see, we have deleted the code concerning the image location and it’s attributes. The precise deleted chunk looks like this:

  • url(img/backs.jpg) no-repeat center 0

back final wordpers theme

Voila, we have successfully removed the background image.

Headings

Your headlines are extremely important and you need to pay them a special amount of attention to ensure their maximum quality. We already know from The Basics that there are usually six types of headlines, H1 to H6 with a simple rule:

  • the lesser the value, the lower the significance

It is handy to be able to change and modify all headlines, regardless of their significance. Let’s say we want to tweak H2 in a following manner:

  • make it slightly bigger
  • enlarge the bottom margin
  • change the color

Right now, our model H2 looks like this:

h2 original screenshot wrodpress

First of all, we need to find the location of H2. The easiest way to do that is through a simple browser search (ctrl+f) and typing H2, frankly because most of the themes are made up in a different way and it would take took too long to find it manually.

Found it?

We wanted to start by making the H2 larger. There are two ways how to do that, each implementing a different measuring unit:

  • h2 {font-size: 2.2em;}
    h2 {font-size: 35.2px;}

Pixels were explained in The Basics, but what’s the “em”? Although it usually stands for italic, it is also a unit of measurement in typography. By definition:

1em = 16px

You can find more information here and here.

As we can see, it doesn’t matter which type of unit we choose, because both 2.2em and 35.2 pixels will do exactly the same thing.

Our second task is to alter the margin, the code after this change may look like this:

  • h2 {font-size: 2.2em; margin-bottom: 0.625em}
    h2 {font-size: 35.2px; margin-bottom: 10px}

And finally, we want to pick a different color. A kind reminder of Colorzilla is in order, because without it, you would need to manually look up the code for each color.

Say we want to change it from black to dark red. With Colorzilla, it is a simple matter of 5 seconds:

colorzilla

We will utilize the color #C72222 for our purposes, the only thing remaining is to incorporate it in the code:

  • h2 {font-size: 2.2em; margin-bottom: 0.625em; color: #C72222}
    h2 {font-size: 35.2px; margin-bottom: 10px; color: #C72222}

Now, before you act rashly and hit update, make sure you know exactly where you made the changes, so that you can come back and fix it should something go wrong.

With that being said, press Update File and after it’s done, we have hopefully successfully changed our H2:

h2 updated wordpress theme

You are not limited to sizes, margins or colors, you can also edit:

  • alignment
  • boldness – by issuing the command font-weight: bold
  • float – you can make the text flow around the headline, e.g. float: left

Colors Modification

We’ve already determined how to change a color. You are obviously not limited just to headings; you can also modify:

  • background of images or lists
  • links
  • main layout (menu, sidebar,…)

As we already know, every color has its own hexadecimal code with 6 digits and/or letters. The good news is that there is a simplification for those colors which have all 6 symbols alike, such as #FFFFFF (white) or #000000 (black).

These colors can be implemented in the code by only 3 symbols instead of 6, so we can use #FFF and it will still work perfectly fine (and it will be still white). This is called minified CSS.

(Un)ordered Lists

Lists are too important to be excluded from our interest. They make the article body much more friendly to the eyes of readers, not to mention their great value lying in summing up the basic ideas, thus making the whole article much easier to comprehend.

Both lists can be found in the code by the following abbreviations:

  • ul stands for unordered list
  • ol stands for ordered list

The most important things we can modify when it comes to lists are:

  • padding
  • margin
  • color
  • bullet symbol (list style)
  • font-weight

Since some of the elements have already been thoroughly discussed, let’s take a look at the new ones, starting with:

Padding

We already know that “margin” deals with any off-set you may need outside an object. What we have yet to learn is that padding does the same thing, except for it works inside an object. It would be probably best to illustrate it with a picture:

pic

List Style

Who would be satisfied with the old boring filled dots or regular numbers? You don’t need to rely on those basic instruments, not by a long shot. In fact, there are over a dozen types of lists available in CSS, see the table below for a further reference:

lists

What Have We Learned Here?

You should now:

  • have a firm grasp of the style.css file
  • be able to modify any graphic element in terms of color, size etc.
  • understand the terms padding, margin, em, float etc.

The third part will be focused on other individual files and their functions, followed by the 4th one explaining more advanced tips and techniques. Consequently, we’re at the half of our journey and you should already know more than an average WP user. Congratulations!

Thank you for reading!

Advertisement

Related Stuff!

Published on: January 18, 2011,

This post is in: Articles, Tutorials

Author

Vogin

24y old visionary Czech.
All Articles by

Leave a Response