UNIVERSAL Solution and Modifications

The template is based on unlimited combinations of basic elements that are designed for universal application. The main features are:

  • the combination of 3 different images in backgrounds
  • the possibility to set the light/dark/black/white style of the page or elements and its combinations
  • the utilizing of transparency on individual elements
  • the simple settings of column style and dimensions
  • the possibility of free color modifications of each box individually

Background & Page Style Settings

background settings You can combine the 3 backgrounds and page style to change the appearance of your website:

[1: HTML tag] background (image+color: gradient...)
[2: BODY tag] background (image: picture, decorations...)
[3: DIV class="back"] background (image: shadow, decorations...)
[4: PAGE] with light/dark style defined by class on BODY tag

You can see some prepared examples here:

HTML BODY DIV.back
background image
background color		 background image
class light/dark		 background image
gradient_blue_sky.gif
(top repeat-x)
#333333 		blue_sky.jpg
(top center no-repeat)
class="light"		 bubles_white.png
(top center no-repeat)
gradient_gold_sky.gif
(top repeat-x)
#333333 		gold_sky.jpg
(top center no-repeat)
class="light"		 ornament_white.png
(top center no-repeat)
gradient_lightblue_sky.gif
(top repeat-x)
#333333 		lightblue_sky.jpg
(top center no-repeat)
class="light"		 bubles_white.png
(top center no-repeat)
gradient2.gif
(top repeat-x)
#333333 		ornament_white.png
(top center no-repeat)
class="dark"		 shadow.png
(top center no-repeat)
gradient3.gif
(top repeat-x)
#1BDBEC 		bubles_white.png
(top center no-repeat)
class="light"		 shadow.png
(top center no-repeat)
gradient4.gif
(top repeat-x)
#1BDBEC 		none
-
class="light"		 shadow.png
(top center no-repeat)

Settings of Column Lines

You can set the lines between the columns by simple class on [div class="boxes"] tag using the next class for example [div class="boxes lines_x1x1x"]. The lines are designed for light and dark page style. The classes of all column type line settings are:

column type class="lines_[mark by table]" - X: column, 0: no line, 1: line
2 columns x1x
3 columns x1x1x x1x0x x0x1x
4 columns x1x1x1x x0x1x1x x1x0x1x x1x1x0x x0x1x0x x0x0x1x x1x0x0x

Boxes Style Settings

Boxes styles One of the great features of this template is the simple modification of boxes - this means dimension settings and color settings that you can set independently for each one box (sidebar boxes colors inclusive). The height of the boxes will be automatically sets by the contents of the heighest box in row by using CSS (not javascript functions).

These boxes are designed to place in the full width sections of the page (except sidebar boxes) and the basic element colors are dependent on the box color. If you want to try to change the box color here, we recommend to use FireBug tools accessible for FireFox browser.

Designs of all boxes are in the boxes.psd file which you'll get with this template after the purchasing of it. Here are examples of all boxes styles with their classes defines dimensions and colors:

[div class="box box_1-1 white"]
[div class="box box_full white"]

[div class="box box_3-1 white"]

[div class="box box_3-2 white"]

[div class="box box_4-1 white"]

[div class="box box_4-3 white"]

[div class="box box_2-1 white"]
[div class="box box_4-2 white"]

[div class="box box_2-1 black"]
[div class="box box_4-2 black"]

[div class="box box_4-1 black"]

[div class="box box_4-3 black"]

[div class="box box_3-1 black"]

[div class="box box_3-2 black"]

[div class="box box_1-1 black"]
[div class="box box_full black"]