I'd like to be able to split the #page div into at least two separate divs - ie. #page-upper & #page-lower - while retaining the ability to configure the grid via settings. Should this be more of feature request that #page be a class rather than id so multiple divs can inherit the grid settings? Or is there an easy way to implement this in my own theme, again, while retaining control the settings page offers.

Comments

tsi’s picture

tsi commented

There's quite an elegant way of doing this,
first you'll have to copy sasson.scss into your sub-theme and call it from your .info file,
then in your new sasson.scss file simply add :

#page-upper,
#page-lower {
  @extend #page;
}

Don't forget to clear your cache.

greenskin’s picture

greenskin commented
Status: Active » Fixed

Awesome, thanks!

greenskin’s picture

greenskin commented
Status: Fixed » Active

Hmm, just tried this and it doesn't work. FIrst off my theme's sasson.scss file doesn't seem to be taking, but despite this I put the code in the sasson theme's sasson.scss file to test it and it still doesn't work.

Let me elaborate on what I'm trying to accomplish. I want to split my #page into two sections consisting of an upper and a lower. I want separate backgrounds for these two that go to the edges of the window. So my page.tpl.php would look similar to this in structure:

<div id="page-upper-wrapper">
  <div id="page-upper">
    <header>...</header>
  </div>
</div>
<div id="page-lower-wrapper">
  <div id="page-lower">
    <div id="main">...</div>
  </div>
</div>

The #page-upper and #page-lower would inherit what is given to #page namely the grid. Each wrapper would have it's own background with a 100% width.

What am I doing wrong?

Edit: I should note I'm using a responsive layout.

tsi’s picture

tsi commented

Yes, I've pretty much understood what you're trying to do.
did you call your new sasson.scss from your sub-theme's .info file ? did you clear your caches ? there is no reason this file wouldn't be taken by your theme.
I do see now that @imported styles cannot be @extended, I wonder if that should clasify as a bug or is intentional.
you may try and copy the @imported styles (all the files imported in the "Media Queries for a Responsive Design" section) into the new sasson.scss you've created, that should work even though feels a bit hacky.

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
commented

I think I'd like something similar as greenSkin. It would be great to have a full width (100 % of browser window) wrapper div for every main page element (header, menu bar, content, footer etc.), just like -- for example -- Corolla has. So we could add different backgrounds to them easily.

I think the page.tpl.php should be modified to make it possible. But I do not not know how should I do it to keep the grid settings work.

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
commented
Category: support » feature

It's more a feature request than a support request IMHO.

tsi’s picture

tsi commented
Status: Active » Postponed

This won't happen in Sasson because we're trying to keep it simple and minimal in terms of markup but I do plan on writing a sub-theme that will have a similar markup, setting to 'postponed' and will report back when it is published, let's hope it won't take too long.

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
commented

Can't wait it! ;o)

tsi’s picture

tsi commented
Status: Postponed » Fixed

Check out Full On, you're gonna love it :)

thamas’s picture

thamas
Primary language Hungarian
Location Hungary
commented

I will try and analyse it as soon as possible! Thanks!

Status: Fixed » Closed (fixed)

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