Designing for an OM4 Website

You can modify the look and feel of an OM4 website using the Self Managed Design features.

Basic Design

Basic features can be used by anyone. Advanced features require some additional knowledge, for example, some HTML or being able to prepare a graphic.

Basic Elements

Use Dashboard, Design, Site Design to style a wide range of elements simply by changing parameters. The settings you can change include:

  • Titles – font, font size, color and location of site Title and Tagline
  • Headings – font size, color, line height, space before/after – for H1, H2, H3 and H4 elements
  • Page Text – font, font size, line height, color, link color, hover color
  • Block Quotes – color, background color, justification, style, margins and padding
  • Sidebar – font size, line height, side border (between content and sidebar), title color, title background color, bullet style
  • Footer – text color, link color, text for footer.

Menus. Defaut menus are configured for each new site using sidebar navigation. Custom menus give additional control with basic HTML (easily learnt, instruction provided in the Site Design screen itself). Once you turn on Custom Menus, you can use Site Design parameters to set font size, color and item separators. Using Dynamic Dropdown menus is an advanced task. Additional settings need to be specified, and in some cases custom CSS rules may be required to get exact formatting results. See below for more details.

Sidebars. You can change what goes in to your Sidebar(s) using Widgets. These articles explain how (note: most widget techniques are basic, however some are advanced):

Advanced Design

Creating Artwork

You will need to have access to graphics software to create new graphics files, or crop / resize existing graphics files:

  • New graphics: for the most flexibility, professional designers will usually have Photoshop or other professional tools. Mac users with Keynote (from iWork) can create graphics as slides, export them as TIF files and crop with a resizing tool.
  • Cropping graphics: you can also purchase stock images from sources such as iStockPhoto and simply crop or resize to your requirements. This is easiest if you are just beginning.
  • Graphics tools: we have provided links to web graphics tools for Mac and Windows, as well as sources of images.

OM4 Block Model

Many websites use a basic block model to underpin the site layout. A strong underlying block model allows a wide variety of designs.

You can view OM4 websites to understand the different layout options that can be achieved from the following lists of sites:

OM4 websites are built around this Site Layout diagram.

The OM4 theme breaks up your site into a block model. This allows you to prepare a site design and slice it ready to apply to an OM4 site.

There are four areas used to create the core site design:

Header Displays a graphic once at the top of every page, aligned to left/center/right and top/middle/bottom. The Title and the Tagline (user definable in Dashboard, Options, General) will be displayed in the Header area. Site Design parameters allow you to position the Title and Tagline by X,Y co-ordinates. You can set a CSS border to appear around the Header block.
Page Displays a graphic or a color in the page area below the Header. If using a graphic, it can repeat vertically (the usual setting), horizontally or both.
Footer Displays a graphic at the base of every page.
Background Displays a graphic or a color in the browser background area outside the Page. Can repeat horizontally, vertically or both.

The example shows 4 pieces of artwork being used to create a site design:

OM4 Sample Website Design

Site Design parameters

You can adjust many aspects of the site design by logging in to the site and using the Dashboard, Design, Site Design screeen.

Site Design parameters let you control many common settings such as font, font size, font color, borders. All parameters are automatically converted into CSS rules, so they are usable for any web browser. You do not need to know CSS to use the parameters (although you can specify additional CSS rules if you want to).

File Uploads

You do not need to use FTP. All graphics are uploaded using the standard Wordpress Upload facility available when editing any Post or Page. Graphics can then be referenced from the /files directory, or as an absolute reference. File names and locations can be reviewed under Dashboard, Manage, Uploads.

Page Width

Default

In most situations, you can simply use the default page widths for a 1 sidebar (760px wide) or 2 sidebar (984px wide) layout. To use these settings:

  • Open Dashboard, Site Design
  • Go to the very bottom of the page and click the appropriate button
  • Reset All Settings to Default (1 Sidebars) – this will set up for a 760px wide page
  • Reset All Settings to Default (2 Sidebars) – this will set up for a 984px wide page

Using a 760px wide page is a very common setting to allow visitors with a screen resolution of 800px by 600px to see your page without any horizontal scrolling. OM4 estimates over 99.5% of web users have a screen resolution equal or greater than this.

A 984px wide page is designed to be visible without horizontal scrolling for screen resolutions 1024px wide. OM4 estimates over 95% of web users have a screen resolution equal or greater than this.

Custom page width

You have full control over page width, and Site Design parameters allow you to set an exact value (in pixels) for the width of your overall page and each of the components within it.

If you try to set your Page Width too low, you will get a warning. Increase it until the warning goes away, or read on. Your page needs to be wide enough (in pixels) to allow for all of your items. If you are getting warnings about your page not being wide enough, this is how to figure out the width you need.

These are the Site Design settings that affect page width (showing the default settings on site creation):

  • Content Padding (45px by default) on the left
  • Content (450px by default)
  • Sidebar (200px by default, made up of 180px for the sidebar and two lots of 10px sidebar padding)
  • Sidebar2 (same again if you’ve got two)
  • Content Padding (45px by default) on the right

You need to allow for a gap between the Content and the Sidebar – the total Page Width less all of those elements is what creates the gap. Some browsers need more than others, so usually allow at least 20px.

Here are the default settings – 1 sidebar shown first (2 sidebars in brackets if different)

  • Page Width: 760 px (984px)
  • Content Width: 450 px (474px)
  • Content Padding Outer: 45 px
  • Sidebar Width: 180 px
  • Sidebar Padding Left: 10 px
  • Sidebar Padding Right: 10 px
  • No of Sidebars: 1 (2)

Changing the Number of Sidebars

You may use 1 or 2 sidebars to apply to default layouts. There are Page Templates available (Article, Splash) that display a page without any sidebars.

