Theme Variations

Written by Administrator

Jul152010

Democontent - Features

There are a multitude of colour options available in the Element Joomla Template. The template provide the ability to mix six different areas of the template using 32 different colour swatches plus being able to choose from one of the twelve colour hilites available that determine heading, link and button colour.

The options for controlling the appearance of this template include

• Hilite eg links, buttons and menu active states
• Background colour
• Banner row colour
• Top Area - Area that contains the search and inset positions and sits above the banner row.
• The very top edge of the browser window - this is just a 4px band of colour but can be used to create some dynamic effects.
• The first menu background on the main drop downmenu.
• The second menu background on the drop down menu.

Creating your own theme is as simple as combining the seven elements above.

The Element template uses only one core css file (css/theme.css) plus a hilite file (css/hiliteRedBlue.css) to produce the main styling. The css that controls the last six options in the settings above is inserted dynamically into the head of your template.

If you decide to take control of the styling of these areas by yourself then all that is needed is to set the option in the drop down list to '- none selected -'. Doing so will prevent  the css from being loaded automatically and allow you to insert it manually into either your theme.css, hilite[yourhilite].css file or in a custom.css file.

The css that you would need to do this with looks like this:

body {background:#272F39 url(/dev/production/templates/jbelement/images/pattern/blueGrey.png) !important}

.bannerRow .containerBG {background: url(/dev/production/templates/jbelement/images/pattern/blue.png)}

.topRow {background: url(/dev/production/templates/jbelement/images/pattern/black.png) repeat-x left -6px}

#topHeader {background: url(/dev/production/templates/jbelement/images/pattern/charcoal.png) left top}

#nav li ul {background: url(/dev/production/templates/jbelement/images/pattern/brightBlue.png) left top}

#nav li ul ul {background: url(/dev/production/templates/jbelement/images/pattern/deepBlue.png) left top} 

Please view a selection of themes variations that we have created below.

Element Greens

ElementBlueBrown

ElementBlueCharcoal

ElementBlueGrey

ElementBrown

ElementExecutive

ElementMoreGreens

ElementPurples

ElementReds