Entries Tagged 'Design tips' ↓

There’s always been a debate about how long your blog post title should be, but whatever the best answer is according to everyone else, I’ve always stuck with “shorter is better”.

Why?

It just looks better!

If you have a blog post that is essentially one long-ass sentence, it will look horrible in your blog’s sidebar when you list your recent or popular posts. Some blog themes don’t like longer blog titles and will make them wrap stupidly in the main post as well.

So not only do you have these reasons why you should use a shorter blog post title;

• easier for readers to remember so they can locate it in the future
• easier for people to link to it from their own blog or retweet in on Twitter
• more likely to appease the search engine gods (Google displays up to 70 characters)

but you’re also making the overall look of your blog more aesthetically pleasing.

In my post, 5 Ways To Smarten Up A Boring Wordpress Theme, I talked about using RSS icons to spiffy up the look of your blog. It just so happens that I stumbled across this post shortly after I wrote that which lists a ton of different resources if you’re looking for something free. There are some extremely cool RSS icons in that list.

When you find something you’d like in your own theme, it’s time to get your hands a tad dirty. Here’s how to replace the existing RSS icon in your theme with a new one:

Download the free RSS icon to your computer and unzip it.

Open your FTP program and navigate to your theme folder which is in the “wp-content” folder. (If you have trouble with this part, let me know in the comments.)

In your stylesheet, locate the bit of CSS for RSS. Each stylesheet is a bit different, but if you use the Find feature (hit Ctrl+F) and search for “rss” you should find it no problem. I’m using the Copyblogger theme by Chris Pearson on this particular blog so I’ll be using that code for my examples.

Here was my original code with the boring orange RSS icon:

#rss { width: 20em; height: 70px; margin: 0 0 1.0em 0; background: url('images/rss.gif') 50% 0 no-repeat; text-align: center; }

#rss a { display: block; width: 48px; height: 48px; margin: 0 auto; }

Here is what I changed it to:

#rss { width: 20em; height: 128px; margin: 0 0 1.0em 0; background: url('custom/rss.gif') 50% 0 no-repeat; text-align: center; }

#rss a { display: block; width: 128px; height: 128px; margin: 0 auto; }

You’ll need to know the width and height of your new RSS icon to put in the new values. My new RSS icon was 128×128 so I changed the height of 70px to 128 to make sure there was enough space.

This pushed down my sidebar a bit so if you’re not willing to have changes like this, choose a new RSS icon that is the same size as the existing one, or resize it in an image editing program.

You’ll also need to rename your new RSS icon and replace the old RSS icon with the new one. I did this by dragging it into my images folder via my FTP program and rewriting over the old one.

My particular theme uses a custom stylesheet and custom images folder (any new images or graphics I put in my theme all go into the custom folder) so I had to rename the ‘images/rss.gif’ part to ‘custom/rss.gift’.

Now my new RSS icon is displaying perfectly, but I want to add a little something extra. In Fireworks (you can use GIMP for a free alternative image editing program) I copied the RSS icon and made the copy a different color. I named it “rss_hover.gif” and dragged it into my custom folder. Then I added this bit of css into my custom stylesheet:

#rss a:hover { background: url('custom/rss_hover.gif'); }

Now when you hover over the RSS icon, it changes color.

And there you have it. A fairly simple change that makes a pretty big difference. If there are any CSS masters out there who have an easier way, I’d love to hear it!

In my last post, I mentioned that creating your own header is one way to make your Wordpress blog unique to other themes.

Today I thought I’d take the opportunity to show you a few examples of some blog headers that really caught my eye. Hopefully they’ll provide a bit of inspiration for you.

1. The Mom Crowd

2. Blog Design Blog

3. Geeks Are Sexy

4. Friday Traffic Report

5. Karen Cheng’s Snippets of Life

6. Making It Lovely

7. Mark’s Daily Apple

This is actually the old header. He JUST launched a new design and I’m personally liking the old one better. Anyhoo, next.

8. Men With Pens

9. Mighty Girl

10. The Adventures of SuperWife

11. Define Me Clothing

They don’t have to be award-winning designs but it should tie in well to the rest of your theme.

