| home / authoring / style / sheets / joomla_templates2 |
|
|
|
We will be using pure CSS to make a 3-column layout for the Joomla template. We will also be making it a fluid layout. There are two main types of web page layout—fixed and fluid—and they both refer to how the width of the page is controlled.
The width of the page is an issue because of the many browser resolutions at which people surf the Web. Although the percentage is dropping, about 17% of surfers are using an 800x600 resolution. The majority, 79%, are using 1024x768 and higher2. Making a fluid layout means that your valuable web page won't be a narrow column in the 1024 resolution and will be visible in full on smaller monitors.
A typical design might use tables to lay out the page. They are useful in that you just have to set the width of the columns as percentages, but they have several drawbacks.
For example, tables have lots of extra code compared to CSS layouts. This leads to longer load times (which surfers don't like) and poorer performance in search engines. The code can roughly double in size, not just with markup but also with something called "spacer gifs."
Even big companies sometimes fall into the table trap, as seen by a recent controversy about the new disney.co.uk website3:
There are a couple of major problems with a site that uses tables for layout.
|
Let's look at our layout using CSS. You can position elements (stuff) in several ways using CSS. For a quick introduction, a good source is Brainjar's CSS Positioning.
If you are new to CSS, you might read at least one beginner's guide to CSS. Here are a few suggestions:
Modern web design uses CSS rather than tables to position elements. It's difficult to learn, but worth the investment. There are many (non-Joomla) resources avail-able to help you.
We will be using float to position our content. At its most basic, the template might look like Figure 9.4.
Still not very exciting, but let's see what the different parts are all about.
FIGURE 9.4 Basic template layout
In Figure 9.4, the left, middle, and right columns are each given their own element. Each is floated left and given a percent width that together add up to 100%. The clear:both style on the footer tells the browser to "stop floating" and makes the footer stretch across all three columns. When we build our second template in this chapter, we will have to use a more advanced clearing technique.
To improve the layout and to add some breathing room to the content, we need to add some column spacing, commonly called "gutter." Unfortunately, there is a problem here. You might know that Internet Explorer does not interpret CSS correctly. One problem is that it calculates width differently. We can solve this problem by not using any padding or borders on something that has a width. To get our gutter, we add another <div> element inside the columns.
To the CSS we add
Our resulting
code for index.php is:Our template.css file looks like this:
It's possible to reduce the amount of CSS code by using "shorthand." One example of this is padding and margin styles applied to an element, where
can be replaced by:
There are "shorthand" styles at the beginning of each style definition. After you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is
Here is an example. Rather than using this
use this
Read more about this syntax at An Introduction to CSS Shorthand Properties.
This simple layout is a good one to use for learning about how to use CSS with Joomla because it shows two of the advantages of CSS over table-based layouts, it is less code, and it is easier to maintain. However, it is not source-ordered. For that we must use a more advanced layout known as a nested float.
Source-ordered layouts perform better for SEO than ones where the important content occurs late in the code. From a Joomla site perspective, the important content is that which is coming from the component.
So far, all of our CSS has been only about layout, which will make a plain page. So let's add some formatting:
We have centered the page by using a small hack. This has to be done because Internet Explorer does not read CSS accurately. With a standards-compliant browser, we could just say margin:0 10%; to center the page, but IE does not recognize that, so we center the "text" of the whole page and then align it left in the columns.
In celebration of IE7's support of min/max width (which IE6 does not), we can add in a minimum and maximum width. Note we have to add a tiny hack for IE6 as it does not understand these. It will ignore the !important statement and have a plain, old 960px width.
It might seem strange to define our columns in percentage widths and then have a containing div that is fixed. Well, a few things are going on here:
|
We have also added a new style to the columns: overflow:hidden. This will make the page "break" more consistent as we reduce its width.
At the beginning of the typography, with CSS we will set some overall styles and have what is known as a global reset:
Everything is given a zero margin and padding, and then all block level elements are given a bottom margin. This helps achieve browser consistency. You can read more about the global reset at clagnut and left-justified.
The font size is set to 76%. The reason for this is to try and get more consistent font sizes across browsers. All font sizes are then set in em. Having line-height:1.3 helps readability. This means that the pages will be more accessible because the viewer will be able to resize the fonts to their own preferences. This is discussed more at "An experiment in typography" at The Noodle Incident (Owen Briggs).
If we add some background colors to the header, sidebars, and content containers, we see something like what is shown in Figure 9.5.
Notice that the side columns do not reach their footer. This is because they only extend as far as their content; where the space is white on the left and on the right, they don't exist.
FIGURE 9.5 Basic template with typography
If we have a template that has a white background for all three columns, this is no problem. We will use this approach and will have boxes around the modules. If we want equal height columns that are colored or have boxes, we have to use a background image that will tile vertically. This technique is called Faux Columns and is described by Douglas Bowman8 and Eric Meyer.9
Although Joomla 1.5 has the functionality to override the core output in a template, its default rendering still uses significant tables to output content in the main body. Along with these tables, CSS output is available for a designer to style pages. Based on some research by various community members, Table 9.2 shows the current list. Note, it does not include generic web page styles like H1, H2, p, ul, a, form, and so on.
Many designs you might see in Table 9.2 actually have given CSS styles that are more specific in their definitions. Basically, a more specific rule overrides a less specific rule.
For example
The color on a link and the color of the .contentheading will be red, as that rule is more specific (as .contentheading is contained within a <div>)
In the case of Joomla templates, you will often see more specific rules used. This often occurs when the class is on a table. Here are more examples:
.moduletable is the name of the <div> that wraps a module. table.moduletable will only apply the style to a table with class="moduletable" on it.
.moduletable will apply the style regardless of what element the class is on.
a.contentpagetitle:link will apply the style to any a tags with a .contentpagetitle class on them that is a link.
.contentpagetitle a:link will apply the style to any elements inside .contentpagetitle that are links.
Specificity is not easy to understand; its often easier to start by using the most general style possible and then getting more specific if the results are not what you expect.
Here are some links to websites that discuss specificity in detail:
|
jdoc:include.
Joomla will output specific elements, ids, and classes in the code of a webpage. These can be predicted and used to style the design using CSS.
| home / authoring / style / sheets / joomla_templates2 |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
URL:
Digg This
Add to del.icio.us