ocPortal Tutorial: How to create a fixed-width layout
Written by Chris Graham, ocProducts
A topic of regular disagreement in web design is whether 'fixed-width' designs or 'fluid' designs are better. A fixed-width design is one where the horizontal width of the website is fixed, so that it doesn't change when different resolutions are selected.Proponents of fixed-width argue:
- that fluid designs (non fixed-width designs) can not function well, because things will always break down when the width significantly exceeds what was tested.
- that fixed-width designs are graphically easier to achieve.
- that fixed-width designs are easier to read from.
- that fixed-width designs are more attractive, because it allows more artistic control.
- that fixed-width designs make unreasonable assumptions about how web sites should be viewed; for example, PDAs would fail to have enough width for a typical fixed-width design yet are prevented from automatically performing adjustments
- that people with large resolutions can always make their browser window smaller
- that using fixed-width is done by those that are applying traditional design skills to the new online medium without adjusting them properly for that medium.
Table of contents
ocPortal
ocPortal is designed to not use a fixed width, as we avoid making assumptions and follow all web standards, but it is possible to re-theme ocPortal to make it use a fixed-width. I believe there are merits with both, and that you should carefully consider your audience and priorities when choosing which kind of design to use.ocPortal includes a theme wizard which will make it very easy to generate new colour schemes - this is what we expect the majority of users to use to retheme their website. Advanced tools, advanced documentation, and a very robust mature framework, are provided to allow complete redesigning to be possible, but it is inherently complex and requires a good understanding of the technology being worked with. As ocPortal is an architectural system, made up of an elaborate construction of shared and carefully tailored components with very strongly defined behaviour, it unfortunately just isn't possible that we could implement a WYSIWYG style editing interface for ocPortal. Therefore to make major changes it is necessary to be able to manually re-craft templates (written in XHTML and Tempcode) and CSS as we do, and this requires expertise. This expertise isn't based around our own technology (it is based around the technology of the W3C - the web standards organisation), and thus isn't something we are responsible for supporting, although we do publish tutorials to assist in it.
If you want a very customised website layout, but do not have the skills and the experienced, or the time to invest obtaining, then we would recommend contracting out ocProducts to perform any necessary customisation work.
The rest of this tutorial will focus on a step-by-step solution to achieving a fixed-width layout. The solution is not officially supported and may not work perfectly. This is because ocPortal is designed on the assumption of a minimum 1024x768 resolution, and creating a smaller fixed-width subverts that and hence goes against our assumptions (it's necessary for us to make assumptions to achieve an attractive default interface).
ocPortal's layout is heavily based on CSS positioning, and hence this must be understood and worked with in order to make the layout work - it is definitely not a table based layout. Unfortunately CSS positioning is a very complex thing that requires experience, but it's also the only standards-compliant solution that ocPortal could use.
For this tutorial we will assume we wish to have a fixed-width layout of 800px, and have a top image banner spanning the full width of the website.
Step-by-step: fixed-width
To quickly get a fixed-width layout, we could add this to the 'body' class in global.css:Code
width: 800px;
position: relative;
margin: 0 auto 0 auto;
Fixed-width layout in action |
As soon as we run into the Admin Zone or CMS zone we run into problems. This was expected, because a width of 800 is significantly less than the minimum of 1024 that we designed our interfaces for. Honestly we're going to inevitably have lots of problems like this to fix, but that's just life - we're breaking assumptions here. We can mitigate our problems, however, by only using a fixed-width in the user portion of the website, and using the full width for the administrative parts.
To do this we'll need to rank up our sophistication. By defining all our CSS in global.css we are applying it to all of ocPortal, unconditionally. What we need is to be able to use some Tempcode to programmatically tell ocPortal where to apply our CSS. Tempcode can be used in templates, and CSS properties can be defined inline in templates using the HTML 'style' tag.
We need to be applying inline CSS to the HTML 'body' tag, and therefore the template that we need is 'HEADER.tpl'. In there the 'body' tag initially looks as:
Code
<body onload="Javascript: scriptLoadStuff()">
Code
<body onload="Javascript: scriptLoadStuff()" style="{$?,{$OR,{$EQ,{$ZONE},adminzone},{$EQ,{$ZONE},cms}},,width: 800px; position: relative; margin: 0 auto 0 auto}">
Seemingly confusing? Yes. But it works nicely! All it is saying really is "if our zone is equal to 'adminzone' or equal to 'cms' then we don't output any contents to the style attribute otherwise we implement the contents to make it fixed width".
Step-by-step: top banner
Now that we have our fixed-width, we just need to get our banner sorted out to get our basic draft layout done. You'll still have width assumption problems to resolve, but you can tackle each of those individually as they come.Before we starting writing code, let's sort out some ocPortal terminology. At the top of ocPortal there are provisions for:
- a site logo
- the banner rotation
To change ocPortal's logo to the banner image that we want, hold down ctrl+alt+shift and click it. This will take you to the theme image editor and you can just upload your own replacement image (a much larger image).
This will inevitably make a mess as there's no space for the image, so now we have to do some template editing. The default logo/banner are defined in the 'TOP.tpl'. Template. What we can actually do is just edit that template and totally wipe out everything except this bit:
Code
<img usemap="#logomap" src="{LOGOURL*}" title="{HEADER_TEXT*}" alt="{HEADER_TEXT*}" />
Because we removed the zone navigation menu, it's a good idea to put that somewhere else, lest your members have trouble finding their way to their Personal Zones. ocPortal actually comes with a 'side_zone_jump' block that you can place on one of your panels - this will provide an excellent substitute. Otherwise you could keep the same kind of zone navigation menu as is there by default, but just redesign it to be placed underneath your banner (for example). I don't want to tell you what to do exactly, because it's your choice - ocPortal is your toolkit, to do with as you please.