Designing Page Layout in KhooSeller
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:
| Section | CSS Full Width Identity | CSS Inner Identity | CSS Box Identity |
| Header | #header | #header-inner | #header-box |
| Horizontal Navigation | #h-nav | #h-nav-inner | #h-nav-box |
| Body Header | #body-header | #body-header-inner | #body-header-box |
| Main Content | #main-content | #main-content-inner | #main-content-box |
| Body Footer | #body-footer | #body-footer-inner | #body-footer-box |
| Footer | #footer | #footer-inner | #footer-box |
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:
| Sub Section | CSS Identity | CSS Inner Identity | CSS Box Identity |
| Central Content Column | #c-col | #c-col-inner | #c-col-box |
| Left Column | #l-col | --- | #l-col-box |
| Right Column | #r-col | --- | #r-col-box |
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:
| Sub Section | CSS Identity |
| Content Header | #content-header |
| Content Body | #content-body |
| Content Footer | #content-footer |