Special features

Customizing the dropdown menu

CSS styling

The Superfish dropdown menu script included in Fusion is intended to be easily styled with just CSS, no JavaScript customization required. The Primary Menu section in Fusion Starter’s CSS file includes lots of comments and empty CSS selectors for targeting different portions of the menu, such as the top level typography, separators, background or border colors on the dropdowns, and so on.

Unlinked top level menu items

With Fusion and the Special Menu Items module, you can overcome one of the frequent annoyances in Drupal – how to set the top level menu item of a dropdown menu to not link to a page. Fusion includes styling of the <span class=”nolink”> menu items, applied by the Special Menu Items module, to match standard linked menu items. If you want your custom subtheme to support this style, you’ll need to add the .nolink class as an additional selector anytime you add properties to the <a> tag of your primary links.

Changing the Superfish parameters

Fusion sets minimal defaults in its script.js file, but you can override any of these by placing the Drupal.behaviors.fusionSuperfish = function (context) {} function in your subtheme. This allows you to set any of the options available to Superfish, such as the speed, arrows, and drop shadows.

Changing the Superfish layout

Superfish also has several layout styles available. Since setting the default Superfish style on Drupal’s primary links requires some template.php wizardry in the first place, if you want to change which Superfish layout is used, you’ll need to use the same code in your subtheme’s template.php.

The most common option you’ll likely want to use is the navbar style, with horizontal second level links. Here is the code to paste into your template.php to add this style:

function yoursubthemename_preprocess_page(&$vars) {
  // Add Superfish navbar class if dropdown enabled
  if ($vars['primary_links'] && theme_get_setting('primary_menu_dropdown') == 1) {
      $vars['primary_links_tree'] = preg_replace('/^<ul class="menu sf-menu/i', '<ul class="menu sf-menu sf-navbar', $vars['primary_links_tree'], 1);
  }
}
Permalink

Ubercart features

The Ubercart e-commerce module is a very popular suite for creating an online store with Drupal. We have done much theming of Ubercart over the years, both for clients and in our premium themes, and have worked some of the most helpful bits and pieces into Fusion itself.

How does Fusion make Ubercart theming easier?

  • Provides Ubercart variables in ready-to-print form in a custom node-product.tpl.php file
    • This file will be used for all product classes by default, but you can copy it to additional node-classname.tpl.php files for custom theming per product class
  • Fusion checks the values of your product information (weight, list price, and dimensions) and does not print these out if they are 0 or empty. The configuration settings for these are global in Ubercart, yet you might have a mix of shippable and non-shippable products
  • Resets and improves on some of Ubercart’s default CSS styles, such as borders and alignment
  • Adds a strike-through style for list prices
Permalink

Ubercart theming

Near the end of fusion-starter-style.css in the Fusion Starter subtheme, you’ll see several commented sections of CSS for Ubercart-related styles. This is an excellent reference and the comments will help guide you through styling your own Ubercart theme.

Part of the challenge of doing your first Ubercart theme is all the hide-and-seek in Firebug for the right classes to target. For example, you need to make sure you’ve hit on all instances of the “Add to cart” button. The starter CSS in Fusion will help make that process much quicker!

These sections include:

  • Catalog grid, including category names and product listing
  • Sub-categories at the top of catalog sections
  • A block of CSS selectors for your “call to action” buttons, for easy targeting of the most important buttons on any e-commerce site, such as “Checkout” and “Review order”
  • Starter CSS for the cart block
  • Add to cart button selectors for the multiple places these are displayed
Permalink