Skip navigation

WordPress Tips and Tricks for Style Sheets

If you are designing or customizing your own WordPress Theme, here are few tips and tricks to help you. Also check out the article on Designing a WordPress Theme – Building a Sandbox. If you are designing a Theme for others to use, see Designing WordPress Themes for Public Release and Attention WordPress Theme Designers: Designing Themes for WordPressMU.

I’m desperate. I’ve been trying to do this for hours? How do I move this little section up just a bit to line up with that little section there? Help me!!!!!

Finding Your CSS Styles

Designing any website, as well as WordPress Themes, the smallest detail in the layout and design can send even the most expert web page designer into fits. Since you probably aren’t a top-notch CSS and HTML expert, how about I show you the tricks they use for finding their CSS styles and tweaking those little bits and pieces into shape.

A web page is generated using a combination of HTML tags which basically hold the structural frame work of the web page, and a style sheet which provides instructions to those tags on how to look and where to put themselves. Going through a style sheet to find the solution to your problem isn’t as easy as it looks. But tracking down the style sheet reference inside of the web page and HTML tags is actually easier than you think. It’s a matter of tracking down the culprit by narrowing the suspects.

View Source of Web Page CodeView the trouble causing page in your browser. Look closely where the trouble maker is and note any text near the problem area. From the browser menu, choose View > Page Source. This will bring up a new window with the code behind your web page. Now, using your “find” (CTRL+F), search for the key text you spotted nearest your problem.

Look closely at the code around the text. You should see a HTML and/or class or ID reference for the CSS. It might look something like this:

<div id="sidebar">

This is an HTML container which has been given the ID of sidebar. If you look in your style sheet, you will find a reference to #sidebar which contains all the layout and presentation codes that designs your sidebar. If the sidebar is the problem area, begin to make small modifications here to fix your problem.

If you are still having troubles tracking down the troublesome area, then put borders around each container near the troublesome area. For example, if it is the sidebar, and the content and header touch it, let’s find out in which of these the problem lies by adding a border in the style sheet to each section.

#sidebar { border:1px red solid; ....}
#content { border:1px blue solid; ...}
#header { border:1px green solid; ....}

This may narrow down your focus, but if it doesn’t, then continue down the various subcontainers within the section. For example, the sidebar is packed with nested lists. So give the lists some borders.

#sidebar ul { border:1px yellow solid; ...}
#sidebar li { border: 1px black solid; ...}
#sidebar ul ul { border:1px pink solid; ...}

And so on. This will help you to isolate the area that needs the work. When you are done, remove the borders.

Get Firefox!One of the best tools recently developed for web page designers is found in the Firefox Internet Browser. Called the Firefox Web Developer Extension, it allows amazing WYSIWYG on the screen live editing of the style sheets of any web page. And a whole lot more. You can learn more about how to use this to style your WordPress Themes and find your problem CSS troublemakers in the article here on The Secret of Successful Editing of WordPress Themes.

You can learn more about troubleshooting your style sheets on the WordPress Codex at Finding Your WordPress CSS Styles. Above all, have patience, take your time, and pick it apart slowly. You’ll find the answer.

Testing Test for Testing Posts

example of the latin filler of loren ipsumWhen you are starting out, it helps to be able to create some test posts. You can slam away at the keyboard, hitting the spacebar once in a while, or you can take advantage of the long held tradition of the Lorem Ipsum.

Lipsum’s Lorem Ipsum website automatically helps you generate and copy the text you need to fill up the empty space.

Image Tags

In FireFox, if an image doesn’t appear, the alt description appears. To change the size of the font for this text description, which distinguishes it from the rest of your content, use the following in your style sheet, changed to your own preferences:

img {border:0; font-size:60%;}

You can expand upon this and make it bold, green, small caps, or whatever, but this is how you make the change.

The key is to make sure your images do show up on your posts, but just in case, at least the text that appears in place of the images will look pretty.

Hiding CSS From Browsers

While it is slowly being “bad mannered” to have your style sheet feature hacks to accomodate the various problems different browsers have with the features you want to use, there are times when it is necessary. While there are plenty of web pages with information on how to add CSS hacks to accommodate browser’s needs, there isn’t much information on HIDING CSS from browsers. Here are a few:

Changing Default or Kubrick Theme

Example of the WordPress Default Theme sidebar arrowsThe Default WordPress Theme, aka Kubrick, is an amazing piece of web page design. It pushed the envelope on what a web page could do using WordPress. I’m not here to debate whether or not the way Kubrick was developed right or wrong, but I do have tips for dealing with some of its eccentricities that causes endless questions on the WordPress Forum.

Working on the WordPress Forum as a volunteer, I look at a LOT of websites. I can spot a WordPress Theme based on Kubrick in a hot second. The dead give-away? The sidebar.

The sidebar features the use of » in the sidebar bullets. I personally don’t like them. The technique to put them there is also a hack, since you can’t use character entity codes to represent images in lists.

To replace them with graphic bullets or to use the default CSS bullets like circle, disc, or square, either delete the section for the bullets in the style sheet, or comment it out. An example of the Default WordPress Theme style sheet for the bullets is shown below, including an example of how to comment out the section:

/* Comment out starts - 
.entry ul li:before, #sidebar ul ul li:before { content: "0BB 020"; }
Comment out ends */

Now, set up your .entry ul and .entry li and so on with your own styles and bullets.

