We only have one region, which is "Content".

If I understand correctly the main menu is hardcoded (in code), thus a site manager can't add a basic user menu (for login/logout, account settings..) on the main navigation.
The same goes for the footer which has the Dries trademark statement and little room for customization ("Copyright" text area in theme settings).

I understand we can output everything bootstrap has to offer putting the needed HTML and classes with Panels pages, but at least two more basic regions would be very useful.

For example for secondary menus, branding footer, highlighted content etc. something which is not page content and very common across the site and websites in general.

Why should we resort to / learn php templates or preprocess to put this pieces, when:

  • I am using Bootstrap to save time on theming,
  • Drupal 8 is coming out with a completely different theming system ?

Comments

kopeboy’s picture

Title: Provide basic regions for navigation and footer » Provide basic regions (navigation and footer?)
kopeboy’s picture

May I start from a single important issue, which is:

How to add another menu to the navbar? (ex: user menu) - not a developer :(

shadcn’s picture

I see what you mean. The idea behind Radix was to have one single region that ships by default and use Panels for layouts.

To have regions that persists across pages, you can use the Panels Everywhere module.

The other solution would be to subtheme Radix and add your custom region. It shouldn't be too difficult:

Step 1: Create a subtheme of Radix. See http://radixtheme.github.io/documentation/#subtheming
Step 2: Edit the .info file of your subtheme and add your region as follows:

regions[sidebar] = Sidebar

Step 3: Copy page.tpl.php from the templates folder from Radix and put it under the templates/page folder in your subtheme.
Step 4: Print your region as follows:

<?php if (!empty($content['sidebar'])): ?>
    <?php print $sidebar; ?>
<?php endif; ?>

Step 5: Clear the cache and go to the Blocks page to place your menu in your new region.

kopeboy’s picture

Thanks arshadcn!

I completely agree with using Panels for displacing content on regions.. but the problem is outside the content area, mainly: the navigation!

Also, I think many will find Panels Everywhere a little over-complicated.

Without PE, how would you place a Commerce cart block?
Usually it is inside the top navbar on the right, any hints on how to do that?

I think generally many people will benefit from having at least that single region.
Bootstrap docs show examples of buttons and forms (search) inside the navbar, but I don't know if it would be difficult from a Drupal perpective to support this..

sonicthoughts’s picture

Isn't the "answer" to create a subtheme with the region you want? Are you suggesting that everyone would want this and it should be part of the default theme? Also, for navigation would the menu block work? see #1896044: Add menu_block support

kopeboy’s picture

Well, I guess many people want to use a Bootstrap based theme to avoid writing code.

I could build many complex sites with the help of user-friendly themes without learning/writing any PHP.
I guess I have to start using Drupal 7 PHP templates in late 2015.. :/

Thank you for the info on creating a region.

How to place a custom block or content pane in my page.tpl.php instead?

shadcn’s picture

Radix for D8 now ships with a few default regions :)

shadcn’s picture

Version: 7.x-3.x-dev » 8.x-3.x-dev

Moving this to the 8.x-3.x branch.

fotidim’s picture

Kind of a related issue here. I want to have a side bar on my frontpage but there is no such region. I am using Display Suite for custom layout of content type pages but for the frontpage you need to resort to workarounds in order to achieve having a sidebar. I would really prefer if Radix added 2 extra (sidebar 1 & 2) regions.

shadcn’s picture

@axaios you should be able to add this pretty easily in your subtheme. See https://www.drupal.org/docs/8/theming-drupal-8/adding-regions-to-a-theme

shadcn’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

nikitas’s picture

Hi, i was looking for the sidebar(s) in radix theme too but i could not find them. Then i found this thread and read about Panels etc and how easy it is to "include - create" a new sidebar region with panels or by adding it at "subtheme.info.yml".
Although adding a new region as a sidebar is pretty easy one thing that is missing from the current conversation is the ability to "show/hide" and change the "grid classes" of the sidebar(s) and main region content, based on the path of the website.
So for example if i want a no sidebar front-home (full width) template page, with a sidebar in the content node - article region on node/[node_id] etc etc. How do i do this?
Searching on bootstrap (drupal.org/project/bootstrap) you can see on templates/page.html.twig page line 118

      {# Sidebar First #}
      {% if page.sidebar_first %}
        {% block sidebar_first %}
          <aside class="col-sm-3" role="complementary">
            {{ page.sidebar_first }}
          </aside>
        {% endblock %}
      {% endif %}

Now the crucial part here is the col-sm-3 class and how do we know when the region main content should have a class of col-sm-9 and when it should have the class col-sm-12 (for full width) or how to break the main region in 3 columns (sidebar left -main region content-sidebar right).
So after the above code there are "condiniotal settings for the default width of the region.

      {# Content #}
      {%
        set content_classes = [
          page.sidebar_first and page.sidebar_second ? 'col-sm-6',
          page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',
          page.sidebar_second and page.sidebar_first is empty ? 'col-sm-9',
          page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
        ]
      %}
      <section{{ content_attributes.addClass(content_classes) }}>
. . . . 

by adding the above logic a sidebar (right - left) can have the right grid classes as the main content region.

I hope that this will help someone.

thalemn’s picture

@nikitas - your solution did help me, thanks!
However, if I place a block in the first sidebar that is empty, it is still displayed. See https://www.drupal.org/project/bootstrap/issues/2790469.
This appears to be a major bug in Bootstrap at this time.
Did you come up with a solution?
Here's another issue for Drupal 8: https://www.drupal.org/node/953034

thalemn’s picture

I'm just using a sidebar_first (left sidebar) for my development, and this works to hide an empty block:

{# Content Classes #}
        {%
          set content_classes = [
            page.sidebar_first ? 'col-sm-9',
            page.sidebar_first|render|striptags|trim is empty ? 'col-sm-12',
          ]
        %}

This even hides the empty block with the twig output code (theming suggestions).

nikitas’s picture

Hi, based on the bootstrap4 theme (https://www.drupal.org/project/bootstrap4) in web/themes/contrib/bootstrap4/templates/layout/page.html.twig page i have found this code :

<main role="main">
  <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

  {% 
  set sidebar_first_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set sidebar_second_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set content_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-lg-6' : ((page.sidebar_first or page.sidebar_second) ? 'col-12 col-lg-9' : 'col-12' )
   %}


  <div class="{{ b4_top_container }}">
    {% if page.breadcrumb %}
      {{ page.breadcrumb }}
    {% endif %}
    <div class="row no-gutters">
      {% if page.sidebar_first %}
        <div class="order-2 order-lg-1 {{ sidebar_first_classes }}">
          {{ page.sidebar_first }}
        </div>
      {% endif %}
      <div class="order-1 order-lg-2 {{ content_classes }}">
        {{ page.content }}
      </div>
      {% if page.sidebar_second %}
        <div class="order-3 {{ sidebar_second_classes }}">
          {{ page.sidebar_second }}
        </div>
      {% endif %}
    </div>
  </div>

</main>

This is how i do it without page_manager or panels etc