Activity #6: Changing Pane Styles

These instructions assume you are logged into the Health Sciences Drupal Training website. After completing these edits, your page will look closer to the “Dogs - Final Version” page.

Overview of Panes

You may have noticed that within the Edit Tab, the Assistance, Hunting, and Herding content at the bottom of the page is missing. The reason for this is that the copy is not in the body pane. When the page was created, new panes of content were created. You will learn how to add a pane in a later activity.

To access to content within the panes, you access Panelizer through the “Customize Display” tab. [Screenshot]

Accordions

  1. Navigate to your training page
  2. Click on the Customize Display tab [Screenshot]
  3. Click on Content
  4. Click on the gear in the upper left corner of the Middle Column 2 panel [Screenshot]
  5. Click on Change [Screenshot]
  6. Click on Accordions [Screenshot]
  7. Click “Next.”
  8. Change the settings:
    1. Change “Set active” to -1.
    2. Check "Each panel will be only as tall as its content" under "Accordion height style."
    3. Check “Can close all section.”

  9. Click “Save (in the lower-left corner)
  10. Scroll to the bottom of the page and click “Save”

How-to instructions on the AHC Resource Hub

Tabs

It’s easy to change back and forth between the default, accordions, and Tabs styles. Now you’ll change the Middle Column 2 panel to be Responsive Tabs.

  1. Navigate to your training page
  2. Click on the Customize Content tab [Screenshot]
  3. Click on Content
  4. Click on the gear in the upper left corner of the Middle Column 2 panel [Screenshot]
  5. Click on Change [Screenshot]
  6. Click on Responsive Tabs Style
  7. Click “Next.”
  8. Click “Save (in the lower-left corner)
  9. Scroll to the bottom of the page and click “Save”

How-to instructions on the AHC Resource Hub 

Video Tutorials

Printable Instructions