How to add colors to side bars in Xenforo

So today we are going to see how to add colors in to our side bar. What do I mean by side bar? Take a look at the image below:


So we have each line here with different pieces we can edit and change the colors of each. Today we are going to change the colors. So how do we do this? Well it’s a few different pieces and we will go through each step.

First off we are going to go through to Extras.css.

So log into your Admin CP and then go to Appearance like so:



Click on template and then look for Extras.css as usual. Like so:


So we are going to put the following code into Extras.css after everything that we already have in there like so:


.sidebar .visitorText { min-height: 100px; }



so like this:



Make sure that you save.

Next we are going to be adding more code to another part.  We are looking for the following template:


It looks like this:



So you are looking for the following part of the code that you see in front of you.

It looks like the image below:


So that part you are going to replace with this code:

<dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
<dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
<dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>

So it will look like this after it’s all said and done:


So now we are done make sure that you click save and move on back to Extras.css we have one more piece to put together.

We are going to add the following code at the end of Extras.css:

.Messagetext { color: red; }
.Messagescounter { color: blue; }
.likestext { color: orange; }
.likescounter { color: pink; }
.pointstext { color: green;font-style: italic; }
.pointscounter { color: purple; }


so it will look like this:


Make sure that you click save of course and now we are done! So let’s go back to our main forum board and have a look to see what has happened, we should see the following image:


There you have it! If you have any questions please feel free to ask away!

Looking for quality XenForo hosting? Check out Arvixe Web Solutions

Tags: , , , , , , , | Posted under XenForo | RSS 2.0

Author Spotlight

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *