BlogCrafted » Wordpress Themes

DIY Themes Server Certificate Expired

BlogCrafted Staff — Tue, 26 Jan 2010 00:04:51 +0000

In the last week, a rash of expired certificates has struck the Thesis-using/Thesis-promoting community. Find out why, how to fix it, and how to continue promoting Thesis without these error messages.

I noticed the first one 5 days ago. As I was visiting a friend’s site, this error message jumped out at me:

Because it’s not the best screen grab, I transcribed it. It reads:

diythemes.com:443 uses an invalid security certificate

The certificate expired on 1/15/2010 3:55 PM.

(Error code: sec_error_expired_certificate)

This could be a problem with the server’s configuration or it could be someone trying to impersonate the server.

If you you have connected to this server successfully in the past the error may be temporary and you can try again later.

I was surprised, but I recognized DIY Themes as being the Thesis theme site he was running and knew it was safe to keep browsing his site. Further investigation and discussions brought to light the fact that he was running the DIY Themes Thesis affiliate program.

Brian Clark had recently announced on Copyblogger that the Thesis affiliate program was moving to ShareASale. DIY Themes promised that the old links would still work for another 60 days, after which you had to be on the new affiliate program. Yet somehow, the people running DIY Themes had let their security certificate expire and it was throwing errors on every site using DIY Themes affiliate code!

How to Fix the DIY Themes Expired Certificate Error

Step 1. Take down all Thesis ads on your site. Text links (unless you’re using redirects you’ve created), banner ads, everything. Check individual posts too.

Why take it all down first? Because this error is the kind of thing that scares away readers. And it’s not good advertising for the product when your readers are getting warnings about it.

Step 2. Go to ShareASale and sign up. Then sign up for the Thesis affiliate program.

Step 3. Replace the banners and links using the code from ShareASale. If you’re feeling nervous, consider uploading all banner ads to your site and linking to them on your site. You can use a plugin like GoCodes to create a simple redirect for links. Of course, the ShareASale code isn’t throwing errors, but these tools give you more control over the ads on your site.

I’m very surprised that as of the time I’m writing this, January 25th, the certificate has been expired for 10 days and has been throwing these errors for at least 5 (when I first noticed) and the DIY Themes crew hasn’t renewed it yet. I hope it’ll be fixed soon, but since the program is ending you might as well sign up with the new place.

Edited to add: Brian Clark noted below that the problem had been addressed over the weekend. I still saw it on at least one site this morning, but perhaps the change is taking effect. If you’re seeing it on your site still, consider contacting DIY themes…or just follow the instructions, since you’ll need to do that anyway.

Getting DIY Themes to Refund You for Thesis

BlogCrafted Staff — Wed, 20 Jan 2010 10:00:11 +0000

There’s no question that the Thesis theme for Wordpress is very powerful. It’s got a lot of good code and a number of customization options which help you make it more your own. But it’s got flaws as well and it’s not the best match for a lot of people. One thing that comes to mind is the inability to easily insert a header image, at least not without adding a plugin.

I don’t believe Thesis should be marketed as great for beginners with no coding experience unless those beginners are either willing to hire a blog consultant or to deal with a fairly generic-looking theme.

So what do you do if you bought Thesis, gave it your best shot, and need a refund? DIY Themes promises a refund within 30 days if you’re not satisfied with your purchase of Thesis.

Instructions for Requesting a Refund from DIY Themes

To request a refund, send an email to diythemes@baagagmail.com, with the subject “Refund Request”. Please include the following information with your request:

Your name
The email address associated with your PayPal account
The date of purchase
Your DIYthemes member name

If You Still Want to Give Thesis a Shot

One of the best things created by the Thesis user community is Rick Beckman’s Thesis Open Hooks plugin. It gave you back-end CSS/PHP editing abilities before Thesis finally integrated them and, most importantly, it has blocks where you can input code for various Thesis hooks instead of setting them up with PHP.

If you’re not quite ready to give up on Thesis, try checking it out (also available from the Wordpress Codex for installation from within your site’s back-end).

There’s a lot of great stuff you can do with Thesis. But if it’s not the theme for you, don’t be shy in asking for a refund.

