.node_1, .node_3, .node_5 {
background: red;
}
.node_2, .node_4, .node_6 {
background: yellow;
}
<xen:if is="{$stickyThreads} OR {$threads}">
<xen:set var="$showLastPageNumbers">1</xen:set>
<xen:set var="$linkPrefix">1</xen:set>
<xen:hook name="thread_list_stickies">
<xen:foreach loop="$stickyThreads" value="$thread">
<xen:include template="thread_list_item" />
</xen:foreach>
</xen:hook>
<xen:include template="ad_thread_list_below_stickies" />
<xen:hook name="thread_list_threads">
<xen:foreach loop="$threads" value="$thread" i="$i">
<xen:include template="thread_list_item" />
</xen:foreach>
</xen:hook>
<xen:edithint template="thread_list_item_edit" />
<xen:else />
<li class="primaryContent">{xen:phrase there_no_threads_to_display}</li>
</xen:if>
<xen:require css="discussion_list.css" />
<xen:if is="{$thread.isDeleted}"><xen:include template="thread_list_item_deleted" /><xen:else />
<li style="background-color: {xen:if '{$i} % 2', 'red', 'green'};" id="thread-{$thread.thread_id}" class="discussionListItem {$thread.discussion_state}{xen:if '!{$thread.discussion_open}', ' locked'}{xen:if {$thread.sticky}, ' sticky'}{xen:if {$thread.isNew}, ' unread'}{xen:if {$thread.prefix_id}, ' prefix{$thread.prefix_id}'}{xen:if {$thread.isIgnored}, ' ignored'}" data-author="{$thread.username}">
<div class="listBlock posterAvatar">
<span class="avatarContainer">
<xen:avatar user="$thread" size="s" img="true" />
<xen:if is="{$thread.user_post_count}"><xen:avatar user="$visitor" size="s" img="true" class="miniMe" title="{xen:phrase you_have_posted_x_messages_in_this_thread, 'count={xen:number $thread.user_post_count}'}" /></xen:if>
</span>
</div>
This is just a basic example using inline styling. The proper way would be to conditionally name a CSS class.
FYI you can just use CSS for this;
http://www.w3.org/Style/Examples/007/evenodd.en.html
Might not work for IE 6 and 7 however.
Jake,
The template edits are working; I was looking at posts, not threads. How would you do this for posts as well?
I'd like to know how this is done too. Create new templates? This could be a styling feature more admins would like to use.
.messageList li.message:nth-child(even) .messageContent
{
background: red;
}
.messageList li.message:nth-child(odd) .messageContent
{
background: green;
}
Admin CP -> Appearance -> Templates -> thread_list
The result:
View attachment 30813
This is just a basic example using inline styling. The proper way would be to conditionally name a CSS class.
is there anyway to update the edit so it also changes the css behind the thread starter avatar and the replies/views part?
.messageList li:nth-child(even),
.messageList li:nth-child(even) .primaryContent,
.messageList li:nth-child(even) .messageContent,
.messageList li:nth-child(even) .signature,
.messageList li:nth-child(even) .messageMeta
{
background: #fbfbfb;
}
.messageList li:nth-child(odd),
.messageList li:nth-child(odd) .primaryContent,
.messageList li:nth-child(odd) .messageContent,
.messageList li:nth-child(odd) .signature,
.messageList li:nth-child(odd) .messageMeta
{
background: #f6f6f6;
}
We use essential cookies to make this site work, and optional cookies to enhance your experience.