XenForo Tutorial

This tutorial explains how to use ColorizeIt with XenForo styles.

Requirements

In order to use ColorizeIt you must be able to download selected XenForo style, which requires you to have license for that style.

Changing Colors

ColorizeIt works by changing hue color component and slightly altering lightness and saturation. It makes it possible to change for example blue color to green or red, but it is not possible to change black to white because such color change cannot be achieved by changing hue component.

Editor is very simple: on left side you see sliders where you can change colors, on right side you see sample that shows you what style will look like after color change:



To change colors move sliders (arrow #2 on screenshot), on right side you will immediately see result.

Advanced Tips

If you have made error, you can undo your change by clicking "undo" button. It will show you recent color changes and you can select which change to revert to. To completely reset your changes click "reset colors" button below editor.

You can change not only hue, but saturation and lightness components as well. To switch to saturation or lightness editor mode, click "lightness" or "saturation" button above slider. To return back to hue mode click "hue" button:



It will change color palette in slider to grayscale image. Move slider to left to reduce lightness or saturation, move slider to right to increase it. Increasing lightness or saturation by too much might result in ugly colors!

If you want to change color to specific color, you can do that by clicking "match color" button below slider. It will allow you to enter hex value of color you want to change current color to. After using color match function you might want to adjust lightness or saturation components.

Downloading Style

When you are done changing color scheme, next thing to do is apply it to your style.

Scroll down to "Download Style" section of page, which is below sliders.



If you want to install several color schemes of same style, you need to change style name and images directory.

Option "Style XML file contents" lets you select what style XML file will contain: all templates or only modified templates. Select second option if you are installing your color scheme as child style of default color scheme to minimize XML file size. Usually you do not need to change that option.

Then you need to submit zip file for ColorizeIt to parse. Download default version of style you are editing from this website, on ColorizeIt scroll down to "Upload Files" section.

Then click "download style" button. ColorizeIt will parse zip file you have uploaded and send you back zip file with different color scheme. Unpack it and install style on your forum.

Problems

If when trying to download style you are getting time out errors, it is ether because of slow internet connection or browser error. Try a different browser.

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