help.axcms.netAxinom Logo
Save Save Chapter Send Feedback

Changing design in Premium Template Project



There are 3 different types of templates with separate CSS files each:

  • Flexible Template
    Template with 2 level horizontal navigation.
    Width changes depending on display resolution.
    CSS file: flexible.css

  • Vertical Template
    Template with 2 level vertical navigation.
    Fixed layout width.
    CSS file: vertical.css

  • Standard Template (+Homepage)
    Fixed width template with 3 level dropdown navigation.
    Includes Homepage Template with a bigger content space.
    CSS file: old.css

Applying Template

When you create a new page simply select the relevant template from a dropdown menu in the General properties box.

It is also possible to change template for already existing pages, but since template placeholders may differ, content of pages could be lost.

Changing the logo

To replace logo you need to replace logo.png file (..\templates\images\logo.png) with a new logo image. To fit better a new image must have a transparent background. Important that the file name should stay the same (logo.png), otherwise deeper changes in the project are needed.

 The default logo height is 44px, for a bigger logo stylesheet of the corresponding template must be adjusted.

Changing a color scheme

Background Image

To change background image the following images must be replaced with a new ones:

  • Flexible Template – flex_bg.gif (..\templates\images\flexible\flex_bg.gif)
  • Vertical Template – vertical_bg.gif (..\templates\images\vertical\vertical_bg.gif)
  • Base Template – bg.jpg (..\templates\images\bg.jpg)

Solid Background

For solid background color the corresponding CSS file (..\templates\CSS\...) must be adjusted

Default code 

   background-image: url(../Images/Flexible/flex_bg.gif);
   background-repeat: repeat-x;

New code

   background-color: #00000; /*New background color HEX code*/

Main Navigation

To change color of the main navigation you need to replace navigation background images with a new ones or adjust color of the current images.

Flexible Template:

flex_navi_left.png (../Templates/Images/Flexible/flex_navi_left.png) – Left corner background
flex_navi_bg.png (../Templates/Images/Flexible/flex_navi_bg.png) – Center background
flex_navi_right.png (../Templates/Images/Flexible/flex_navi_right.png) – Right corner background

color for hovered and active navigation item could be adjusted through the stylesheet

.flexible_first_level a:hover /*Hovered navigation item*/
   color: #ffffff !important; /*Font color*/
   background-color: #b9b9b9; /*Background color*/
a.flexible_first_level_flexible_active /*Active navigation item*/
   color: #cc0000 !important; /*Font color*/
   text-decoration: none !important;
   font-size: 16px;
   display: block;
   float: left;
   background-color: #f1f1f1; /*Background color*/

Vertical Template

vertical_navi_left.png (../Templates/Images/Vertical/vertical_navi_bg.png) – Navigation background
vertical_navi_hover.gif (../Templates/Images/Vertical/vertical_navi_hover.gif) – Hovered navigation item
vertical_navi_active.gif (../Templates/Images/Vertical/vertical_navi_active.gif) – Active navigation item
vertical_navi_hover_active.gif (../Templates/Images/Vertical/vertical_navi_hover_active.gif) – Hovered active navigation item

Standard Template

top_navigat.png (Templates/Images/top_navigat.png) – Navigation main background

a.firstlevel_active:hover, /*Hovered navigation item*/
background-color: #ebebeb !important; /*Background color*/
text-decoration: none;
color: #767676 !important; /*Font color*/

Fonts and Styles

Default font for all templates is Arial. To change it the corresponding css file must be adjusted.

font-size: 12px; /*Default font size*/
line-height: 18px; /* Default font line-height */
   font-family: Arial; /* Default font style*/
   color: #666666; /* Default font color*/

New font styles could be applied also to the following classes:

H1, H2, a, .pagetitle, .subtitle, .headline, .highlight