I hope you will bear with me because I am very new to this, still trying to get my head round SASS, Compass and the rest. But fubhy's great intro encouraged me to try with Omega 4.
I have successfully set up a test site on my workstation (Mac), I've got SASS, Guard, and LiveReload all working, I've installed Omega 4 and created a subtheme using drush, and I've even successfully modified some of the typography (simple stuff: colours, fonts...).
Now I would like to try creating my own layouts, and this is where it gets difficult. I thought I would start simple from a copy of the "Divine" layout, and just add two regions under the Navigation region, one covering the left column, and the other the two right columns.
I have created a layouts folder for the .inc and .tpl.php files, and another for the Sass files.
My new layout shows up in the list of layouts for the sub-theme, and in the "debug" list for the sub-theme also.
However, when I displayed the site using the debug facility to display all regions, these regions do not show up like the others with their names displayed in blue at the side; it turned out that in order for them to appear I actually had to save the new developer settings.
But the regions are not behaving as I expected, since the new regions are being displayed in the same place as the original ones (though that might just be my ignorance of CSS/SASS). I would be very grateful for some pointers.
Here is the tpl.php

<div<?php print $attributes; ?>>
  <header class="l-header" role="banner">
    <div class="l-branding">
      <?php if ($logo): ?>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" class="site-logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
      <?php endif; ?>

      <?php if ($site_name || $site_slogan): ?>
        <?php if ($site_name): ?>
          <h1 class="site-name">
            <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
          </h1>
        <?php endif; ?>

        <?php if ($site_slogan): ?>
          <h2 class="site-slogan"><?php print $site_slogan; ?></h2>
        <?php endif; ?>
      <?php endif; ?>

      <?php print render($page['branding']); ?>
    </div>

    <?php print render($page['header']); ?>
    <?php print render($page['navigation']); ?>
  </header>

  <div class="l-main">
    <div class="l-content" role="main">
      <?php print render($page['page_top_left']); ?>
      <?php print render($page['page_top_right']); ?>
      <?php print render($page['highlighted']); ?>
      <?php print $breadcrumb; ?>
      <a id="main-content"></a>
      <?php print render($title_prefix); ?>
      <?php if ($title): ?>
        <h1><?php print $title; ?></h1>
      <?php endif; ?>
      <?php print render($title_suffix); ?>
      <?php print $messages; ?>
      <?php print render($tabs); ?>
      <?php print render($page['help']); ?>
      <?php if ($action_links): ?>
        <ul class="action-links"><?php print render($action_links); ?></ul>
      <?php endif; ?>
      <?php print render($page['content']); ?>
      <?php print $feed_icons; ?>
    </div>

    <?php print render($page['sidebar_first']); ?>
    <?php print render($page['sidebar_second']); ?>
  </div>

  <footer class="l-footer" role="contentinfo">
    <?php print render($page['footer']); ?>
  </footer>
</div>

Here is the SASS which I have added (I've only touched the "desk" breakpoint for the moment

  .l-region--navigation {
    clear: both;
  }
  .l-region--page-top-left {
    @include grid-span(1, 1);
  }
  .l-region--page-top-right {
    @include grid-span(2, 2);
  }
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

joel_guesclin’s picture

Status: Active » Closed (fixed)

Stupid of me. I just realised that the two extra regions are enclosed in the l-content div, which actually spans just the first column. Oddly, Sass doesn't complain about this.

joel_guesclin’s picture

Issue summary: View changes

Should not have tried to enclose HTML in PHP tags!