Left and right columns

Adding structural left and right side columns to the main page content type will allow unique content to be placed in these areas on any page and preserve a consistent width to the main content area. On mobile devices, these left and right side columns appear below the main content areas.

First, create new fields (left sidebar and right sidebar) in the Basic Page Content Type:

  1. Structure > Content types > Basic Page > Manage fields
    In the text field under Add new field: Left sidebar
    Under Field Type, select Long text
  2. Hit Save at bottom
    Under Basic Page settings, add label: Left sidebar
    Add help text if you want.
    Under “Text processing,” select “Filtered text (user selects text formats)”
  3. Select “Save settings.”
  4. Repeat to add Right sidebar
  5. Save

Next, create a new view type (sidebar) and create specific blocks using that view type for left and right sidebars:

  1. Structure > Views > Add new view
  2. Title: Sidebar
    No description needed (uncheck)
  3. Uncheck “Create page”
    Check “Create block.”
    Block title: sidebar
    Display format: Unformatted List of Fields
    Hit “Continue and edit.”
  4. Replace the generic “Block” with a new display name as follows:
    Click on Block under Block details > Display name: Block
    to create a new display:
    Name: Left sidebar block
    Description: This allows content to be placed on any page in the left sidebar area
    Hit: Apply
  5. Under Title: Title > Sidebar;
    Click title name (Sidebar), and remove that name from the field and hit "Apply (all Fields)".
    Title will now read Title: None.
  6. Click on Title under Fields > Content: Title
    and select Remove
    You'll get a scary looking warning: "Display "Left sidebar block" uses fields but there are none defined for it or all are excluded."
    Don’t worry about it for now and continue.
  7. To the right of Fields, click on Add and scroll up to top of list and in the Search box, type in name of new fields created under 4. above: Left sidebar
    When “Left sidebar” appears, select it and under Add Fields > For [dropdown menu], select: “This block (override)” (it may be already selected by default).
    Hit "Apply (this display)"
    Uncheck “Create a label” and leave “Exclude from display” unchecked.
    Under “Style settings" leave “Add default classes” checked.
    Under “No Results Behavior” check “Hide if empty” and “Hide rewriting if empty.”
  8. Hit “Apply (this display).”
  9. At the upper right, click "Advanced" and then under “Contextural Filters,” click “Add”
  10. Under “Search” type "nid" and Drupal will display “Content: Nid (Node ID)”. Select “Content: Nid (Node ID)”.
    Hit “Apply (all displays)”
  11. For all displays. Select “Provide default value":
    Under Type, select "Content ID from URL”
    Hit “Apply (all displays)”
  12. Filter Criteria: click “Add;” In Search bar, type Content: type; select "Content: type" by checking the box
    Hit "Apply (all displays)"
    In the next screen, under "Operator:" select "is one of: basic page";
    Hit “Apply (all displays)”
  13. Under “Block Settings:” Block Name: None; Select None and add a name to administer this in Blocks: “Left sidebar”
    Hit “Save” at upper right.
  14. To remove that pesky "Master" warning message, click on that red-outlined Master block and apply an arbitrary Fields criteria under Fields > Add. Save
  15. Now save all your work to date by clicking the large Save button at the upper right. The warning message should disappear.
     
  16. Now that you've set up the Left Sidebar block, you can clone it to create your Right Sidebar block:
    Towards the upper right of the Sidebar Views panel, click "Clone Left Sidebar block."
    Change "Left" to "Right" in items 4, 7 and 13 above and Save.
  17. Now enable these in
    Structure > Blocks > locate Left sidebar down below under Disabled and enable it by selecting Sidebar first under Region. Do the same for the right side bar by enabling it in the Sidebar Second region.
  18. Hit “Save Blocks”
  19. Now every Basic Page will contain optional left and right sidebars in which users can insert content if they wish. If there is a leftside submenu, the leftside bar will appear under that submenu.
  20. Content you place in the left or right sidebar will by default display also in the main content area which is not desired. To fix:
    Structure > Content type > Basic Page > Manage displays: under Fields, drag Left and Right sidebar cross icons down to below Hidden
  21. Save
  22. Add the following media query and CSS rules to your existing core CSS style sheet to allow the left and right side columns to expand to full width under 768px for mobile devices:

    @media only screen and (max-width: 768px) {

    .region-sidebar-first {
    width: 100%;
    margin-top: 0;
    border-top: 1px solid #CCC;
    padding-top: 2%;
    }

    .region-sidebar-second {
    width: 100%;
    margin-top: 0;
    border-top: 1px solid #CCC;
    padding-top: 2%;
    }
    }
    Be sure to include all the brackets (}) shown. If you already have an existing media query for displays under 768px, add these two to it.

  23. You can disable or supress the right column on a page where the main content might be more appropriate in longer text blocks and you have no content for that right column:
    1. Structure > Blocks > Sidebar Second > Right Sidebar > on the right, click "configure"
    2. Scroll down to “Show block on specific page”
    3. Keep "All pages except those listed below" checked
    4. Add the url of the page(s) on which you want to disable the right sidebar, starting from the root:
      For example, for this page it would be: structural-enhancements/left-and-right-columns
    5. Save