More Wordpress goodness to come, so stay tuned!

In my last post, Everyone in the whole wide world should have a customized blog, I blabbed about how there’s no reason why everyone shouldn’t have a unique blog theme. Now I have 5 different ways that you can accomplish that.

Create Your Own Header

I use Macromedia Fireworks to create all my graphics, but if you don’t have that or Photoshop, GIMP does the job well enough considering it’s completely free.

A header can consist of a simple word or sentence – the name of your blog and your tagline perhaps – or it can show a beautiful, eye-catching piece of photography.

There are lots of ideas to incorporate a really groovy header into your blog to make it unique. Google “inspirational blog headers” and start brainstorming some ideas.

Add Your Signature To Your Posts – Get Personal

Adding a graphic of your signature (which can be digitally created) is one way to add your own personal touch to your blog. Having a signature at the end of each post is similar to adding your photo in that it lets your visitors get to know you a bit better because you’re not just hiding behind the anonymity the internet can provide.

Showing a bit of your personality helps your visitors connect better with you. Your signature can be part of your brand. You could even add your signature to your blog header.

Change the Font, Background, and Colors

Making a few small changes like the color of your sidebar titles or the type of font you use can make a big difference in the overall look of your blog. These changes are fairly easy to implement as well. I’ll be getting into that a bit more in the coming days and weeks.

You may want to take a plain white background and change it to a vibrant blue. You could also add a photo as your background to really make your blog pop.

When making these changes, it’s important that they don’t take over your blog. Colors that are too bright, too many colors, too many types of font, etc. can distract your visitors and may even hurt their eyes. Reading neon pink text on a black background is not a good time people.

Find or Create a Groovy RSS Icon

There are tons of free RSS icons out there that you can download and add to your blog. I’m not a big fan of those boring orange squares so I usually like to change things up a bit and whip out some kickass RSS logos that really stand out.

If one of your goals with you blog is to increase your RSS subscribers, having an eye-catching RSS icon is one way to do that. You could also create your own RSS icon and make it completely unique.

Change Sidebar Titles to Images or Graphics

If your blog theme is pretty bare of graphics, one way to spruce it up is to replace your sidebar titles with an image. You can create a subtle image that appears under the existing text, or you can create a separate image for each widget. I prefer the first option since it’s mucho easier.

This requires a bit of messing around with CSS but I’m going to go over that in a future post as well. If you’re not good at creating graphics, there are lots of free stock images to choose from.

So there you have it – 5 ways to make your generic blog theme kick ass. If you have no clue how to do any of this stuff, no worries. I’ll be posting about each one in detail so make sure you’re signed up for my RSS feed.

Launching an uncustomized blog.

(Is “uncustomized” even a word?)

I have to say that I’m a firm believer in the fact that NOBODY should have a blog that isn’t at least a teeny tiny bit customized these days.

Sure you can install Wordpress, throw up a free theme and start publishing in under an hour. But that’s like farting on your blog and having a bunch of people come to visit and smell catch you redhanded with a stinky blog. Blogging with a bareass blog can be just as embarrassing.

There are so many ways you can add your own unique touch to your new blog that there’s really no excuse. Leaving up the default theme should be a sin. Shame on you if you’re a sinner!

Now, I’ve had the opportunity to play around with the Thesis theme that everyone and their dog has been talking about and was most thoroughly impressed. This is a premium theme, meaning you have to purchase it.

However, it’s a ridonculously great price for the slick features that come with it, and it’s super simple to navigate around the options. Not only that, but Levar freaking Burton uses that theme! Who wouldn’t want a Wordpress theme that Geordi La Forge rocks out to?

Using the Thesis theme is one great way to have a blog that allows you to make it unique without spending a boatload of money.

Another option for you is to keep your eye out in the coming days/weeks because I’m going to be posting about a few things you can do on your own to make your blog stand out. These are things that I can do, so there’s no reason why anyone else can’t do it too. There are days when I put the cereal in the fridge and the milk in the cupboard. Seriously. So anyhoo, make sure to sign up for my RSS feed so you don’t miss out on some cool Wordpress tutorials.