Alternating Colored Rows in vBulletin 4 [No Plugin]

Discussion in 'Content Management System' started by shabbir, Mar 5, 2011.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    How to have alternating colored rows (and not columns) in vBulletin 4. After searching around, I found one by William, Very nice work. His solution is for vBulletin 3 but it can be easily ported to vBulletin 4. As I searched, I saw the problem is talked a lot in forums without any solution for vBulletin 4 and so I decided to put together a solution extending William's work.

    1. Edit template forumhome_forumbit_level2_post



    Add the following code at the top of the template.

    Code:
    <vb:if condition="$altrow =& $GLOBALS['altrow']"></vb:if>
    <vb:if condition="!isset($altrow)">
        <vb:if condition="$altrow = 0"></vb:if>
    </vb:if>
    <vb:if condition="++$altrow % 2 == 0">
        <vb:if condition="$rowClass = 'alteven'"></vb:if>
    <vb:else />
        <vb:if condition="$rowClass = 'altodd'"></vb:if>
    </vb:if>
    Credit for the above code goes to William and forumthemes.

    Now change the first line (first line before inserting the above code) from

    Code:
    <li id="forum{vb:raw forum.forumid}" class="forumbit_post L2">
    to
    Code:
    <li id="forum{vb:raw forum.forumid}" class="forumbit_post L2 {vb:raw $rowClass}">

    2. Edit forumhome_forumbit_level1_post / _nopost



    Add the following at the top of forumhome_forumbit_level1_post and forumhome_forumbit_level1_nopost template.

    Code:
    <vb:if condition="$altrow =& $GLOBALS['altrow']"></vb:if>
    <vb:if condition="$altrow = 0"></vb:if>

    3. Edit Stylevars



    Edit forumrow_firstentry_background and forumrow_background stylevars and make it transparent by deleting Background Color and Background Image.

    4.Edit CSS



    Now add the following CSS in the additional.css template.

    Code:
    .altodd {background-color:#eee;}
    .alteven {background-color:#fff;}
    You can customize the above CSS as per your needs.

    I hope this helps fellow vBulletin forum webmasters.
     
  2. pankaj.sea

    pankaj.sea New Member

    Joined:
    Apr 6, 2009
    Messages:
    461
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    Web Developer
    Location:
    Kolkata
    Home Page:
    http://ipankaj.net
    Nice tutorial Shabbir!
    :)
    This was a very common question for webmasters at vBulletin.Org forum! ;) Now it has a solution!!
    Thanks!
     
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Thanks and if you see someone looking for something now you know what to do?
     
  4. pankaj.sea

    pankaj.sea New Member

    Joined:
    Apr 6, 2009
    Messages:
    461
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    Web Developer
    Location:
    Kolkata
    Home Page:
    http://ipankaj.net
    Sure... ;)
     
  5. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    This is a great work around , however i can not seem to get it working on the forumdisplay page . I.e the sub forums above the threadbits, Any ideas ?
     
  6. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    You should be. What are you trying on the forumdisplay? I tried myself and it just works fine
     
  7. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    I have just followed your instuctions above , the forumhome is working great however when i click a forum category which has sub forums those subforums are not styled in the same way, is there more code that i have to add to the forumdisplay template ?
     
  8. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    sub forums will work if they are at level1 but if you have them as level 2 then you may need to edit those templates. Also you can make the same logic even applied to showthread.
     
  9. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    I do not suppose you could tell me how to get the level 2 working and the showthread too ? I seem to be going around in circles when i edit certain templates.

    So far i have edited what you have mentioned above :

    forumhome_forumbit_level2_post

    forumhome_forumbit_level1_post

    forumhome_forumbit_level2_nopost
     
  10. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    Sorry i meant :

    forumhome_forumbit_level1_nopost not forumhome_forumbit_level2_nopost
     
  11. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    What is your vBulletin version. 3 or 4 and I will give you exact steps.
     
  12. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    that would be amazing thank you, Im using vbulletin 4
     
  13. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    For having alternating colors for your threads add the following code at the top of the threadbit template.
    Code:
    <vb:if condition="$altrow =& $GLOBALS['altrow']"></vb:if>
    <vb:if condition="!isset($altrow)">
        <vb:if condition="$altrow = 0"></vb:if>
    </vb:if>
    <vb:if condition="++$altrow % 2 == 0">
        <vb:if condition="$rowClass = 'alteven'"></vb:if>
    <vb:else />
        <vb:if condition="$rowClass = 'altodd'"></vb:if>
    </vb:if>
    
    And then edit the first line of the code as follows.
    Change
    Code:
    <li class="threadbit {vb:raw thread.statusstring}
    to
    Code:
    <li class="threadbit {vb:raw $rowClass} {vb:raw thread.statusstring}
     
    Adam H likes this.
  14. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    Thats great thank you for that , however im still having trouble with the forumdisplay page and the display of the subforums above the threadbit, see image :

    imageupload.org/thumb/thumb_32745.png
     
  15. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Can you have a large image because I am not able to understand anything out of that thumb
     
  16. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    Sorry please see below,

    where i have highlighted in red , is suppose to be a light grey :

    tinypic.com/r/20u68tx/7
     
  17. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Your forum has no post and we have not done the changes for forums that don't have posts in it. Try adding one post into that sub forum and then see if it works.

    Also I see only one sub forum and for alternating color make them two sub forums
     
  18. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    I have just added posts and added more subforums but its still the same :


    tinypic.com/r/vz8twp/7
     
  19. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Can you PM me your forum access and I will be more than happy to help
     
  20. Adam H

    Adam H New Member

    Joined:
    Apr 30, 2011
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    Unfortunately not, The forum is being worked on a local machine , not on a server which is online. Its all on vb 4.1.3 on the default fresh install of vbulletin. No edits or mods installed.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice