Caution: We do not recommend changing anything unless you know exactly what you're doing. This part is usually completed by your designer.

On this page:

• Understanding Basic Page Layout
• Browser Settings
• Customising Layout Sections using CSS
• Understanding Main Content

Customising Layout Sections using CSS

Using relevant identities, content for each layout section and sub-sections can be styled using CSS in Design > Stylesheets.

It is advisable to make any CSS styling across a site general rather than specific. This keeps styled content much easier to find when editing and means there is less of an impact on a sites loading speed. KhooSeller is designed so that minimal manual CSS is required to design an effective and unique webpage. 

Each layout section has three CSS identities. The outer identity is the section (full width) identity, which encloses the section inner identity. The section inner identity encloses the third and final identity, the box identity.

The outer identity is used to style the full width background image/colour for the section as set in Page Layout.

The section inner identity is used to make the section obey the browser width (and to style the background image/colour if applicable) as set in Page Layout.

The box identity is used to style content, such as text and images, within the section.

The identities for each layout section are shown below:

Understanding Main Content

The layout section, "Main Content" is broken down into three horizontal sections: one central content "column" and two optional left and right columns.

Inside "#main-content-box" are each of these three columns. The identities showing the breakdown of the sub-sections are shown below:

In addition, the Central Content Column is broken down into three vertical sections: the central content body and an optional header and footer.

Here are the identities for these sub-sections: