Layout Basics

By Peter~09 Jul 07~guide~

Minim columns can be 20em, 30em, 40em or 60em wide. The names are based on this with x meaning blank space.

First: choose a layout and enter its name in the 'cols' custom field. Note that red is the primary column (body) and green is the secondary column (excerpt). Primary is always to the left of secondary, or above it in the one-column layouts. Black is empty space.

Second: choose a vertical position of high, mid or low for both primary and secondary columns. In the 'himidlo' custom field put one of the following:- hh, hm, hl, mh, mm, ml, lh, lm, ll or leave blank for the default mm setting.

Third: apply left-aligned or justified text to primary and secondary columns. In the 'lefjus' custom field put one of the following: ll, lj, jl, jj or leave blank for the default ll setting.

Fourth: You can use the blank space! When you write an article you will usually have paragraphs. By putting a span within a paragraph you can put text or an image in the blank space. The class you give the span determines where it will appear. So 'pullr' will attach to the right of a column, 'pulll' will attach to the left of a column, 'pullcr' will be centred in the black to the right of a column and 'pullcl' will be centred in the black to the left of a column. For example, opposite is a 2040 layout with hl vertical positions. In the first paragraph of the left column there is span class="pullcr" and an image that is 608px wide. Notice how it fits neatly above the secondary column. In the second example the span has a class="pullr" and it is attached to the primary column and goes two-thirds the way across. There's more. Get this kind of pull out by using the span 'fl15'. There's also 'fl10', 'fr10' and 'fr15' for two sizes and both sides A little planning and manipulation of images may sometimes be needed but you can soon learn the best layout for a particular article whether it be images, text or both.

This web page is an x3020 layout with a span="pulll" in the 3rd paragraph and images set to 288px width.

2040 hl layout with span="pullcr"

2040 hl layout with span="pullr"

Your Comments...

Your Name

Your Email (spam-protected) (Required)

Your Website (spam-protected)

Your info for next time? Remember