How to Add a Gradient to Your Genesis Theme’s Comments Section

Today I’m going to show you how to dress up your blog’s comments section by adding a gradient to the top of each comment. A background color that gradually fades away from the top of the comment header to the comment text is a subtle way to separate comments from one another and help guide a reader’s eyes down the page.

Screenshot of Comments Gradient

I’ll show you CSS code snippets that will allow you to add comment gradients to any of StudioPress’s Genesis child themes. Non-Genesis users should read this post too because I have something special to give away at the end of this post that anyone can use.

Image vs CSS

There are two ways to create a color gradient on a webpage. The first is to create a gradient in Photoshop, GIMP, or other image/graphics editing software, save it as a small image, and upload it image to your blog. Then add a few simple CCS rules to your theme’s stylesheet that tells the browser to locate the image file and repeat it over and over from left to right until its container is filled.

The other way is add some CSS3 (version 3 of the Cascading Style Sheets specification) rules to your stylesheet that tell a web browser to how to render the gradient without using an image. There are free web-based generators that allow you to easily create the CSS3 gradient code like Colorzilla.

The advantage of the latter method over the former is that your blog’s load times are faster because the browser doesn’t have to use an extra HTTP request and bandwidth to download the image.

The tradeoff, however, is that most browsers need the generated gradients specified in a unique way. This means you have to generate slightly different rules for each browser. If you try the Colorzilla generator, for example, you’ll that see it creates seven different browser-dependent rules.

If you only had to do this once, it might not be that big of a deal. Unfortunately, though, browser updates can sometimes render the code obsolete and mess up the look of your gradients. So every time one of the major web browsers releases a new update, you have to check to make sure your blog’s gradients are rendered properly.

That may be par for the course for full-time web developers, but your average blogger doesn’t want that hassle. I mean, how many of us have Chrome, Firefox, Safari, Internet Explorer and Opera installed on our machines and religiously test our blog’s appearance whenever those browsers are updated? I don’t.

Not a big effect on load time

If your comments section is the only place your blog uses a background gradient, then using an image won’t significantly impact its download time. The image is small (only a few hundred bytes), and once it’s cached in your reader’s browser, it won’t need to be downloaded again.

So for this blog, I decided to go for the simplicity of using an image gradient for my comments section. This post will show you how to do it.

Elements of gradient image

Gradients are a visual cues that help your readers see where a new comment begins. They should gradually fade away before interfering with the body of the comment. Here are some basic guidelines for you comment gradients:

  • Subtle color ­­– Use a light color that fits with your blog’s overall color scheme. A light grey color is usually a safe choice if you can’t decide on a color, especially if your blog’s background color is white or very light.
  • Readable text – The gradient shouldn’t be so dark that it makes text difficult to read. Always try to maintain high contrast between text and its background.
  • Fade to background – The gradient should gradually disappear into the background color that underlies your comments section. In other words, if your blog’s background color is light blue, the bottom color of your gradient should match. The reliable way to do this is to make your gradient’s bottom color transparent.
  • Fade out before comment begins – The bottom of your gradient image should not spill over into the body of the comment. This helps to separate the comment’s header (commenter’s name, the date, and the avatar) from the rest of the comment.

Generating the gradient

I’m not going to go into a lot of detail about how to create a gradient image. It’s not the easiest thing to do in the world, but it’s not very difficult either. There are plenty of tutorials out there to teach you how to do it depending on what software you’re using.

But don’t worry. I’ve got a surprise for you at the end of this post that might save you the time and effort of creating your own gradient anyway.

The important thing to know is that when creating a gradient image, save it as a PNG file. It’s the only web image format that gives quality gradients and allows a transparent bottom. The dimensions of the image should be only a few pixels wide and about 75-150 pixels high, depending on the height of your comment headers. The Hobby Blogger’s gradient is 100 pixels tall.

Here’s a web-based tool to create a gradient PNG file with transparency. You just have to remember to crop the image before you use it.

Where to place the gradient file on your server

Before I get to the code, change the name of your gradient image to comments-grad.png. This is name that will be used in the code snippets you’ll see in a minute. Next upload the image into your theme’s images folder. This folder will be

wp-content/themes/your_theme_folder/images/

So if you’re using StudioPress’s News theme, you should be able see the gradient image in your browser if you go to:

http://your_domain/wp-content/themes/news/images/comments-grad.png

You should see it in the top-left corner of your browser window.

Getting the code for your theme

The CSS code used to place the gradient image differs depending on the theme you’re using.

Using Google’s Chrome Developer Tools, I played with every StudioPress theme demo site until I got the gradients to work on every theme. I had to come up with a few variations, so I’ve created a page for each variation and link to them from the table below.

Every current StudioPress theme (and a few retired ones as well) is listed in alphabetical order, and links to a page on The Hobby Blogger containing the proper CSS code and an explanation of where to paste it.

Surprise! Free gradients

Okay, so you’re not a Photoshop wiz, and you don’t want to learn how to make your own gradients. You just want to quickly find a gradient image, upload it to your blog and see how it looks.

Well you’re in luck.

I sat down for a couple nights and created 249 gradient image files in several different colors and shades. You can see them all in the index image below.

Index of Free Gradient Images

I thought it’d be cool to just give something away with no obligation. I know I’m violating all kinds of blogging dogma by giving away something without requiring an email address first, but this is my first give away. Most people would probably sign up for my email list, get the download, and then unsubscribe anyway. So I figure I’ll just save them the trouble.

If you do want to sign up for email updates, in case, you know, I give away something else for free in the future, please do.

The download is a zip file containing several folders named according to the color of the gradients. Each image is 10 pixels wide by 100 pixels tall, a height that works pretty well with how most themes style the comments section.

Just browse through the gradients until you find one you like. Change the filename (or better yet, copy the file and change the copy’s filename) to comments-grad.png. Then upload the gradient image as described above. Assuming you’ve inserted the correct CSS code into your stylesheet, you should see the gradient in your comments when you refresh your browser. Note, you might have to clear your browser’s cache first.

So here you go. Click the button below to download the gradients.

And that’s it. If you use any of these gradients (or one of your own) on your blog, let us know in the comments so we can check it out.

Special thanks to Love with Bug for the Download button.

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Man, this is absolutelly cool. I’m a big fan of genesis and this brings some colour into the comment section.
    What happens when the author comments are set up to show in a different colour?

    • Bryan Kerr says:

      Thanks Bob. My guess is that, depending on how the theme is coded, the author comments might end up looking the same as the other comments. If the !important rule is used for the author comments, then they might not be affected.

  2. Bryan – this is great! I’ll have to try and wedge it into my own blog when I finally get around to swapping it for Genesis :)

Speak Your Mind

*