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);
}
Comment | File | Size | Author |
---|---|---|---|
Capture d’écran 2013-10-29 à 00.45.10.png | 162.11 KB | joel_guesclin |
Comments
Comment #1
joel_guesclin CreditAttribution: joel_guesclin commentedStupid 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.
Comment #1.0
joel_guesclin CreditAttribution: joel_guesclin commentedShould not have tried to enclose HTML in PHP tags!