You are viewing this site in staging mode. Click in this bar to return to normal site.

iPages Support

How can we help you?

Designing Page Layout in iPages

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. iPages 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