Evolve Style

Evolve Style:​

Evolve is a style that can dramatically change the look of the colors using a single style property. It comes with multiple color options that you can take advantage of.

You can purchase Evolve here.

Change the color scheme​

Assuming you've already installed your style, you need to visit the style properties section in the XenForo admin panel.
Go to Style properties -> Evolve properties. Make sure you have your child style selected, you should see:


The Main Color dropdown will control the overall color of the style. Try changing the color and viewing your forum. We offer multiple color schemes which you can see at the bottom of this page.

Other properties​

Page background image: We provide a few images that can be loaded on the background. To use your own simply set the dropdown to "Use my own" and configure your background in the style property: pageBackground (use the admin search in the top right to find it)

Opacity: This setting controls the general opacity of the content background. The lower the number goes, the more opaque the content background goes. Setting it to 100 will make it so there's no opacity what so ever.

Custom Accent Color: By default each "Main color" comes with a pre-defined accent color. By choosing your own color here you'll override the pre-defined option that ships with the style.

Texture: Setting a texture will simply add a transparent-like background texture to various content areas, giving it a nice unique look.

Setting up multiple colors​

Offering multiple colors to your users is easy to set up and maintain. You'll need to utilize what's called "Child Styles". Your structure will look something like this:


Essentially you have the main parent style Evolve that you never edit. The "My site name" will be set to the default color scheme you want to show to everyone and will have the bulk of your changes. From there you'll create new styles as a child of your "My site name" such as "My site color 2" and "My site color 3" which will simply change the "Main color" option found in the screenshot above.

To make it even easier for your users to switch styles, you can even configure our light switch feature.

Colors​

Color 1



Color 2



Color 3


Color 4


Color 5


Color 6


Color 7