Print-friendly version
Send to friendCustomizing your theme
Advanced positioning: manual block indents
What if you want more control than just floating a block all the way to the left or right, or in the center? For example, you may want to visually indent a block so that it is nicely positioned over a background image. Arbitrary positioning is possible using type-in classes in the block configuration UI. These are not available as dropdowns because their usage is left to more advanced users who want full control over positioning in the grid. These are similar to push/pull classes in other grid systems to allow for any placement of a block.
The classes are in the format of [gridID]-indent-[units]. By default, Fusion uses a grid ID of grid16 (for 16 columns). So to indent a block by one unit, the class is grid16-indent-1
Scroll down to the Advanced section (Drupal 6) or just “CSS classes” (Drupal 7) of Skinr when applying a block style and determine the number of units from the left that a block will be positioned. Enter the class in the field. If you would like a block to also be indented from the right side, also adjust the width of the block.
Using local.css
Your Fusion theme comes with a special file that allows you to customize your theme without making any changes to the core files.
Why should you care about this? When we release new versions of your theme, if you’ve made changes to the files then they will be overwritten when you upgrade. Putting these changes in a special file keeps them separate from the rest of the theme and allow for smooth upgrading. Plus the overrides in this file will load after the rest of the theme files, making it easier to override the existing code.
In your theme’s /css folder, you’ll see a file called local_sample.css (Drupal 6) or local.css.sample (Drupal 7). Rename it to local.css. Now any CSS code that you add to this file will be run with your theme.
If you’re new to CSS, we highly recommend using Firebug as a tool to inspect the code being used on your site and try out changes live in the browser first to see what’s what.
Happy customizing!
How can I be sure I'm seeing all the changes I make to my theme?
It’s probably happened at least once in your Drupal career: You make a theming change, reload the page, and… nothing’s different. You reload again, but still nothing. Eventually you remember the various methods to clear the theme registry, and all’s well again.
In Drupal 6, we added a control to automatically clear the theme registry every time a page loads. Here’s how:
- Go to the theme administration page at /admin/build/themes.
- Click the “configure” link next to the active theme.
- Scroll to the bottom of the screen and click “Developer settings” to expose those settings.
- Check the “Rebuild theme registry for every page” box.
Obviously, this has a huge performance cost, so be sure to turn it off again when you’re done with theme development, and certainly before launching the site.
For Drupal 7, we recommend using the Devel module for consistent cache clearing. If you are comfortable with the command line and are familiar with the Drush module, you can also use the command “drush cc all”.
