Linode VPS Hosting, Starting at $19.95/month!

Get 2GB of Free Space from Dropbox

You are here

Mix and Match

No votes yet
Available Releases: 
Tuesday, October 26, 2010 - 11:25
GPL v2

Please see notes about latest releases below.

Mix and Match is a subtheme of the Fusion base theme. It was designed to take advantage of the power and flexibility provided by Fusion and the Skinr module to allow users to create highly customized styles through Drupal's UI. To get a better idea of the options/styles available using this theme, please visit the Mix and Match demo site.


Mix and Match configuration options:

  • Set body, content area and footer background colors
  • Choose an accent color for navigation bar and submit buttons
  • Select default colors for page titles, block headers and links
  • Color options include white, black, red, and multiple shades of gray, blue, green and orange
  • Add CSS3-based rounded corners to blocks and other page elements

Features provide by Fusion base theme:

  • Select 960px fixed or fluid layout (grid-based)
  • 13 available block regions
  • Dropdown menus
  • Adjustable sidebar widths and layouts
  • Font family and font size options
  • Customizable search results
  • Extra administrator and developer settings

Using the Skinr module:

  • Set colors and other styles for each block on the block configuration page
  • Set colors and other styles for nodes and comments on content type configuration page

Installation and Configuration

  1. Download the Mix and Match and Fusion themes
  2. Extract them in your themes directory.
  3. Enable Mix and Match and Fusion Core (you don't need to enable Fusion Starter) on your themes page and set Mix and Match as your default theme
  4. Download and enable the Skinr module (optional, but very strongly recommended)
  5. Set any necessary permissions for the Skinr module (/admin/user/permissions)
  6. Go to the Mix and Match theme configuration page (admin/build/themes/settings/mix_and_match) to set your main theme colors and other aspects of layout, typography, etc.
  7. Set styles for individual blocks (colors, size, position, menu styles, etc.) on the block configuration page
  8. Set styles for nodes and comments on the configuration page for a specific content type

Tips for using the theme

Using local.css

If you want to modify the theme or add additional styles, it is recommended to override CSS or add new CSS in local.css instead of modifying the existing stylesheets. To set up local.css, follow the instructions at the top of the local-sample.css file found in the CSS directory of the theme.

Adding CSS3 PIE

The theme configuration settings allow users to add round corners to blocks and other page elements, but these will only be rendered in CSS3-compliant browsers. To display round corners or other CSS3-based custom styles in Internet Explorer, it is suggested you install the css3pie module and follow the instructions in this theme's README.txt file or these instructions on the theme demo site.


For more details about using this theme, please refer to the README.txt file or the theme's demo site. Also, for issues related to Fusion core features or Skinr, refer to the following:

Important Notes

  • It is recommended that this theme be used with the 6.x-1.x series of Skinr (the currently recommended version).


    Using CSS3 PIE: Previously, the instructions were to add the library to the PIE directory in the theme, but now there is a module available for incorporating this library. So the current recommendation is to use the module. If you previously used it within the theme, delete the PIE directory and its contents and any code in local.css for CSS3 PIE, then follow the instructions in README.txt or here.

  • NOTE ABOUT 7.x

    The first Drupal 7 version is available but lacks Skinr support so is rather limited. Until there is a stable release of Skinr for 7.x and Fusion has incorporated its Skinr features, any help testing the basic features of the theme would be greatly appreciated.