Obviously, from my lukewarm review of Thesis for beginners (unless they want to pay more for customization, in which case get in touch ), I’m not a representative of DIY Themes. The refund information comes from the DIY Themes forum, but is not easy to find. Maybe it’s not well-publicized because there’s no affiliate program for refunds. My thought is if you’re going to pay that much, it should be something you’re using and if you can’t use, return.

Tutorial: Adding Gravatars to Cutline Themes

BlogCrafted Staff — Mon, 13 Apr 2009 11:00:11 +0000

Note, I have since transitioned to Thesis, but the tutorial still works great for Cutline.

Despite the growing internet presence of Chris Pearson’s Thesis, his older themes still remain popular, including the Cutline theme which I’ve modified for this blog.

I recently decided to add gravatars to my theme, so I launched a search for anyone’s tips on best positioning of the gravatar code within Cutline. Since I didn’t find anything, I did it on my own–but I thought I’d share with you exactly which code to put where to get gravatars on Cutline positioned like mine. As a bonus, a small section at the bottom shows you how to create a add a custom default gravatar for your site. You’ll see that commenters without gravatars get a ghosted black-and-white BC avatar.

Inserting Gravatar Code into Cutline Comments

1. Inserting the code into comments.php.

a) Navigate to Theme Editor and open comments.php.

b) Scroll down to

c) Insert

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

directly before

d) The result should look like: &amp;lt;?php if(function_exists(‘get_avatar’)) { echo get_avatar($comment, ‘50′); } ?&amp;gt;

e) Save.

(Note, if you want your gravatars to be bigger or smaller, change the ‘50′ to ‘40′ or ‘60′ or whatever size you want.)

2. Styling the avatars in style.css or custom.css.

a) If you’re playing by the Cutline rules and have made all your changes in the custom.css stylesheet (or haven’t yet made any changes), open custom.css. If you’ve already hacked style.css to shreds anyway, open style.css.

b) If you’re in custom.css, insert the following line:

.custom #comments .avatar { float: left; margin: 0 4px 0 4px; padding: 4px; border: 1px #ccc solid; }

If you’re in style.css, insert the following line:

#comments .avatar { float: left; margin: 0 4px 0 4px; padding: 4px; border: 1px #ccc solid; }

c) Save.

This will style your gravatars with 4 pixels of padding on either side, then a 1px light-gray border, then a left/right margin to set them off. They’ll sit on the top left of your comments and the comment will wrap around them.

3. Turning on Gravatars.

Now your theme is set up for gravatars, but they may not be turned on. Navigate to Settings -> Discussion and enable gravatars, select the highest rating you’ll display, and choose a backup. Save those settings and watch the gravatars show up in your comments section.

Adding a Unique Default Gravatar

Now that your site has gravatars, you’ll find out just how many of your commenters don’t have them. You can select a mystery man, the gravatar logo, a blank space, or some randomly-generated icons to fill the space. Or you can create a special gravatar for your site. For example, I took the BlogCrafted gravatar, turned it black-and-white, and ghosted it. It shows up when people leave comments and aren’t signed up with gravatars, that’s what shows up for them.

Turns out that adding a gravatar that’s unique to your site isn’t hard at all. First you have to come up with a default avatar. In my example, it’s saved as defaultgravatar.jpg. If you use a different filename, be sure to change that in the code.

Upload the gravatar to the images folder of your theme directory (in Cutline, it’s called “images,” if your theme is different, please modify the code below to reflect its image folder name).

Then back in the Theme Editor area, navigate to functions.php (called Theme Functions). Directly under the:

if ( function_exists('register_sidebars') )
    register_sidebars(2);

paste:

add_filter( 'avatar_defaults', 'newgravatar' );  

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/defaultgravatar.jpg';
$avatar_defaults[$myavatar] = &amp;amp;amp;amp;amp;quot;Unique Default Gravatar&amp;amp;amp;amp;amp;quot;;
return $avatar_defaults;
}

The only things you might want to change in this code are:

1) make sure the image location /images/defaultgravatar.jpg is the same as your image’s location. In this case, it’s in the images folder of your theme and called defaultgravatar.jpg. Make changes as appropriate.

2) “Unique Default Gravatar” can be changed to whatever you want to call it.Don’t delete the quotation marks or the semi-colon that comes after.

Otherwise, unless you know PHP, you don’t want to mess with this.

