Modifying the Lavender Theme

[Silvina]

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:

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?

[baris]

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

[Silvina]

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 ?

[baris]

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.

[Silvina]

@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}">

?