Code for Adding a Gradient to Your Genesis-Powered Comments – Special Cases

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.

The code on this page applies to the Executive and Going Green Genesis themes. The code for the other three other groups of Genesis themes didn’t work for these themes, so I had to tweak the code a bit more to get the gradients to show up and still look alright.

First, here’s the code for Executive:

/****  Add gradient image to top of each comment  ****/
.comment-list cite,
.ping-list cite,
.says {
     color: #222;
}

.commentmetadata a {
     color: #222;
}
.comment-header {
      background: none;
}

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

And here’s the code for Going Green:

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

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

.depth-2,
.depth-4 {
     background: #f0efec url(images/comments-grad.png) top repeat-x;
}

.depth-3 {
     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

*