BattleKing
Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
- Joined
- May 24, 2020
- Messages
- 3,519
- Points
- 523
This is for anyone completely new to xenForo who may have just started a forum but wants to customise the colors to give it a more personalised look. There is no need to know any kind of coding or graphic design - although you will of course want to have your own logo so we'll start with that bit. You can get a logo from any of the online logo generators such as Looka or hire a graphic designer (there are some good value designers on Fiverr or People per Hour.)
Now repeat for Color 2 which is slightly darker:
Don't forget to click on the Update button for each color. This updates the color but doesn't yet save the style...
Again, the salmon color has a similar shading to the original blue because the small circle is in the same place as it was. (NB: you can play with that, but for now best to leave it so all the oranges are similar in shade to the blues)
Now repeat the above for all colors 1 - 5. Again color 5 will have similar shading to the dark blue and will be a dark copper brown:
Check out the video:
Did you spot the deliberate mistake?
Update the 5th one and our main color palette is now complete:
You should now hit save to save the new colors to the style, go to your forum front end, choose this style from the style chooser at the bottom left and see how wonderful it looks. But we aren't quite finished yet.
Just below these five colours you will see the accent colors, which are there for certain elements that need to contrast with the main colors.
These are used for things such as call to action buttons like Post Thread that need to "jump out" at the user. Again there are different shades from light to darkish. The default ones work well as a contrast to the default blue, but as you can see they are too close to our copper shades to have any contrast in this style.
In this case we can just make them different shades of purple using the same method as above. in this case just drag the slider down to purple. Here is our first one, a light shade of purple (sort of violet?)
Remember to update, then do the same with accents 2 and 3 and you should now have different shades of purple, light, medium dark.
Save the style property and check out how your style looks now!
Your Colors 1 - 5 should look something like this:
Note that if you are unhappy with any of the colors, tick the box to the left that will now be labelled Revert customised value, click on save, redo it and then save again.
For this style you can keep the default accents as they contrast well with the grey. Or else you can change them as you like.
Although you as admin can choose any style, in order to allow your users to choose a style, you need to enable them for users
In the styles list you will see the default style and your two child styles. Enable them with the enable button:
Note that one style needs to be ticked. This will be the style that is enable when users first visit the forum. Users will be able to change this in the style chooser at the bottom left, but guest (or unlogged in users) will only see the ticked style.
NB: the terminology here is a bit confusing. "Default style" can either mean the blue style that you get with xenForo "out of the box" or it can mean whichever style is ticked as the style which guests now see by default. Sorry about that.
Please feel free to ask questions in the resource thread, good luck with your first custom xenForo styles.
Getting started
In this tutorial I'm going to show you how make child styles based on the xenForo default. The xenForo documentation has a good explanation about child styles. This will demonstrate how some aspects will be inherited from the default (the logo), others will override the parent (colors). First we will add our logo to the default theme, this will then show on any child styles. Don't be tempted to just upload your logo in the same place as the xenForo logo and rename it to xenforo-logo.png or you will get nagged in the file health check.Logo Dimensions and format
If your logo is anything other than a square or rectangle you will need to be a png file format to avoid a white square/rectangle around it. With xenForo 2.3 a webp image should also be fine. If your logo is square or rectangle then a jpg will also do.- Go to your admin control panel (ACP) from the Admin link at the top of the forum
- From the left hand navigation go to Appearance > Styles
- Click on Style properties at the right of the default style:
- Click on the third group down (Basic options) and you should see this:
- Click on the upload file icon and upload your own logo
- Add the dimensions in the boxes, ie width & height. These should just be numbers without the "px" suffix.
- Save it.
Ideally (for retina screens) it will look best if you also have a version that is twice the size of how you want it to display. This means it will be nice and sharp on a retina screen. So for example, if you have a logo that is to be displayed at 200px x 50px you will also need one that is 400px x 100px which you can upload in 2x logo field.
Child styles
We will now look at creating two child styles, (1) a jaunty copper coloured style and (2) a cool grey style. Both of these are light styles, currently dark styles are a bit more complicated I find. Having done those this will set you on the path to making your own styles. NB: you just might be able to do this on a mobile, but it probably won't be so easy.Copper
Stage 1: Main colors- Go to your admin control panel (ACP) from the link at the top of the forum.
- Go to Appearance > Styles in the left hand navigation.
- Click on Add style (at top right)
- You will be able to give it a name and a description if you like and also select a parent, in this case choose Default style. This will then be a child of Default style. Untick Allow user selection. By having that unticked for now, you as admin will be able to see the style and changes taking effect, but your users won't see it until you have finished working on it and enable it.
- Save the style (it will take a while as it is building the inherited templates.)
- Now click on the style properties for your new child style and then on the top group - Color palette
- You will see at the top if this Colors 1 - 5 which are different shades of blue (as used in the parent default style.)
- To override these inherited blue colours you need to change them - and in this case we are going to change the blue shades to reddish orange.
- Click on Color 1 which is a light blue, now just move the slider on the right until it is near the top somewhere between red and orange. No need to be too precise but you will see in the bottom left comparison box you have a light salmon color. It is very similar lightness to the blue because the small circle (top left) has not been moved and is still near white so this is blending a lot of white in with the red/orange.
- Click on the Update button
Now repeat for Color 2 which is slightly darker:
Don't forget to click on the Update button for each color. This updates the color but doesn't yet save the style...
Again, the salmon color has a similar shading to the original blue because the small circle is in the same place as it was. (NB: you can play with that, but for now best to leave it so all the oranges are similar in shade to the blues)
Now repeat the above for all colors 1 - 5. Again color 5 will have similar shading to the dark blue and will be a dark copper brown:
Check out the video:
Did you spot the deliberate mistake?
Update the 5th one and our main color palette is now complete:
You should now hit save to save the new colors to the style, go to your forum front end, choose this style from the style chooser at the bottom left and see how wonderful it looks. But we aren't quite finished yet.
Stage 2 Accents
Just below these five colours you will see the accent colors, which are there for certain elements that need to contrast with the main colors.
These are used for things such as call to action buttons like Post Thread that need to "jump out" at the user. Again there are different shades from light to darkish. The default ones work well as a contrast to the default blue, but as you can see they are too close to our copper shades to have any contrast in this style.
In this case we can just make them different shades of purple using the same method as above. in this case just drag the slider down to purple. Here is our first one, a light shade of purple (sort of violet?)
Remember to update, then do the same with accents 2 and 3 and you should now have different shades of purple, light, medium dark.
Save the style property and check out how your style looks now!
Grey style
This time we will make a grey style. The color change process is slightly different because all we are doing is converting the default blue to grey, rather than a color.- Create another child style as above and name it something descriptive such as "Grey"
- Go to its style properties and choose Color palette as above.
- Click on the Color 1 but instead of moving the right hand slider to a different basic color, grab the little circle and move it right to the left and skightly downwards so that instead of light blue you now have light grey.
- Click update for Color 1
- Repeat for the other four shades of blue. Keep an eye on the comparison box at the bottom left and use your judgment to make sure the new grey approximates the lightness/darkness of the blue.
- Click on save
Your Colors 1 - 5 should look something like this:
Note that if you are unhappy with any of the colors, tick the box to the left that will now be labelled Revert customised value, click on save, redo it and then save again.
For this style you can keep the default accents as they contrast well with the grey. Or else you can change them as you like.
Although you as admin can choose any style, in order to allow your users to choose a style, you need to enable them for users
In the styles list you will see the default style and your two child styles. Enable them with the enable button:
Note that one style needs to be ticked. This will be the style that is enable when users first visit the forum. Users will be able to change this in the style chooser at the bottom left, but guest (or unlogged in users) will only see the ticked style.
NB: the terminology here is a bit confusing. "Default style" can either mean the blue style that you get with xenForo "out of the box" or it can mean whichever style is ticked as the style which guests now see by default. Sorry about that.
Please feel free to ask questions in the resource thread, good luck with your first custom xenForo styles.
