Code for Adding a Gradient to Your Genesis-Powered Comments – Method 1

This page contains CSS code for displaying a gradient image that the top of every entry in your WordPress blog’s comments section. If you got here from a search engine, start here first.

This code specifically applies the following Genesis themes: Amped, Apparition, Backcountry, Delicious, eleven40, Enterprise, Expose, Fabric, Focus, Freelance, Genesis, Georgia, Landscape, Luscious, Metric, Metro, Mocha, Outreach, Platinum, Pretty Young Thing, Quattro, Prose, Scribble, Serenity, Sleek, and Streamline.

The code for those themes is pretty straightforward.

/**** Add gradient image to top of each comment ****/

.even, .alt, .depth-1 {
     background: url(images/comments-grad.png) top repeat-x;
}

Simply paste it at the end of your theme’s stylesheet (style.css), which you can usually access in WordPress from your dashboard menu: Appearance –> Editor. With some themes, like Prose, you have to go to the Genesis –> Custom Code page and add this code to the custom CSS box.

In some cases, you might want to make the comments background completely white. Here’s the code for that wrinkle:

/**** Add gradient image to top of each comment ****/

.even, .alt, .depth-1 {
     background: #fff url(images/comments-grad.png) top repeat-x;
}

Where to put the code

If you’re using a mobile responsive theme, such as Apparition, eleven40, Focus, Genesis, Metro, Mocha, or Quattro, then you don’t want to paste the code at the end of the stylesheet. Instead search for where the responsive design rules begin, and paste the code just above it. The top of a theme’s responsive design code is usually marked by


/* Responsive Design
------------------------------------------------------------ */

Another way to find it is by searching for “@media”.

Ok. Now you can go back to main article to find out how to get a free gift.

Speak Your Mind

*