Layouts decide how elements on a page, customarily contained in DIVs, are positioned. Zen comes with a couple of preset layouts which can be used. If neither of them is suitable, a custom layout can be created. In this recipe, we will be replacing the default fixed-width layout with a liquid layout, which we discussed in Chapter 1, Drupal Theme Basics.
We are going to assume that the myzen theme from earlier in this chapter is enabled and the current default. It is also important to decide on the type of layout required for the site during the design stage.
All we are going to do here is replace one of the stylesheets used in myzen with another.
- Open
myzen.infoin an editor. - In the section pertaining to stylesheet declarations, look for the line that declares the fixed-width layout which should usually be
stylesheets[all][] = css/layout-fixed.css. - Replace this with
stylesheets[all][] = css/layout-liquid.css. - Save the file.
- As usual, clear the theme registry for our changes to take effect.
The default fixed-width layout is, as the name suggests, of a fixed width. The positioning of the content does not vary based on the dimensions of the browser. By replacing the layout-fixed.css stylesheet in the myzen.info file, Drupal will now load the layout-liquid.css file instead. As a result, when we refresh the front page, we should now see that the layout of the site occupies the full width of the screen and will flow and reposition itself as we resize the browser window.
Zen and its sub-themes take care while displaying content and ensure that the markup is clean and semantically correct. Furthermore, in light of the growing internationalization of the web, it provides RTL support out of the box.
The Zen theme, by default, comes with two sidebars—left and right—and it automatically displays the sidebar markup only if it contains content within.
A number of CSS files in Zen and other themes are often in two variants—one with an rtl suffix and the other without. RTL is an acronym for Right-To-Left and is used to signify that the stylesheet will be used when RTL mode is enabled, customarily for sites with content in languages such as Hebrew and Arabic.
There are various advantages and disadvantages to using a fixed-width or a liquid layout, and a variety of ways to accomplish these very same layouts which are drastically different from the way Zen implements them. If a custom layout is being used, add the necessary rules and styles to a separate CSS file such as layout-custom.css.