.entry ul {margin-left: 0px; padding: 0 0 0 30px; 
     list-style-position:outside; list-style:url(ball.gif) disc; }
.entry li { margin: 7px 0 8px 10px; }

And adjust the graphic, margins, and padding to your particular Theme’s needs.

Relatives Suck

That’s right. In FireFox, position: relative sucks. I had to remove every reference of position:relative from my CSS because Firefox breaks on any container with that reference that has a link. The link turns off and is inactive. It also is influenced by any nearby float that has a position:relative in it that aligns with a non-relative container. The area where the two align, the links in the non-relative container will turn off. Argh.

More Tips and Tricks for WordPress Themes

We’ve got a huge collection here of a variety of WordPress Tips for you to explore. Here are a few highlights that will help you design and develop your WordPress Themes and style sheets.


11 Comments

  1. Posted December 10, 2006 at 10:16 pm | Permalink

    Excellent tip on the Firefox extension. Many thanks!

  2. Ray
    Posted October 4, 2007 at 6:44 pm | Permalink

    this page just helped me to get my problem with the list-style solved, thanks!

  3. Posted October 31, 2007 at 5:52 pm | Permalink

    Hi iv been trying to increase the site of the text boxes on my sites but i aint been able to figger out how to. ne suggestions?

  4. Posted November 2, 2007 at 10:24 pm | Permalink

    @HQ:

    In the stylesheet, change the width and height and add some padding. There are dozens of ways of doing this, and I don’t know enough about how you have your site coded or set up, so it’s hard to advise you.

  5. Posted August 6, 2008 at 4:10 pm | Permalink

    Could you tell me how to change the font of my site with CSS?Im putting a new Theme,but all I need to do is change the Font to White,I still haven`t put on the new Theme,My Friend said I need a COMPLETE Style Sheet

  6. Posted August 6, 2008 at 9:00 pm | Permalink

    @ darkever64:

    I don’t know about your friend’s expertise, but the WordPress.com and WordPress.org Support Forums can help you with Theme design advice, too. Be sure and check them out.

    To change your font color, I recommend you read Finding Your CSS Styles in the WordPress Codex, the online manual for WordPress users, first. You have to identify which font in which section you want to change. Once you have that information, you search through your style.css file – in this case, the one with the Sandbox Theme you’ve chosen on your WordPress.com blog – to find that specific font reference. Then change the color there from whatever it is to #ffffff which is the code for white. Save it, and reload the tab with your blog’s design in it to see if the change is how you like it. If not, keep trying.

    Good luck.

  7. Posted September 10, 2008 at 12:30 pm | Permalink

    Thanks for share, Excellent tips. Now I’ll edit my css myself :)

  8. Posted September 23, 2008 at 2:59 pm | Permalink

    great tips,

    does anyone know of a plugin or form of coding that fills empty sidebar space with ads until it hits the bottom of the sidebar.

    many of my site’s postings have different length to them so some times the sidebar(right-hand sidebar) and posts will have a big gap.

    i have many ad links and/or image ads that i would like to use to fill in the gaps in my sidebar until it hits the bottom of the page (the end of the last post)

    im not sure if i am describing correctly, but if anyone knows of a way to do this that would be great

  9. Posted September 23, 2008 at 3:16 pm | Permalink

    @ clhmedia:

    There are a variety of WordPress Plugins for monetization of your WordPress blog in Monetizing WordPress Plugins. The issue of controlling the sidebar length with ads – allowing them to come and go depending upon length, is something I’ve never heard of. But then, there are so many CSS design options, there must be a solution somewhere. It just might not be a WordPress-specific solution.

  10. Posted December 7, 2008 at 2:56 pm | Permalink

    You can add ad units to your sidebar id recomend ad towers i.e. width 120 or 160 just log in as admin select design->theme editor->sidebar.php and add your ad codes imediately before the last . To add a second unit below the first ad after your 1st code then ad the second code right after. U can add unlimited ad units separated by ensuring the last unit code is before the tag.


16 Trackbacks/Pingbacks

  1. [...] Lorelle on WordPress » WordPress Tips and Tricks for Style Sheets [...]

  2. [...] WordPress Tips and Tricks for Style Sheets [...]

  3. [...] Lorrelle on WordPress is a wonderful blog containing indispensible WordPress tricks, tips, and traps.  Check out her page on WordPress tips and tricks for style sheets.  Not only does Lorelle describe the ins and outs of the CSS styles, but also show you how to test your WordPress theme, what HTML tags to use and avoid, and many links to other WordPress resources.  A must read! [...]

  4. [...] WordPress Tips and Tricks for Style Sheets [...]

  5. […] WordPress Tips and Tricks for Style Sheets […]

  6. […] WordPress Tips and Tricks for Style Sheets […]

  7. […] WordPress Tips and Tricks for Style Sheets […]

  8. […] WordPress Tips and Tricks for Style Sheets […]

  9. […] WordPress Tips and Tricks for Style Sheets […]

  10. […] WordPress Tips and Tricks for Style Sheets […]

  11. […] WordPress Tips and Tricks for Style Sheets […]

  12. […] WordPress Tips and Tricks for Style Sheets […]

  13. […] WordPress Tips and Tricks for Style Sheets […]

  14. […] WordPress Tips and Tricks for Style Sheets […]

  15. […] WordPress Tips and Tricks for Style Sheets […]

  16. […] WordPress Tips and Tricks for Style Sheets […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,973 other followers

%d bloggers like this: