Tutorial: Coding a complex design using the WordPress Headway framework

The Leafs

The leafs used are the Image Rotator, Content, Sidebar and some Text leafs.

One Text leaf I will talk about is the custom header. It contains the only bit of custom PHP in entire site.


<h1>three<span style="color:#ff4444;">4
           </span>one <span style="color:#ff4444;">design</span></h1>
<h2><?php bloginfo("description"); ?></h2>

It also contains something rather naughty – inline CSS. The semantics police will have a fit – I better fix that up!

Lastly, I am using the WP-Cufon plugin to apply a custom font, Klill

Questions

So there you go. Suitably confused?

I am sorry if this was a bit dry, I’ll try to do ones with more pictures and maybe even video, in the future.

Questions?

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

The Leafs

Questions