CODEWITHSUNDEEP
phpcsswordpresscomments
Emily Harris
Emily Harris

Reputation: 147

Alternating Comment Colours using Odd and Even Classes

I asked this question earlier but had no luck with responses. :(

I have the new WordPress 2.7 Comments Loop, and I know you can simply add .odd and .even to your CSS to get alternating comment colours, which I've done:

.odd { background: #ccc; color: #000; }
.even { background: #bbb; color: #000; }

However, I have two different backgrounds - a light and a dark one - that the user can choose from the options panel. Therefore I need two different versions of the odd and even classes so I can have different colours for each, as the above background colours look nice against the light background but not so good against the dark one.

But with the 2.7 Comments Loop, the odd and even classes aren't actually there in the code. If they were, I'd have done something like this:

$background = get_option('mytheme_background');
if ($background== "option1") { echo '<div class="odd-dark">'; } 
if ($background== "option1") { echo '<div class="even-dark">'; }
if ($background== "option2") { echo '<div class="odd-light">'; } 
if ($background== "option2") { echo '<div class="even-light">'; }

So with .odd and .even not actually being there in the code, how can I go about having two different .odd and .even versions in the CSS?

Upvotes: 0

Views: 409

Answers (2)

Lumen
Lumen

Reputation: 3574

You can use CSS classes in conjunction:

echo '<div class="even option1">';
echo '<div class="even option2">';
echo '<div class="odd option1">';
echo '<div class="odd option2">';

In the CSS file, you specify:

.option1.even { background-color: #bbb; color: black; }
.option1.odd { background-color: #ccc; color: black; }
.option2.even { background-color: #222; color: snow; }
.option2.odd { background-color: #444; color: white; }

Alternatively, you can apply a CSS class option1 to your body element. This is especially useful if you otherwise had to markup many elements with class="option1 …":

<body class="option1">
    <div class="even">…</div>
</body>

In CSS:

body.option1 .even { /* … */ }

And so on. Note there is a space between option1 and .even.

Upvotes: 0

CodeAngry
CodeAngry

Reputation: 12985

PHP:

$background = get_option('mytheme_background');
// no more - between class names to use specializations of odd/even in CSS
if ($background== "option1") { echo '<div class="odd dark">'; } 
if ($background== "option1") { echo '<div class="even dark">'; }
if ($background== "option2") { echo '<div class="odd light">'; } 
if ($background== "option2") { echo '<div class="even light">'; }

AND CSS:

/* now specialize 2 variants for each type odd/even * dark/light */
.odd.light { background: #ccc; color: #000; }
.even.light { background: #bbb; color: #000; }
.odd.dark { background: #ccc; color: #000; }
.even.dark { background: #bbb; color: #000; }

Try this.

Upvotes: 1

Related Questions