Hello friends,

Looked into the theme and it does not seem like there are hooks in starterkit or bootstrap that puts classes on the body to indicate if there is a sidebar or not.

In my context, I grabbed the code from bartik to resolve my own theming issues. Wanted to suggest it to be baked into bootstrap. Here's what I used

/**
 * Implements hook_preprocess_HOOK() for HTML document templates.
 *
 * Adds body classes if certain regions have content.
 */
function bartik_preprocess_html(&$variables) {
  // Add information about the number of sidebars.
  if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
    $variables['attributes']['class'][] = 'layout-two-sidebars';
  }
  elseif (!empty($variables['page']['sidebar_first'])) {
    $variables['attributes']['class'][] = 'layout-one-sidebar';
    $variables['attributes']['class'][] = 'layout-sidebar-first';
  }
  elseif (!empty($variables['page']['sidebar_second'])) {
    $variables['attributes']['class'][] = 'layout-one-sidebar';
    $variables['attributes']['class'][] = 'layout-sidebar-second';
  }
  else {
    $variables['attributes']['class'][] = 'layout-no-sidebars';
  }

  if (!empty($variables['page']['featured_top'])) {
    $variables['attributes']['class'][] = 'has-featured-top';
  }

}

Thank you kindly for all your efforts!

Comments

cjboranp created an issue. See original summary.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Active » Postponed (maintainer needs more info)
Issue tags: -no-sidebar, -sidebar classes

I really don't see the point in adding this.

In all the years of maintaining this project I have rarely encountered any real usefulness of targeting body classes for sidebar content.

IMO, if you're doing it like that, you're doing it wrong.

I'll leave postponed (NMI) for now to see how much traction/interest this gets.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)

Apparently none.

MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented

I was just looking for this myself I hope no one minds me reopening this. My use case would be as follows.

For a multiple value entity reference field of related content displayed as teasers, with a tile or card layout. Where no sidebars are in use, display 4 tiles to row, When the first sidebar is in use display 3 tiles to a row. When both sidebars are in use, display 2 tile per row. This is all easy to do, with a known content layout defined by body classes. Not just Bartik is providing this utility.

I am new to bootstrap and still getting head my head around it, so maybe there is better approach?

MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented
Status: Closed (won't fix) » Active
markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Active » Closed (won't fix)

I think if your site really needs this, then these classes should be added on a sub-theme basis.

ydahi’s picture

ydahi
Location Waterloo, Canada
CreditAttribution: ydahi commented

If anyone is looking to include sidebar classes in there bootstrap subtheme (drupal 8), here's how:

Step 1: copy bootstrap/templates/system/html.html.twig into yoursubtheme/template/html.html.twig

Step 2: in your new html.html.twig file, edit the body_classes array so that it looks something like this:

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
    page.sidebar_first ? 'sidebar-first',
    page.sidebar_second ? 'sidebar-second',
  ]
%}

Step 3: clear your cache and you should now see sidebar-related classes in your body tag.

This is still useful if you are trying to create a fixed or sticky sidebar, for example. In fact, this is the way that the bootstrap theme handles the different navbar positioning.