1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

ThreadList alternate colours like vb

Discussion in 'Styling and Customization Questions' started by Nudaii, Jun 22, 2012.

  1. Nudaii

    Nudaii Well-Known Member

    Is there a way to have the thread colour alternate every other thread in thread list view?

    aka
    colour1
    colour2
    colour1
    colour2

    etc?

    as when you have alot of threads its helps break them up visually
     
  2. MagnusB

    MagnusB Well-Known Member

    Each node have an unique class, node_#, where # equals the number in the URL (ID?). For example, Styling and customization Questions here should have a class called node_47. You can use this to style it with something like;

    Code:
    .node_1, .node_3, .node_5 {
      background: red;
    }
    .node_2, .node_4, .node_6 {
        background: yellow;
    }
    I think the framework xenStyles use (Xenomorph), has this built in.

    EDIT: Disregard, I misunderstood, Jake didn't, as always
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> thread_list

    Add the red code:

    Code:
    	<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>
    
    Admin CP -> Appearance -> Templates -> thread_list_item

    Add the red code:

    Code:
    <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>
    
    The result:

    Screen shot 2012-06-21 at 11.53.47 PM.png

    This is just a basic example using inline styling. The proper way would be to conditionally name a CSS class.
     
    Jarod likes this.
  4. Nudaii

    Nudaii Well-Known Member

    thanks jake :)
     
  5. Neil E.

    Neil E. Active Member

    I tried this and had no luck. Tried first using TMS, then reverted that change and tried by directly modifying the templates. There are no other edits to thread_list and thread_list_item.

    EDIT: see below
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You seem to be having trouble with template edits. I suggest disabling the TMS so you are working with the default system. Then rebuild the master style by visiting /install and clicking the button to rebuild the master data. Then try applying the template edits again. When editing the templates make sure you are editing the same style you are viewing on the front end or of course the changes won't show. And never edit the master style.
     
  7. Neil E.

    Neil E. Active Member

    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.
     
  8. Naatan

    Naatan Well-Known Member

    Mendo and Jake Bunce like this.
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I learned something new. [​IMG]

    Using the CSS Naatan pointed out...

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .messageList li.message:nth-child(even) .messageContent
    {
    	background: red;
    }
    .messageList li.message:nth-child(odd) .messageContent
    {
    	background: green;
    }
    
    You can use .messageList li.message:nth-child(odd) at the beginning of your selector to style any aspect of the post.
     
    Mendo likes this.
  10. Neil E.

    Neil E. Active Member

    Thanks Naatan and Jake. A nice simple solution.
     
  11. Nudaii

    Nudaii Well-Known Member

    is there anyway to update the edit so it also changes the css behind the thread starter avatar and the replies/views part?:)
     
  12. bart

    bart Active Member

    Works like a charm!!!

    Can you point me out where i should make the same edits for category-view? I am having trouble finding the loop... I want to make a alternated list of the subforums of a category. And also of the subforums and categories of the whole node-list.
     
  13. lashedup

    lashedup Member

    Here you go... just change the background colors as you see fit....

    Code:
    .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;
    }
    
    <edited to add signature piece backgrounds>
     
    Last edited: Mar 14, 2014

Share This Page