Print-friendly version
Send to friendLayout
Layout settings
Also on the theme settings page, your Fusion theme will give you a set of powerful options for configuring your site’s layout and appearance. Here you can control the position and widths of sidebars, whether your layout is a fixed or fluid width, typography settings, and more.
The topics linked below will guide you in detail through each of these settings in order to configure your site the way you’d like.
Changing sidebar widths
You can change the width of both the right and left sidebars from 1/8th to 1/2 of the page’s width each, and the content area will shrink in response. Here’s how.
- Visit /admin/build/themes (Drupal 6) or Appearance (Drupal 7), then click “configure” next to your theme to go to that theme’s configuration page.
- Scroll down to Fusion theme settings > General settings.
- Click Layout to expose the sidebar controls.
- Use the pop-up menus labeled “Select a different width…” to control how wide the sidebars will be, then scroll to the bottom of the screen and click “Save configuration”.
But wait – there are a few gotchas.
- If you’ve selected the “Fluid” grid layout, then obviously your sidebars won’t be a specific pixel width: They’ll grow and shrink with the rest of the page, depending on visitors’ browser width. They will, however, maintain the same proportions to the rest of the page.
- What happens if you make both sidebars eight units wide on a sixteen-unit-wide page? Theoretically, that would make the content area disappear, which would be silly. So instead, the right sidebar gets pushed underneath the content area, and we at TopNotchThemes scratch our heads and wonder why you did that.
When I set a block or sidebar's width, what's all this about "units"?
The theme’s settings for changing sidebar widths might have looked a bit strange to you, because widths are listed as (for example) “2 units wide (120px/12.5%)”. Here’s what that means. The page is divided into 16 columns, regardless of whether you choose to make your theme fixed- or fluid-width. Each column is:
- 6.25% of the page’s width in a fluid-column layout, or
- 60px wide in a fixed-column layout (which has a total width of 960px)
This grid system (known as 960) has a lot in common with traditional newspaper layout systems. By mixing widths, you can develop some very impressive and attractive layouts, while still ensuring visual consistency. Try it!
Creating your layout with blocks
Once you’ve got the basic settings and menus in place, blocks are where the real power lies. Blocks can hold paragraph text, listings of content, images, menus, nodes – just about anything!
Fusion’s powerful layout and styling options let you use blocks to create hundreds of aesthetically pleasing options for different types of content. Go to your block configuration page at Administration > Site building > Blocks (Drupal 6) or Structure > Blocks (Drupal 7) and you’ll see all the available regions in the theme. Each of these regions can hold one or more blocks. Go ahead and drag some blocks into the section with the name of the regions you’d like them to appear in. When you’re done, save the page and visit your site’s home page to get an accurate look at your new content layout.
The links below will cover how to create different layouts for different sections of your site using block visibility, and configuring advanced block settings such as width and positioning.
What are blocks, and how do I move them around the screen?
If you’re an experienced Drupal administrator, you already know this part:
- Visit /admin/build/block (Drupal 6) or Structure > Blocks (Drupal 7) on your site.
- Choose block regions for each block you want to be visible, either through the pop-up menu or by dragging them into place.
That’s easy enough to understand with a standard theme like Garland, which has only a few blocks regions. But Fusion themes typically have over a dozen regions, and those regions are collapsible. So a bit of explanation is in order; we’ll start at the beginning. Blocks are pieces of content that you want to appear in parts of the screen other than – and including – the content area. (By contrast, nodes only appear in the content area.) A list of available blocks is at the block administration page, at /admin/build/block. Blocks can originate through several methods:
- You manually create them by going to /admin/build/block and clicking “Add block”, or by going directly to /admin/build/block/add or Structure > Block > Add a block.
- You create a View with a block display.
- You install a module that creates a block.
- By Drupal itself; for example, Drupal includes the “Recent members” block in its default installation.
However, blocks remain hidden from view until you place them in block regions – that is, places on the screen where you can place blocks, according to the theme’s design. You can make blocks show up only on certain pages, or only to users of certain roles. But unless you go out of your way (with custom programming, for instance) to make blocks move around under certain conditions, they stay in the regions where you place them for a particular theme. If you switch to a different theme, you need to re-assign places for all your blocks. As with blocks, block regions appear on the block administration page at /admin/build/block. So: Now you have the basics. Let’s go back and look at our instructions again:
- Visit the block administration page on your site, at /admin/build/block (Structure > Blocks).
- There are two ways to move a block into a region:
- To the left of each block is a compass-like doodad. Click and drag it to below the name of the region where you’d like it to appear. You can also reorder blocks within regions this way.)
- To the right of each block is a pop-up menu that lists the regions. Select the one you want, and the block jumps to its place in the list.
- Scroll to the bottom and click “Save blocks”. If you don’t do this, you’ll lose your changes!
Diagram of default region layout
Here is a diagram of the default regions in Fusion, with a few blocks showing example position and width configurations in the sidebar_last (sidebar_second in Drupal 7) and postscript_bottom regions. Each Fusion subtheme may be slightly different from this if it has a custom page.tpl.php file, particularly in the header.
Adding a menu to your site's footer
Yes! Your Fusion theme comes with a Footer region to place a menu or any other text in.
One common technique is to place your primary links block in the footer, to replicate your site’s main menu navigation at the bottom of the page. Once you’ve moved this block to your footer region, try the inline menu (to display the top level menu items on one row) or multicolumn menu styles (for nested menus with headings). In Drupal 7’s Skinr styles these are under ‘Menu Layout’ and ‘Single line menu with separators’ or ‘Multi-column menu with bold headers’.
Inline menu style:
Multicolumn menu style:
These screenshots were taken with Fusion Starter, but your Fusion theme will add more styling to match the theme.
