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

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: Agency, Balance, Decor, Generate, Mindstream, Pretty Pictures, and Stretch.

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

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

.comment-list li, .ping-list li {
     background: #fff url(images/comments-grad.png) top repeat-x;

Where to put the code

You’ll paste this code in 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.

However, since these themes all use responsive design, you need to 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