Hi,

I'm new to omega 4, and i'm trying to build a custom subtheme with it's own layout.

here is my theme.info :

name = shaylen_omega
description = Please provide a description for your theme.
base theme = omega
screenshot = screenshot.png
engine = phptemplate
core = 7.x

; ========================================
; Stylesheets
; ========================================
stylesheets[all][] = css/shaylen-omega.normalize.css
stylesheets[all][] = css/shaylen-omega.hacks.css
stylesheets[all][] = css/shaylen-omega.styles.css
stylesheets[all][] = css/shaylen-omega.no-query.css

; ========================================
; Scripts
; ========================================
scripts[] = js/shaylen-omega.behaviors.js

; ========================================
; Regions
; ========================================
regions[header] = Header
regions[navigation] = Menu
regions[content_top] = Content Top
regions[sidebar_left] = Sidebar Left
regions[sidebar_center] = Sidebar Center
regions[sidebar_right] = Sidebar right
regions[left_column] = Left Column
regions[right_column] = Right Column
regions[content_bottom_first] = Content Bottom First
regions[content_bottom_second] = Content Bottom Second
regions[postscript_first] = Postscript First
regions[postscript_second] = Postscript Second
regions[postscript_third] = Postscript Third
regions[postscript_fourth] = Postscript Fourth
regions[footer_first] = Footer First
regions[footer_second] = Footer Second

and here is my page.tpl :

<div class="l-page">
    <header class="l-header">
        <div class="header">
            <?php print render($page['header']); ?>
        </div>
        <div class="navigation">
            <?php print render($page['navigation']); ?>
        </div>
    </header>
    <div class="l-main">
        <div class="l_content" role="main">
            <?php print render($title_prefix); ?>
            <?php print $messages; ?>
            <?php print render($tabs); ?>
            <?php print $feed_icons; ?>
        </div>
        <div class="content_top">
            <?php print render($page['content_top']); ?>
        </div>
        <section class="sidebars">
            <div class="sidebar_left">
                <?php print render($page['sidebar_left']); ?>
            </div>
            <div class="sidebar_center">
                <?php print render($page['sidebar_center']); ?>
            </div>
            <div class="sidebar_right">
                <?php print render($page['sidebar_right']); ?>
            </div>
        </section>
        <section class="columns">
            <div class="left_column">
                <?php print render($page['left_column']); ?>
            </div>
            <div class="right_column">
                <?php print render($page['right_column']); ?>
            </div>
        </section>
        <div class="content_bottom_first">
            <?php print render($page['content_bottom_first']); ?>
        </div>
        <div class="content_bottom_second">
            <?php print render($page['content_bottom_second']); ?>
        </div>
        <section class="postscripts">
            <div class="postscript_first">
                <?php print render($page['postscript_first']); ?>
            </div>
            <div class="postscript_second">
                <?php print render($page['postscript_second']); ?>
            </div>
            <div class="postscript_third">
                <?php print render($page['postscript_third']); ?>
            </div>
            <div class="postscript_fourth">
                <?php print render($page['postscript_fourth']); ?>
            </div>
        </section>
    </div>
    <footer>
        <div class="footer_first">
            <?php print render($page['footer_first']); ?>
        </div>
        <div class="footer_second">
            <?php print render($page['footer_second']); ?>
        </div>
    </footer>
</div>

and finally, my global scss :

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "toolkit-no-css";
@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";

img, media, table, thead, tbody, th, td, tr{
	max-width: none;
	@include breakpoint (0px $desktop){
		max-width: 100%;
	}
}

table, thead, tbody, th, td, tr {
	@include breakpoint(0px $desktop){
		display: block; 
	}
}

body {
	background-image: url('../images/background.jpg');
	background-repeat: repeat-x;
	background-position: top left;
	background-attachment: fixed;

	.l-page {
		background-color: white;
		padding:5px;
		margin:auto;
		@include breakpoint($smartphone){
			width:$smartphone;
		}

		@include breakpoint($tablet){
			width:$tablet;
		}

		@include breakpoint($desktop){
			width:$desktop;
		}

		.l-main {
			@include clearfix;
			.content_top {
				@include grid-span(12,1);
			}

			.sidebars {
				@include grid-span(12,1);
				.sidebar_left {
					@include grid-span(4,1);
					@include breakpoint(0px $tablet) {
						@include grid-span(12,1);
					}
				}

				.sidebar_center {
					@include grid-span(4,5);
					@include breakpoint(0px $tablet) {
						@include grid-span(12,1);
					}
				}

				.sidebar_right {
					@include grid-span(4,9);
					@include breakpoint(0px $tablet) {
						@include grid-span(12,1);
					}
				}
			}

			.columns {
				@include grid-span(12,1);
				.left_column {
					@include grid-span(6,1);
				}

				.right_column {
					@include grid-span(6,7);
				}
			}

			.content_bottom_first {
				@include grid-span(12,1);
			}

			.content_bottom_second {
				@include grid-span(12,1);
			}

			.postscripts {
				@include grid-span(12,1);
				.postscript_first{
					@include grid-span(3,1);
				}
				.postscript_second{
					@include grid-span(3,4);
				}
				.postscript_third{
					@include grid-span(3,7);
				}
				.postscript_fourth{
					@include grid-span(3,10);
				}
			}

			.footers {
				@include grid-span(12,1);
				.footer_first {
					@include grid-span(6,1);
				}

				.footer_second {
					@include grid-span(6,7);
				}
			}
		}
	}
}

with my _grid.scc variables :

$grids: 12;
$gutters: 1/3;

$desktop: 960px;
$tablet: 768px;
$smartphone: 480px;

And here is a screenshot of what the block demonstration shows : http://image.noelshack.com/fichiers/2014/09/1393618568-screenshot.png
So the postscripts and footers regions aren't working correctly. I spent a few hours testing everything that could come to my mind, without any success. What's wrong with my implementation? :/

Comments

Shaylen’s picture

Issue summary: View changes