Turn it on. Now go to Settings -> Discussion. The new gravatar should appear in the list of default options. Select it, save, and voila! (if you’re using a caching plugin, you may have to clear it for this to take effect.)

Now there’s only one thing left to do–enjoy your blog’s new gravatars.

A special thanks to the helpful Build Internet article I found on changing default gravatars. Check it if you’d like to know how the code works and see images of what it’ll look like once you’ve done it.

How to Change the Name of Your Wordpress Theme

BlogCrafted Staff — Fri, 12 Sep 2008 14:30:19 +0000

I have come up with a lot of cutline-based themes. This means that the theme area of my test blog could easily end up confusing me–each one with the same screenshot and the same name/desc.

Someone else looking for this kind of information came here from Google the other day, but I don’t think s/he found it. So here’s how to change the name of a Wordpress theme you’re editing.

Changing Your Theme’s Name

Go to its style.css file.

At the top, you’ll see a section that looks like this:

/*

Theme Name:		BlogCrafted

Theme URI:		http://blogcrafted.com

Description:	An adaptable theme based off of Chris Pearson's original Cutline design.

Version:		1.0

Author:			Chris Pearson

Author URI:		http://pearsonified.com/

*/

This is the information you want to change. As you can see, I wasn’t too creative about a theme name, I just wanted to make it different from the others.

To change the name the theme displays under, you—not surprisingly—change Theme Name. Unless you’re making huge changes, it’s considered good form to leave the original author’s name. I did in this case, though if I build further I may just leave a reference to him in the description section.

For bonus points, you can also change the theme folder’s name. This is a bonus if you want it to match the new title. If you plan to use multiple themes based off one original theme, or even have them in your Wordpress theme’s folder, you have to rename all but one.

Changing Your Theme’s Screenshot Image

The second thing that will make your new theme look different in your theme lineup is its screenshot. Even with different names, a whole array of Cutline screenshots was very distracting.

Ideally, you want a screenshot which is either 300 x 225 pixels or 600 x 450 pixels. Or anything with that ratio. You’ll need to save it as screenshot.png and upload it to your theme’s file (not in any image folders it contains, but in the main file).

If you have photoshop, this shouldn’t be a problem. If not, here are some steps to make it using only MS Paint (which comes with all Windows software, as far as I know) and the internet (which you should have access to if you blog). If you have Linux or Mac, hopefully you’re familiar with your computer enough to know your equivalent.

First, take a screenshot of the page by hitting “Print Screen” or “PrtScrn” or whatever your button says.

Second, open Paint and in a new file hit Ctrl + v or click “Edit” -> “Paste.”

When saving, select the option to save it as a png, screenshot.png. Might as well start early.

You can also just create an image in Paint or a similar program using an image or the text tool. If it’s for your personal use, you can do whatever you want (if you’re releasing it, some theme distributors prefer a straight screenshot).

Third, visit Picnik a simple photo-editing site. You need to register for a free account, I had no problems doing so.

Then go into the “Photos” area and upload screenshot.png from your computer.

Once you’re in the editing section, select the cropping tool and crop until it’s about right. If you can’t get it to exactly the proportions listed above, get it as close as you can and then use the resizing tool to get it the rest of the way there.

Save to your computer (make sure it’s saving as a PNG file) and upload to your theme’s folder. Select the option to replace the previous screenshot. Voila!

13 Admin Themes +3 : Improve Your User-Side Wordpress Experience

BlogCrafted Staff — Mon, 08 Sep 2008 14:00:27 +0000

If you’re like me, you’re not very keen on the default Wordpress admin look. Perhaps I’m just jaded from logging into too many other peoples’ blogs to do design work, I like to see something different in mine. (Also, am I the only one who thinks this new theme looks completely washed out?)

Well, there are a number of options out there, “admin themes,” as they’re called. Most come in plugin form and transform your admin area simply by being activated. Unlike blog themes, most admin themes only apply to the CSS of the admin presentation, they don’t change up the html elements. Everything is still there, it’s just moved around.

There aren’t nearly as many admin themes as there are blog themes, but there are a good number. Some are sleek, some are retro and try to imitate the 2.3.x look, some are user defined. I’ve included themes which are pre-2.5 as well, because I know some people are still using 2.3.x and may want to vary the look.

