The Redie 3.0 Wordpress Theme is all-around pretty well-designed and usable. I was recently working with someone on this theme when the completely unexpected happened. (but don’t worry, there’s a fix)
What’s Wrong With Redie 3.0 Italics
In Wordpress (and most other xhtml sites) italicizing is done via <em> tags. So my client simply selected the italics option in Wordpress’s editor, which added <em> tags to the code. The resulting text looked like this:
What, you say, that’s not italic! Exactly. Not only is it not italic, but the line is actually broken. I typed that all as one line. It should have displayed:
This part of the post isn’t italicized, but wait this part is. Oh, now we’re not italicized again.
The italics in Redie 3.0 are broken. Sort-of.
Where the Problem Lies
Technically, they’re behaving just like the designer told them to. What I expect happened is that the designer decided to come up with a means of emphasizing text that was different. He or she asked “besides blockquotes, what are other good ways of setting text apart? why not change the <em> tags to really emphasize words?” There’s nothing wrong with that.
But your average user (myself included) doesn’t expect simply calling italics to cause a line break. If the italics were gray and “normal” (instead of italic) then this might not even cause much of a problem. It would emphasize the text acceptably though it might frustrate users a bit. It wouldn’t embarrass them.
You see, the average person italicizes only a word or two in their sentences. I got a little carried away on italics in this post. Imagine if each was on its own line and looked kinda funky (as in the picture above. That would probably annoy you or make you ask “what was she thinking?” And your average person doesn’t check how the italics are set. Even I don’t, and I do check a lot of things about themes.
So I believe that this option, while not necessarily a bad option, should have used a different call code…perhaps the <quote> tag (not blockquote, just quote…which is a legitimate in-line tag but less likely to cause confusion). Perhaps the designer could have created a new class which could be applied as with <span> or <p> tags.
How to Fix the Redie 3.0 Italics
So how to do you fix it? Don’t panic, it’s very simple. First, go to the Design -> Theme Editor part of your blog administration area. If you have this theme active, the stylesheet should show up immediately. If not, click on it (should be at the bottom of the list of files on the left):
Now scroll in the file until you get to this section:
em {
padding: 0px;
font-size: 11px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
clear: both;
display: block;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Just remove all the code I included in the quote section. Everything from “em” to the closing “margin-left: 0px; }” and then click “Update File.” If you’re running a caching plugin, refresh/clear the cache for the changes to apply right away (or wait until they do).
That’s all you need to do. You don’t need to define anything in its place. Browsers understand <em> by default and will italicize it as long as the stylesheet isn’t telling them to do something else. Your italics will now be…italics. Which is what most people want when they use <em> or select the “italics” option in their WYSIWYG (Wordpress calls it “Visual”) text editor.
How to Style Your Italics
If do want to style your italics, leave the em section but insert different code between the { } . Don’t leave what it’s currently got unless you want your italics broken onto different lines.
If you have a different theme, you can always create your own em section in the code. You can make the italics gray, “normal,” a different font…whatever you want. And as long as you’re the one who designed them, they shouldn’t confuse you.
If you've found this article useful, why not get new posts in your RSS reader or in your e-mail? Your e-mail will only be used for new posts and you can unsubscribe at any time.
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.
Leave a Comment