posted time Created time: 2015-07-05 posted time Last updated time:

Header component for CMS Template

The Header component is one of the common parts used in all of the templates. When you start a new website, you have to customize the design of this part.

The appearance and usage of Header component

The header part is used in the all of CMS Templates. Therefore you have to change the design before start a website.

The Appearance of the default header part is below.

Default header

The default header is very simple. Therefore you can customize it easiy.

Customise the Header when you start a new website

The header part is common parts. All of the templates uses this parts. Therefore once you change the design of this component, all of the header design is changed.

The design of the header is essential for branding the website. Following factor is essential to build brand image.

  • Logo image of the website
  • Brand color of the website

The goal of design is to make visitors recognize your website. You had better make differentiated design so that when visitors visit your website again, then they can remember that they have visited last time.

Source code of the Header component

The source code of the header component consists of Html code, server side program, Style Sheet, and image resources.

The default image resources are to be replaced by your own logo.

The design of this component is to be replaced by your own design.

Html code

The Html code of the header component is below.

When you create a new website, please customize the source code of this Html. When you use image resources, you can upload own images.

The menu of the header is created by the "@tree_model" variable, which is array of pages. This variable is created in the server side program.

And this variable contains child pages in the each page element. The default template creates links to the top of the main pages which are top of the main categories.

Server side program

The server side program of the header is below.

This program is to create the "@tree_model" variable, which is used in the Html code, by following operations.

Get current tree path from database

At first, get the path and page object of current page from the database. The "tree_model" is database table which is used by the tree structure handling engine of this CMS.

Get path for site domain

After getting the page object, make the variable meaning current path and the domain's root in the tree structure engine.

Get top category pages

By SQL query, get the top level category pages, which are main contents.

Get children for the top categories and set class

After getting the top level pages as array variable by SQL, get children of these pages, set class of the page, and calculate the url of the pages.

The class is "current", if the current page is the children of the page, otherwise it is blank string value.

Style Sheet

The Style Sheet of the header component is below.

This Style Sheet does not default image resources. Therefore when you customize the design, please change the image resources, too.

Image resources

The default image resources are in the image resource section of the Html5 Template Editor.

image resources

You can delete and upload your own new images from this console.


Go to Top