Wordpress 2.5+ Compatible Admin Themes

These themes are compatible with Wordpress 2.5+. They may not be compatible with pre-Wordpress 2.5, since the admin area underwent a complete makeover with the 2.5 release. However, some offer the old version for download on their site as well (depending on whether or not they had a pre-2.5 version).

Themes which have a completely different look from the original or current dashboard:

Leopard Admin is probably my favorite. The use of color does a nice job of drawing your eyes to the center and the graphics are lovely. Plus, I love the Mac-like look and pretending I have a sleek new Mac instead of an aging Windows machine.
Fluency Admin is my second favorite. It’s darker than Leopard, without the pretty graphics, but is still a clean look.
The Tiger Admin theme inspired both of the themes above. It’s also a clean look, Mac-inspired, but much too close to the current theme for my taste. Not enough contrast and darkness.

Themes which model themselves on the older look:

JP Admin Stylish Blue is a response to the washed out and wimpy classic blues of 2.5+ and creates a bold, almost-classic option. I’ve been enjoying the black vs. blue, but it’s a very nice look. Unlike some, which load as soon as you activate the plugin you have to go to the user section and select it in there.
Retro Dashboard makes the admin side look similar to the 2.3 theme, but not quite.

These themes allow the user to choose any of a number of color schemes or even come up with their own!

Easy Admin Color Schemes lets you come up with your own color scheme. You can have it match your blog or anything else you’d like. The layout is still WP 2.5+ framework, but the colors are whatever you want them to be.
Baltic Amber Themes – I couldn’t make any themes I liked out of this one. I tried, but it just didn’t turn out as I hoped. But if you want to make your own color choices or set up a random theme, it’s user-defined (like the Easy Admin, but a little easier to use with less impressive results).
WP Admin Themes has a number of simple color combinations which you can download, upload and activate in your user options section. You can even add your own.

Admin Themes for Pre-2.5 Wordpress

These themes are lovely, but aren’t compatible with Wordpress 2.5 or 2.6.

AFD Wordpress2 Admin Theme has a lovely silver look. A little too light and polished for me, but it appeals to my “clean” aesthetic.
Deconstructed is another theme that’s a little light for my taste. Still, I prefer it to either the 2.3.x theme or the current ones offered.
Deconstructed Remix–another version of Deconstructed, done by someone who enjoyed the first version. Nice look as well.
Planet X7 is a very very dark blue. Above, I commended Leopard and Fluency for using darkness to draw attention to the middle area. Planet X7 is just…dark. I like it, but I’m not sure I’d want to use it. Still, check out the screenshots.
JS Spot the Milk uses different shated of the classic blue and white colors. It also includes drop-down menus. (User comments note that the drop-down menus don’t work as well with sub-menus.)

Plus 3 Bonus Links

The Admin Drop-Down Menu plugin doesn’t really put up a new theme, but it allows you to save a lot of hassle in the current one. You know how if you want to, say, edit your theme, it takes several clicks to get there? This plugin solves that by creating drop-down menus. I’ve seen it at work on blogs I’ve consulted on and was very pleased with the easy navigation.

Wordpress 2.5+ doesn’t reveal post/category/whatnot IDs in the admin section. Well, it takes hovering over the editing link or checking the location bar when you’re editing. IDs can be very useful in coding, so I’ve found this annoying. This plugin restores them to where they should be. I’m not sure if it’s compatible with all the 2.5+ themes, but it’s worth a shot. Scroll down to English.

And if you want your blog to look like the 2.5 “Fresh” (default) Admin theme, you can find that here. I think it looks better on the front than inside.

How to Build a Wordpress Theme Preview Site

BlogCrafted Staff — Wed, 20 Aug 2008 14:30:15 +0000

After putting up my first Wordpress theme (modification), I began poking around the internet for a way to let users interact with it. Screenshots are ok in their place, but if I’m going to even try out a Wordpress theme, I want a chance to test it first. To that end, I have created themes.blogcrafted.com.

Right now the only themes up there are the Silver Light 3 Column theme and the Wordpress default theme. I’ve got a few other theme modifications in the works, but a lot depends on whether I think I should just write up how to make the changes or whether they’re dramatic and complicated enough to merit a rerelease of the theme.

