Tutorial: Coding a complex design using the WordPress Headway framework

For the uninitiated, Headway (affiliate link) is a WordPress theme framework. It is unique though in that it provides a visual editor – like WYSIWYG – for editing a lot of your CSS. It also provides several content display types (called leafs). I use it because it saves time and effort. You can generate standard sites very, very quickly with little to no coding.

You can also do complicated designs. Like this site. They do take longer still, but still save time.

Unsurprisingly, a lot of people have asked how I did this site, which is rather unconventional compared to a stock standard Headway site. So I’d better explain.

Rather than writing an actual tutorial, I will instead dissect the CSS, because that’s where all the magic happens. Bear in mind too, there is no custom PHP at all. That’s one of the great things about Headway.

In this explanation, I’ve sometimes had to break lines of code so they’d fit on the page. Where I’ve done that, I’ve indented them eight characters.

For this site I needed to create three different page layouts
- All blog type pages (posts etc)
- the front page (a page type)
- all the other pages (page types)

If you read my recent tutorial on custom classes, you’ll see them in use here. Not only do they allow you to assign styles to multiple elements at once, but they also make your code much more readable.

I must add, when you code using positioning, your page can look quite scrambled in the Visual Editor, so you will need to proof it in separate browser window.

In this tutorial, I will only show css code that deserves explanation.

Related posts:

Pages: 1 2 3 4 5 6 7

Darren

Hello Chris

Thanks so much for a great post..Very easy to read and well explained

Thankyou
Darren
http://bestatmysite.com Mark ‘MKWeb’

Hello Chris,
I have a question about the ‘absolute’ positioning.
What happens when the visitor is using a widescreen monitor? I have seen some pages get really scrambled on them using this approach in a static HTML page based on CSS.
Will the wrapper automatically update to the widewscreen or remain a set width?
Chris

Hi Mark,

A wide screen should have no affect on this site (or any Headway sites that retain the standard framing) other than giving very large borders (body background).

I always use fixed layouts that float in the centre of the screen. And Headway does this by default for the #wrapper and you can edit that within the Visual Editor. (For anyone who’s wondering, the trick to get a div to centre in its parent is to give it a fixed width and set “margin:0 auto”.)

Headway does also have an option for fluid headers and footers, but it still positions them and the wrapper in the centre of the page (a look that is quite popular at the moment).

However, what is a problem for absolute positioning, is font scaling. Relative sizing (like em’s or %’s) should be used (tho that is a problem in fixed width layouts) so that text still fits within divs. I haven’t done that, although I did test it to a seven levels of magnifications and the layout was satisfactorily preserved with no important text obscured.

BTW Nice looking site you’ve got. It reminds me that one of my next challenges for Headway is rounded corners without using CSS3. I’d avoided them as it was but am really keen to see what the best trick is to achieve them with Headway and its leaf system.
Cvcvcvcv

hello
http://www.domain2host.info Web Hosting Chennai

Nice blog. I will keep visiting this blog very often.
http://www.mactonweb.com Web design London

Really keen to see what the best trick is to achieve them with Headway and its leaf system.
http://www.register-web-domain.in Domain registration

Great and helpful piece of information.Using data is becoming more and more prevalent.Thanks to sharing

three4one design

design is the face of your business

Tutorial: Coding a complex design using the WordPress Headway framework