XenForo Tutorial

How to customize "Elegance" XenForo style to use white header and blue (or whatever your primary color is) navigation background.

Requirements

There are separate tutorials for Elegance 1 and Elegance 2 styles.

Tutorial for Elegance 2

*coming soon*

Tutorial for Elegance 1

This is what default style looks like:



This is what modified style looks like:



This tutorial explains how to change style's layout from screenshot #1 to screenshot #2.

Changing width

First major difference: default style uses fluid width, support forum uses fixed width.

To change width go to style properties -> general -> page width controller, set width value.

Changing background and header

Next step is to change background. Background around forum is blue, but on support forum it is white with gradient.

Go to style properties -> general -> body, change background color value to e0e0e0 and in miscellaneous field append CSS3 gradient:

Code:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 180px);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 180px);


Then you need to remove blue background around forum. To do that go to style properties -> fixed width wrapper, uncheck option "Use fixed width wrapper".



Result will be something like this:



There are few issues to fix: header background is blue, there is white border around forum.

To remove border around forum go to style properties -> general -> content wrapper, change border color value to e8e8e8 in miscellaneous field replace box-shadow value with this:

Code:
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .2);
To change header background you need to do 4 things:

1. In style properties -> fixed width wrapper, check option "Use white background for header".

2. In style properties -> fixed width wrapper > header (with white bg) clear background value. To do that click background color box and check option "clear value". Also remove bottom margin value.

3. In style properties -> header and navigation -> header additions clear miscellaneous value.

4. In style properties -> header and navigation -> header clear background color value.

Changing footer

Changes above removed blue background from footer. It looks ugly with white background and CSS3 gradient.

Go to style properties -> footer -> footer background, change background color value to @primaryMedium

It will look close enough to style used on forum, but not the same. To make it look exactly the same, remove background image value, change miscellaneous field to

Code:
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .15));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .15));
remove top margin value and change top padding value to 5px.

Search box

To remove search bar simply uncheck option "Show search bar in header" in style properties -> search bar.

To change search placeholder icon to blue, check option "Use colored quick search placeholder icon" in style properties -> fixed width wrapper.
Problems

If you have any questions or ran into problems, please post your questions on support forum.