WordPress Tips and Tricks for Style Sheets

Tips Apply to the Full Version of WordPress.

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 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.

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

When 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:

• Information on hiding CSS from different browsers
• CSS filters – What filters work with which browsers
• Hiding CSS from browsers
• W3 Development – Summary Chart of How to Hide Different Things from Browsers
• You’ve Got to Hide Your Styles Away
• Hiding With Star HTML Bugs

Changing Default or Kubrick Theme

The 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.

• The Secret of Successful Editing of WordPress Themes
• Designing a WordPress Theme – Building a Sandbox
• WordPress Tips and Tricks for Template Files
• Attention WordPress Theme Designers: Designing Themes for WordPressMU
• What I Needed to Learn About WordPress
• Choosing a WordPress Theme
• WordPress Design Details

---

technorati tags: blog administration, wordpress, wordpress tips, wordpress themes, wordpress templates, stylesheet, wordpress styles, css, wordpress help
site search tags: blog administration, wordpress, wordpress tips, wordpress themes, wordpress templates, stylesheet, wordpress styles, website design, website administration, web page design, css, wordpress help
© Reprinted with Permission