How to Use the Theme Switcher Reloaded Plugin

Setting up your own theme preview site is pretty easy. The plugin I used actually switches themes (some options only allow admins to view another theme or only show previews). You’ll need another link (or to use a menu) to switch back.

It can be used for regular blogs as well as previewers, if it won’t disrupt your site too much. But most of the time, readers don’t care about that option and it may just distract them from the rest of your blog. I think it depends on your readership. On a site that’s explicitly about showing off themes, it’s perfect.

I’m talking about the Theme Switcher Reloaded plugin.

The plugin itself is pretty easy to set up. You can download it, upload it to your plugins, and activate. However, I didn’t find a lot of good instructions on using it. So I’ve come up with some based on my own experience.

Putting Up a List of Available Themes (and the runPHP plugin)

If you’re using PHP code in your sidebar, you can use one of these two PHP calls to bring a list of available themes. As far as I can tell, the lists will include all themes currently in your wp-content/themes/ folder. Therefore, this option is best for a theme-preview-type site where you’ve intentionally chosen the themes in your folder. Use the linking option below for regular sites or when you just want one theme option.

To call a list of themes (which applies

styles), use this code:

If you’d rather save space and have a drop-down menu, use this variation:

I went with the dropdown.

You can’t use the above code in a Wordpress page or post without some help. PHP and posts/pages simply don’t go together. If you want to put either the list or dropdown in a post/page, the runPHP plugin will help. Very quick overview: download, upload, activate. Then go to Settings – > runPHP to set who can use it…select whatever types of users you want to be able to use it. I’m an administrator so I just activated it for that.

Next, when you want to use PHP in a post/page, put the code into the editor part (on the HTML side, not Visual). Then scroll all the way to the bottom of the page, past tags, categories, and post revisions and check the little box that asks “run PHP code?” That’s it. Now back to switching themes.

Writing Theme-Switching Links

If you don’t want to use PHP, if you only want to offer certain themes, or if you want to write about a specific theme, you’ll have to write the links yourself. There wasn’t anything online, but it’s quite simple.

Theme-changing links are made by simply adding this to the page’s address:

?wptheme=themename

The only exception is index pages of most blogs, which require putting /index.php after the blog’s address.

Some examples:

Let’s change themes.blogcrafted.com to “default” theme for you and land on the front page. We’d to that using this link:
http://themes.blogcrafted.com/index.php?wptheme=default

To change an individual post back to the Silver Light 3-Column theme, we use this link:
http://themes.blogcrafted.com/2008/08/19/worth-a-thousand-words/?wptheme=silver-light-3-col

Obviously, you’d just change the “default” to “silver-light-3-col” if you wanted to view the main page as Silver Light again…though changing the theme of any page changes it for the whole site until you change again.

But how do you find the name to include after the “=”?

How to Find the Theme’s Name

Some of the theme names aren’t intuitive. As far as I can tell, they’re based on the name of the folder in which the theme is contained. So “silver-light-3-col” works. Surprisingly, for the Blue Kino theme (whose folder’s name is “blue kino”) the actual ?wptheme=blue kino (with the space!) works. Not on either of these sites (since I don’t have that theme on them), but I decided to try it out on my test site.

You may have to play around with it. If you can’t get them to work, try putting the above PHP in a sidebar and use it to switch themes. When you first switch themes, it’ll automatically take you to the front page of the blog and include the ?wptheme=themename in the location bar.

Critical Thing to Remember (MUST READ THIS)

Make a way for your readers to switch back to the original theme. I say this because it’s something I’ve noticed in my testing. If I stick the PHP in my sidebar code on a test site, then it’s not there when I switch themes (since I use the actual code, not the widget). So I have to use the back button.

Or suppose that you linked to another way of viewing your site but didn’t give a link to switch it back. Since the browser has actually switched themes, there’s no easy way to switch back without that link.

Putting either the PHP or a link in the post with the switching option will work, since the post will be accessible whatever the theme. Or using PHP widgets in your sidebar (as long as you use only widget-ready themes which show that sidebar). Or hand-coding if you put it in every possible theme’s sidebar. Just be sure to give readers the option so they aren’t left in limbo with a theme they were just trying to peek at.

Any questions? Let me know in the comments!

