Modifying the Lavender Theme



  • Recently, I uploaded a preview of my forum migration process on facebook, received a couple of comments, one of which hits me the most..

    This is the image preview I uploaded:
    2014-09-24_14-48-13.jpg

    And the comments i received

    • -> are we able to make each column/section a different color? coz to me it still looks like a wall of text separated into 3 columns of more text hahahahaha

    Is it possible for me to customise the theme according to the comments? I kinda agree with the observation made. Can anybody guide me which file / area to change?


  • Staff Admin

    You can do this by adding a class to each category-item on home that includes the category id. Something like

    <div class="col-lg-4 col-md-6 col-xs-12 category-item category-class-{categories.cid}" data-cid="1" data-numrecentreplies="2" ></div>
    

    Then in you css you can give different colors to different category boxes.

    .category-class-1 {
      background-color:red;
    }
    


  • Hi @baris, thanks for your quick reply^^

    Need you to hold my hands here,

    • Where do I add the ?
    <div class="col-lg-4 col-md-6 col-xs-12 category-item category-class-{categories.cid}" data-cid="1" data-numrecentreplies="2" ></div>
    
    • I assume adding the
    .category-class-1 {
      background-color:red;
    }
    

    is inside NodeBB ACP -> Themes -> Customise -> Custom CSS ?


  • Staff Admin

    Yeah the css goes into custom css or your themes css.

    The html is just for your home.tpl. That is from lavender's home.tpl.



  • @baris
    Managed to find the following line

    <div class="<!-- IF categories.class -->{categories.class}<!-- ELSE -->col-md-3 col-sm-6 col-xs-12<!-- ENDIF categories.class --> category-item" data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}">
    

    in

    ./node_modules/nodebb-theme-lavender/templates/home.tpl
    

    So I proceed to change it to

    <div class="<!-- IF categories.class -->{categories.class}<!-- ELSE -->col-md-3 col-sm-6 col-xs-12<!-- ENDIF categories.class --> category-item category-class-{categories.cid}" data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}">
    

    ?


Log in to reply
 

Suggested Topics

| |