XF 2.0 Tutorial to add background color and icon to nodes - categories and Forum in UI.X2 theme

Dnyan Deshmukh

Well-known member
I do understand, customizing a theme is not a easy task, specially for newbie and can result into wastage of hours in doing something which does not take more than a minute.

To Change the color of background put below code in extra.less template

Code:
.block.block--category.block--category1 .block-header {

    background: #52c036;

    color: #ffffff;

}
You need to change the id of category, above example have category1

background - background color.

Color - its a text color.

To add the Icon before category or forum put below codes in extra.less


Code:
.node--forum.node--id1.node--read .node-icon i::before {

  font: Material Design Icons;

    content: "\f00c";

    color:     #52c036;

    opacity: 0.3;}



.node--forum.node--id1.node--unread .node-icon i::before {

  font: Material Design Icons;

    content: "\f00c";

    color:     #52c036;

   }
above both codes are for icon.
1st one is to show forum read icon by opacity.
2nd one to show full colored icon for unread post.

i am not a expert coder, i tried the above combinations after reading lot of threads and it worked for me, so decided to share it with you all.

if anyone have suggestion to make the code shorter or better, are most welcome.
 
Top