If you are using the supplied theme artwork:

  • Reset: go to the bottom of the Site Design page and click Reset All Settings to Default (2 Sidebars).
  • Add sidebar widgets using Design, Widgets
  • View your site.

If you want to use your own custom artwork and possibly custom page widths:

  • Upload your artwork and update the image fields – Background Image URL, Page Background Image URL, Header Image URL, Footer Background Image URL.
  • Change the Number of Sidebars parameter from 1 to 2.
  • Save your settings.
  • Add sidebar widgets using Design, Widgets.
  • View your site.

If you do set up for 2 sidebars and view your site before adding widgets to both sidebars, it will look a little strange. Just add widgets to both sidebars and all will be fine.

Menus

A variety of menu styles can be used. Navigation menus can appear in the sidebar, in a menubar (below the header) or in both places. Refer to the support article on how to Configure Menus.

To create a graphical background for a menu bar:

  • in your artwork, include the menu bar background in the Header Image
  • in Site Design parameters, specify a negative value for Margin Top for the Menu Bar so the menu text sits over the bottom of the Header.

This applies whether you are using a Custom Menu or a Dynamic Menu.

Site Title and Tagline

You can use text or graphical elements for the site title and tagline:

  • Text Title and Tagline: The content of text based titles and taglines are able to be configured by the site owner using Dashboard, Options, General. The font, font size, colour and X,Y co-ordinates (relative to the Header) are all configurable using Dashboard, Design, Site Design. A text title and tagline are rendered with their own class and so may be further styled by the designer. You will need to specify any non-default settings to the site owner.
  • Graphical Title and Tagline: If the site title and/or tagline is included in the header or other artwork, display of the text title and tagline can be turned off using Dashboard, Design, Site Design.

Text titles and taglines will be able to be read by search engine spiders – they use paragraph tags with their own class, and are not included in either title or heading HTML tags. Graphical titles and taglines cannot be read by search engine spiders.

If you want to use a text title and want to float the title above/below your header image (rather than over the top of it), you should:

  • Increase the Header height so that it is approximately 20 to 30 pixels higher than the height of the header image. This creates blank space in the Header (either above or below the header image, depending on whether you position the image at the top or bottom of the header).
  • Set a negative Y co-ordinate to position the Title text above the header image, or a high positive value Y co-ordinate to position the Title text below the header image.

Splash Pages

By default OM4 web pages have 1 or 2 sidebars displayed.

Splash Pages (that is, pages featuring a ’spash’ graphic) can be created. Graphical splash pages (without body copy) are not recommended for a site home page if search engine rankings are important. However it is possible to create a splash page with graphics and text that looks good as well as provides information for visitors and search engines.

There are several Page Templates available that give a graphic designer varying levels of control over the display of standard page elements:

  • Default – a page with margins and 1 or 2 sidebars (as specified in Site Design). Content is displayed in a narrow column alongside sidebars.
  • Article – a page with margins but without sidebars. Content is displayed in a single wide column.
  • Splash Page – a page with just the header, menus and footer. No sidebars, no margins.
  • Raw Splash Page – a blank page. No headers, menus, sidebars or footer.
Template Header/Menu/Footer Headings Margins Sidebars
Default Yes Yes Yes Yes
Article Yes Yes Yes No
Splash Yes No No No
Raw Splash No No No No

To use a splash page template for the site home page, use Dashboard, Manage, Pages to edit the home page. In the Advanced Options section, update the Page Template from Default to Splash or Raw Splash.

We have always provided the Article page template. That page template displays your web page without any sidebars, which is good if you want to avoid any distractions.

XHTML and CSS – Custom CSS Rules

OM4 sites use XHTML 1.0 Transitional. XHTML and CSS validate for the core theme.

Site Design parameters allow you to add custom CSS rules that will override any of the automatically generated CSS rules. So if you know how to write CSS rules, you can use Custom CSS rules to place your own images and control just about all aspects of the design.

For any work with websites and CSS, you’ll find life a lot easier if you use Firefox and one (or both) of Chris Pederick’s Web Developer Toolbar or for the more technical Firebug.

Flash files can be uploaded and displayed. Note that using Flash presentations as the home page can seriously compromise search engine outcomes.

Fixed Height designs

Some designs are based on the concept of navigation placed underneath a fixed height page area. In general terms, these designs can severely restrict a client’s options in the future if it means that pages or posts with more text/images push the navigation ‘below the fold’. The OM4 theme does not support the creation of scrollable regions to allow page content to scroll while leaving a fixed navigation block below.

In summary, if you want to use a fixed height page design, the OM4 template is not a good fit.

Design with a sidebar/siderail

OM4 websites (and most WordPress websites) can be quickly extended to support client requirements using sidebar widgets. You can apply styling to sidebars and sidebar widgets to achieve a wide range of looks.

Clients are able to add new widgets to sidebars and reorder widgets with sidebars to support future requirements. This can be a very quick way for a client to expand from a simple brochure style website to a far more interactive website.

If your design does not make allowances for sidebars, your client could be restricted in what they can do.

Sidebar widgets are used to support a wide range of functions such as:

  • shopping carts (automatically display when products are added)
  • blog subscriptions (RSS and email subscriptions for blogs)
  • recent posts
  • recent comments
  • twitter integration
  • and many others

WordPress plugin developers are constantly developing new plugins, and many of them implement sidebar widgets to provide easy access for website owners.

The OM4 theme allows for individual pages to turn off sidebars (or for 2 sidebar layouts, to suppress the left or right sidebar). So it is very easy to have the Home page layout without a sidebar, but to have inner pages display the sidebar. Likewise, special purpose pages such as Galleries can also have the sidebars suppressed.

In general, designs that allow for sidebars offer a lot more flexibility for clients.