Colors & Options Tool

Choose from the parameters below the Colors & Options you would like to define for your template. If you're not sure what any particular parameters means, just refer to the parameter legend for a more concise description.

  • Template Builder
  • Module Builder
  • My Swatches
  • Preview & Download

Layout & Display Options

Preview Server: Preview Server 
Joomla! 1.0Joomla! 1.5

Header Settings

Header Style:

Headline:
 
Slogan:
 

Layout Options

Column Layout Order:
 
Width Style:
 
Show Pathway/Breadcrumbs:
 

Column Widths

Left Column Width:
 
Right Column Width:
 

Notice: Click below to generate the above configuration code for Joomla! 1.0.x or 1.5.x. This will produce the code to be placed in your template file. If you're not sure what to do here - STOP - and please see the corresponding documentation.

Body & Page Element Colors

Page Colors

Body Background Color: [r]
Module Color 
Interior Background Color: [r]
Background Color 

Accent Colors

Primary Accent Color: [r]
Primary Accent Color 
Secondary Accent Color: [r]
Secondary Accent Color 

Border Colors

Shadow Border Color: [r]
Shadow Border 
Inner Column Border Color: [r]
Column Border 

Typography & Text Colors

Header Text Colors

Heading Font Family:

Default Font Family:

Header Text Color: [r]
Header Text Color 
Header Slogan Color: [r]
Header Slogan Color 

Text Colors

Default Text Color: [r]
Default Text Color 
Default Link Color: [r]
Link Color 
Default Link Hover Color: [r]
Link Hover Color 

Heading Text Colors

Heading (H1) Text Color: [r]
H1 Text Color 
Heading (H2) Text Color: [r]
H2 Text Color 
Heading (H3) Text Color: [r]
H3 Text Color 
Heading (H4) Text Color: [r]
H4 Text Color 

Navigation Colors & Options

Module Builder

Corner Radius:


Module Color: [r]
Module Color 

Background Color: [r]
Background Color 

Module Heading Color: [r]
Module Heading Color 

Heading Border-Bottom Color: [r]
Heading Border Color 

Module Text Color: [r]
Text Color 

Module Link Color: [r]
Link Color 

Bullet Color: [r]
Bullet Color 

Module Class Suffix:
Module Class Suffix 

Click below to generate a preview of your module. You can go back and adjust your settings from the Module Builder tab without losing your data. Once you are satisfied with your settings click the Generate CSS button below to get the CSS code. After you have the CSS, you will need to go back to the Module builder once more and click the generate images button. Follow the instructions on the next page. Confused? Read the documentation carefully.

Preview & Download

The swatches below are simply helper objects. While designing your template you may find yourself doing a good bit of copying and pasting. These swatches can serve as a quick reference or color palette to store your most used values.

[r]
[r]
[r]
[r]
[r]