Introducing the Silver Light 3-Column Wordpress Theme

BlogCrafted Staff — Fri, 15 Aug 2008 14:30:51 +0000

New option! Now you can preview the theme here. Be sure to come back to read more and download!

Jai of BlogOh!Blog created a free 2-column theme called Silver Light. It’s a lovely theme, but it doesn’t offer a 3-column option. So I’ve made some adaptations which create a three-column split look (one sidebar on the left of the post and one on the right) which should be compatible with any browser including IE6.

You can download it here or on the official theme page.

You can see the difference if you look at a screenshot of the new 3-column:

vs. the old 2-column:

I also added gravatar support for the comments. This means that if a commenter has a gravatar associated with their e-mail address, it’ll show up in the comments. For example, this is what it looks like if someone comments on a site with gravatars enabled.

If you would like to remove gravatar support, simply delete this code from the comments.php file:

&amp;lt;?php if(function_exists('get_avatar')) { echo get_avatar($comment, '40'); } ?&amp;gt;

You don’t have to, but if you want to be really thorough, you can remove the avatar styling information from the style.css sheet. It’s not necessary, since as long as it’s not using in the site code it doesn’t matter if the style information is there.

img.avatar {
float:left;
margin-right:6px;
}

In addition, I changed the style.css file to make it easier to read. However, I left in the old stylesheet in the file oldstyle.css. It’s been adapted to reflect all the changes as well, so you can always copy and paste it over the new style.css sheet if you feel so inclined.

Obviously, this theme owes most of its creation to Jai of BlogOh!Blog and his creative vision. What I hope I’ve done is make it more appealing to a wider audience by offering more options. Share and enjoy!

How to Fix Italics on Redie 3.0

BlogCrafted Staff — Fri, 01 Aug 2008 14:30:31 +0000

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 tags. So my client simply selected the italics option in Wordpress’s editor, which added 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 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 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 or
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 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 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.

Related posts:
Changing the Header in Cutline 3-Column Split (or Right) Wordpress Theme

Tutorial: Adding Gravatars to Cutline Themes

How to Change the Name of Your Wordpress Theme

Changing the Header in Cutline 3-Column Split (or Right) Wordpress Theme

BlogCrafted Staff — Wed, 02 Jul 2008 17:00:37 +0000

Note: this fix will work for both Cutline 3-Column Split and Cutline 3-Column Right Wordpress themes.

I’ve had several people contact me to ask how I changed my personal blog’s header from the Cutline 3-Column version (click on any image to see a larger version):

To this:

How did I get rid of the extra picture, freeing up more space for text above the fold? The simple way to do it is by removing all this code in the header.php file:

/images/header_1.jpg" width="970" height="140" alt=" header image 1" title=" header image 1" /> /images/header_2.jpg" width="970" height="140" alt=" header image 2" title=" header image 2" /> /images/header_3.jpg" width="970" height="140" alt=" header image 3" title=" header image 3" /> /images/header_4.jpg" width="970" height="140" alt=" header image 4" title=" header image 4" /> /images/header_5.jpg" width="970" height="140" alt=" header image 5" title=" header image 5" />

However, this leaves you with a thick black bar (at the bottom of the #nav section…you can barely see it in the original Cutline image since it almost blends in with the picture) directly above your blog. It meshes rather unpleasantly with the top of the sidebar widgets.

To fix that, go into the ul#nav section of the theme’s stylesheet (style.css) and add the following code:

margin: 0 0 10px 0;

This creates a 10px margin between the line and the top of the blog/sidbar, a small visual break.

If that’s not enough for you or you don’t like the overall thickness, here’s the code to lighten all the lines as I’ve done in the picture below. I changed their colors to match the horizontal line at the top of the blog (whose color is defined as #ccc in the #masthead h1 section of the stylesheet, if you want to change that as well).

This code will lighten the lines above and below the navigation links:

ul#nav { list-style: none; width: 950px; padding: 0 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; float: left; clear: both; }

and this code will change the sidebars to have lighter lines around their widget headers as well:

li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }

This is what the end result will look like:

Voila! Let me know how it works for you.

Related posts:
Introducing the Silver Light 3-Column Wordpress Theme

Tutorial: Adding Gravatars to Cutline Themes

How to Change the Name of Your Wordpress Theme