Drupal Lite 7: Style a Content Region

The main content region of a page consists of different sub-content regions. The number of regions and their layout is defined by the Page Layout.

Each of the regions can be styled individually. There are 5 different styles

  • Default Region Style has no applied style
  • Accordion Style will make collapsible content panes in the region. For an example of how accordions function, see the example on the jQuery user interface website
  • Background Box will fill the region with a color from your site's color palette
  • List Style will apply either an ordered or unordered list format to the content panes in the region
  • Pull Quote will place a bar on the left side of the region

(see examples below)

Instructions

  1. Find the page
  2. Click Customize this page button at the bottom of the page
  3. Click the Region Style button change style button in the blue box at the top of the region area
  4. Select the style from the list and click Next
  5. Depending on the style chosen, there may be additional options (see below)
  6. Click Save at the bottom of the page

Note: the style may not be visible until the page is saved

Additional Options for Styles

Background Box

After choosing the Background Box style and clicking next, select the version of the background box style. The 5 background box colors are defined by the site's color palette.

Accordion Style

  • Set Active - this setting determines which pane is expanded. Enter -1 for no opened pane; 0 for the first to be expanded; 1 for the second to be expanded; etc.
  • Set Accordion Height Style - choose from the 3 options. If the user should have the option to close all of the sections, check the fourth box
  • Trigger - choose the trigger that will open/close the sections, either on mouse click or on mouse over
  • The last option in the accordion style settings has no functionality in Drupal Lite

 Style Examples

The image below illustrates the non-default styles for regions.

  • Top Left = Accordion Style
  • Top Middle = Background Box Style (with Primary Color selected)
  • Top Right = List Style (with Ordered List selected)
  • Lower Left = Pull Quote Style 

region styles illustrated