XF 1.X HOW TO: Change/Add colors on Modest

Russ

Pixel Exit Staff
#1
Modest is coded extremely effecient to where it's powered via CSS3 Gradients. I've put in the ability to customize/add your own main colors very easy.

Changing your primary color:

By default it ships out with the blue gradient and by changing a certain style property it changes across the entire style. The highlighted areas(blue with red outline) would be changed upon updating the style property.

modest2.png


To change this look browse to: Appearance -> Style Properties -> Make sure you're editing your style, and choose "Modest Properties". You'll see this screen:

modest1.png

In the screenshot above the top property "Main Gradient" is what's active across the entire site.

Modest Header Gradient controls the black gradients at the top of the style.

Modest Header Height controls the height of the black gradient in the header(you may need to increase this depending on your logo height/advertisements.

Finally... you'll see a lot of "Color" Gradient References. I ship these out by default but they don't control anything. You can use these to copy the entire contents up to the Main Gradient(top property). Simply by copy the entire contents of a reference box into the top property you'll easily change the color scheme.


Adding a new color
By default the main gradient consists of the following:
  • CSS3 gradient,
  • Box shadox(inset)
  • Border
Creating a new color is simple with this tool:

http://www.colorzilla.com/gradient-editor/

You can create the gradient as you see fit and then copy the entire contents into the "Main Gradient" Style Property. That generator will not do the border/box-shadow though. I typically would use a darker color than your gradient for the border, and a lighter color than your gradient for the box shadow. If you need help don't hesitate to ask :).
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.