Adding a sidebar region to Kalatheme

UTANdev commented 9 years ago

I love how Kalatheme easily brought me into the Panopoly+Bootstrap world!

Scenario

My current project, however, requires a traditional sidebar on most inner pages.

Approach 1

In the IPE, I can place sidebar content inside one of the layouts which feature a right column.

Problems

This approach greatly limits the number and usefulness of layouts available to content editors:

Layouts without a full-height right column cannot be used
By monopolizing a region, the sidebar prevents content editors from accessing important features like a trifold (3-region) row; not a single layout includes both a trifold and right sidebar.

I could create custom layouts as needed, but isn't the point of Panopoly to give users a plethora of available layouts without paying a developer?

Approach 2

Add a sidebar region to my Kalatheme subtheme.

(The region will simply contain the block generated by a standard_sidebar mini-panel, giving users Panels-powered control over the sidebar, even though it lies outside Kalatheme's One Region. But that's beside the point — my problem deals with adding the region, not what's inside it.)

This is the approach I would like to follow, as every single Panopoly layout would remain available to users — Kalatheme would still control the $page['content'] region, as it does now.

Problems

I want the layout to be responsive, and I'm fairly inexperienced in that respect.

I would essentially code page.tpl.php as:

[skipping past header, tabs, etc.]
Bootstrap .container
  Bootstrap .row
    if page has a sidebar
      <div class="col-sm-8">$page['content']</div>
      <div class="col-sm-4">$page['sidebar']</div>
    else
      <div class="col-sm-12">$page['content']</div>
    endif
[closing elements, footer]

At first, I was going to post for guidance because that would require nesting my .container with existing .containers inside Kalatheme/Panopoly templates — but I see that even without my handiwork, Kalatheme pages already include containers within containers, yet Bootstrap doesn't explode.

So would this work? (Perhaps with some minor CSS tweaks) Do you see any red flags with my approach? Thanks for any insight.

labboy0276 commented 9 years ago

This is a one region theme, we won't add a region to the theme itself. It defeats the purpose of the theme.

Just use your own layout plugins and you should be good. We do it all the time, no need to pay for them, takes a couple minutes to make one. If you need help with that, ping us back here and I can write how to do it real quick.

UTANdev commented 9 years ago

Oh, I wasn't asking for Kalamuna to add the region. I understand your theme's philosophy; adding a region would dilute it. I was asking for myself: I want to add a region and, since this is my first attempt at responsive anything, was asking for guidance.

As for layout plugins, I do know how to create them (I've done one for the home page) and they're fun! However, I can't justify coding a sidebar-added version of all 31 layouts available in Panopoly/Kalatheme, just so I can offer my client the whole panoply of Panopoly layouts for his sidebar-requiring site. (I wasn't clear about "paying a developer" — I'm the developer, the client is paying me to build his site, and adding a sidebar region outside Panopoly's content region would give him access to every Panopoly layout.)

labboy0276 commented 9 years ago

Oh OK,

My apologies. I guess I didn't fully understand what you are trying to do.

Yes you an include containers within containers. This explains the Bootstrap Grid system:

http://getbootstrap.com/css/#grid-example-basic

Other than that, I would just create the layouts and tell the client not to use the Radix / Panopoly ones and to only use the ones you created.

andrewmallis commented 9 years ago

In your subtheme, you can create new layouts:

sites/all/themes/mytheme/layouts/page/my-custom-layout/

which will contain

my-custom-layout.inc

<?php
/**
 * @file
 * Plugin definition for my awesome site with a Sidebar First layout.
 */

$plugin = array(
  'title' => t('Two Column with Sidebar First'),
  'icon' => 'my-custom-layoutt.png',
  'category' => t('My Awesome Site'),
  'theme' => 'tmy-custom-layout',
  'css' => 'my-custom-layout.css',
  'regions' => array(
    'header' => t('Header'),
    'sidebar' => t('Sidebar'),
    'content' => t('Content'),
    'footer' => t('Footer'),
  ),
);

my-custom-layout.tpl.php

<?php
/**
 * @file
 * Template for my awesome site's Two Column with Sidebar First layout.
 *
 * Variables:
 * - $content: An array of content, each item in the array is keyed to one
 *   region of the layout. This layout supports the following regions:
 *   - header
 *   - sidebar
 *   - content
 *   - footer
 */
?>

<section class="content-main layout-two-col-sidebar-first">

  <?php if ($content['header']): ?>
  <header class="header-content-main header-two-col-sidebar-first">
    <div class="panel-panel">
      <div class="panel-panel-inner">
        <?php print $content['header']; ?>
      </div>
    </div>
  </header>
  <?php endif; ?>

  <div class="columns-content-main columns-two-col-sidebar-first clearfix">

    <aside id="sidebars" class="sidebar-content-main sidebar-two-col-sidebar-first left">
      <div class="panel-panel">
        <div class="panel-panel-inner">
          <?php print $content['sidebar']; ?>
        </div>
      </div>
    </aside>

    <section class="gbz-content-main content-two-col-sidebar-first">
      <div class="panel-panel">
        <div class="panel-panel-inner">
          <?php print $content['content']; ?>
        </div>
      </div>
    </section>

  </div><!-- /.columns-content-main -->

  <?php if ($content['footer']): ?>
  <footer class="footer-content-main footer-two-col-sidebar-first">
    <div class="panel-panel">
      <div class="panel-panel-inner">
        <?php print $content['footer']; ?>
      </div>
    </div>
  </footer>
  <?php endif; ?>

</section>

The sidebar isn't conditional above, but the footer is. I don't advise a conditional sidebar. Rather provide a different layout completely. It will save you headaches. Don't extend every variation, or you'll be bug squashing edge cases. Just make the layouts needed for the project. The Panopoly layouts are there for general purpose use cases, but it sounds like your project has specific needs.

You'll notice 0 bootstrap classes in this example. Feel free to use them if you like. We just extend our class names in sass like so:

.columns-content-main{
// Defaults to two-col-content-first
  [id="sidebars"] {
    @extend .col-md-3;
  }

  .gbz-content-main{
    @extend .col-md-9;
  }

UTANdev commented 9 years ago

I have decided to follow your advice and go with the flow — create some new Panels layouts to manage my sidebar in the same way as the content area. In the process, I came up with a nifty way to quickly generate sidebar-enabled versions of all Radix layouts.

I will share my results with the community when done, giving developers an alternative to Radix for sites with a more traditional layout, i.e. one with a sidebar on most pages. Thanks for your input!

andrewmallis commented 9 years ago

@UTANdev – any news on your approach?

UTANdev commented 9 years ago

I had to leave this project aside for a while, but here's my plan:

Requirements

Most pages will include a standard ¼ site sidebar; all Radix layouts will be available for the ¾ main content area.
Some pages will have no standard site sidebar; on those, the content area will fill the entire container width.

Approach

To let the client choose whether a page should have the standard site ¼ sidebar or not, I will need two sets of layouts:
- Existing Radix for “no MTMS sidebar” layouts
- Modified Radix (with added MTMS sidebar)
The main content area and sidebar, respectively, use ¾ and ¼ of the container width. To get my variety of 2/3/4-column layouts in the main content area, with/without a quarter-width sidebar present, I will need a 48-column grid. The math goes as follows:
- Radix layouts use columns that can be ½, ⅓ or ¼ their container width.
- This means the content area must be a multiple of 12 columns.
- The full grid must support 12 columns at full width (no sidebar) or ¾ width (sidebar present).
- The smallest number of columns that supports both those criteria is 48:
- With sidebar = 36-column content area (divides into 2, 3, 4) + 12-column sidebar
- Without sidebar = 48-column content area (divides into 2, 3, 4)
Creating all those panel layouts is easy:
1. Regenerate Kalatheme with a 36-column grid.
2. Add a 12-column “Site sidebar” region to every Radix layout.
3. Rename each layout “layout_name + site sidebar”.
4. Rename category “Radix + site sidebar”.
5. Regenerate Kalatheme with a 48-column grid. This creates the full-width Radix layouts.

This will create a few duplicates (e.g. adding a ¼ sidebar to Burr creates a layout identical to Whelan), but for client usability, I will leave the duplicates alone. Otherwise, the client would need to hunt the sidebarless category for the one or two layouts missing from the sidebar category.

break9 commented 8 years ago

@andrewmallis hey Andrew! I added a custom layout to sites/all/themes/mytheme/layouts/page/my-custom-layout/ which includes a .inc, .png, and a .tpl.php, but I can't get it to show up in the panels in place editor when i try to change layouts. Any advice?

soniktrooth commented 8 years ago

@break9 you need to add this to your theme .info file:

plugins[panels][layouts] = layouts

break9 commented 8 years ago

yes, i needed to enable it... : / thanks!!

/admin/panopoly/layouts

drupalprojects / kalatheme