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

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: Agent Press, Associate, Blissful, Corporate, Crystal, Education, Fairway, Family Tree, Lexicon, Lifestyle, Magazine, Manhattan, Midnight, Minimum, News, Nitrous, Nomadic, and Tapestry.


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

.comment-author {
     background: none;
}

.comment-meta {
     background: none;
}

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

.comment-list ul.children li.comment {
     background: url(images/comments-grad.png) top repeat-x;

}

Where to put the code

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.

If you’re using a mobile responsive theme, such as Education, Magazine, Minimum or News, 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

*