Print-friendly version
Send to friendStyling content
Customizing font size and type
Fusion themes are unique in letting you quickly and easily change both the font type and size for your entire site with a few mouse clicks.
As with other such changes, the magic happens on the theme configuration page. To get there:
Drupal 6:
Go to /admin/build/themes, then click “configure” next to the Fusion theme you want to change. Scroll down to Fusion theme settings > General settings, then click Fonts to expose the controls.
First up: Click “Font family” to get rewarded with six alternate options besides the theme’s default. We could go on endlessly about them here, but the best way to see how they work is to just try them out! Just click a radio button, scroll to the bottom, and click “Save configuration”.
The Font size section works exactly the same way: Just click the radio button for the size you want, scroll to the bottom, and click “Save configuration”.
Drupal 7:
Go to Appearance, and then choose “Settings” under the Fusion theme you want to change. Scroll down to Fusion theme settings > General settings, then click Typography to expose the controls to change your fonts.
Click “Select a new font family” to get seven alternate options besides the theme’s default. Select a family from the drop down menu, and scroll down to click “Save configuration”.
The Font size section works exactly the same way: Just click the drop down menu for the size you want, scroll to the bottom, and click “Save configuration”.
Taken together, changes in the font family and size can make a huge difference in your site’s appearance – and distinguish it nicely from others. Try it and see!
Selecting styles for your blocks
Ok, so we have the basic layout in place, and blocks in regions. Now comes the time to really make things look pretty!
Your theme comes with a variety of styles that you can apply to each of these blocks, which is what will add the signature style of the theme and visual impact. Click the gear icon that appears when you hover over a block to quickly access the styling options for that block. Through your dashboard, you can access a gallery of all the styles available in your Fusion theme.
Here are a few specific settings to try out to get you started:
- Inline login block for header top
- Inline menu for footer
- Put block in header, set 4 unit width, float right, add a theme style
- Add a menu style to sidebar menu
Emphasizing certain blocks
Fusion comes with another set of basic styles to add emphasis or otherwise distinguish certain pieces of content.
The “Text: Large, bold callout” style is great for adding content like a mission statement or promotional text to the upper section of your site. It applies a large, bold font style to the text, with the title of the block even larger.
Another option is to add a border. The “Border” style adds a 1px border and an extra 10px of padding on your content.
Another style that is helpful for many of the blocks that come with Drupal is the bold links style. It is great for distinguishing between text and links in a block. Remember, any of these styles can be paired together or with other styles, so you may want to add bold links to your footer menu or bordered blocks for even more options!
Adding styles to lists and menus
Both Fusion Core and your Fusion theme come with lots of helpful styles that you can apply to your content. Some of the most useful ones are to adjust the layout and appearance of Drupal’s menus and lists.
For example, you may have a wider area that you want to have your menu or list items fill. Fusion comes with styles to split these items across two or three columns. Here is one in action.
To enable it, click the configure link on a list or menu block. Select the 2-column list/menu style.
The result is that your list (in this case, a list block generated by the Views module) will now be split in two columns:
There are also styles for removing bullets and adding extra spacing or separator lines between items, to give you a cleaner, simpler menu look:
There are also a couple of styles that are suited to more horizontal menus, such as in your header or footer regions.
The first is the inline menu style, which will place your top level menu items on a single row with separators:
Another is great for larger footers with more menu items. It puts the menu items into multiple columns, with the top level items larger at the top:
These are just some of the styles included in Fusion Core, and your Fusion subtheme will come with many more to add a unique look to your site, with things like graphical bullets, hover effects, arrows, separators, and more.
How do I set blocks to line up nicely with equal column heights?
Fusion includes a jQuery plugin that automatically checks for the tallest block and will set the height of others equal to that. This is a handy option when your block styles have a background or border and you want their heights to line up nice and tidy. Here are two blocks, before and after:
To enable this feature, configure the blocks and check the “Equal heights” style for all blocks that you wish to line up. This works on a per region basis.
