使用奇数和偶数类交替评论颜色

时间:2012-10-29 18:43:51

标签: php css wordpress comments

我之前提过这个问题,但没有回应。 :(

我有新的WordPress 2.7评论循环,我知道你可以简单地将.odd和.even添加到你的CSS中以获得交替的评论颜色,我已经完成了:

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

但是,我有两种不同的背景 - 浅色和深色 - 用户可以从选项面板中选择。因此我需要两个不同版本的奇数和偶数类,所以我可以为每个颜色设置不同的颜色,因为上面的背景颜色在浅色背景下看起来不错,但对黑暗颜色不太好。

但是使用2.7注释循环,奇数和偶数类实际上并不存在于代码中。如果他们是,我会做这样的事情:

$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">'; }

因此,使用.odd和.even实际上并没有在代码中存在,我怎样才能在CSS中使用两个不同的.odd和.even版本?

2 个答案:

答案 0 :(得分:1)

<强> 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; }

试试这个

答案 1 :(得分:0)

您可以结合使用CSS类:

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

在CSS文件中,您指定:

.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; }

或者,您可以将CSS类option1应用于body元素。如果您不得不使用class="option1 …"标记许多元素,这将非常有用:

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

在CSS中:

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

等等。请注意,option1.even之间有一个空格。