hello, i been using adaptive theme for a while now...

one thing i cannot figure out how to set a bg to span the whole site, i can on the body, but say i wanted one in the tertiary content area, how would i go about having a tertiary bg span the whole site..

is it possible.. i am sure it is... but i cannot figure it out..

if you wouldn't mind helping me, it would be greatly appreciated.

CommentFileSizeAuthor
#10 layout.jpg34.97 KBgmclelland
#2 bg-tertiary.jpg39.5 KBstevenwood

Comments

Jeff Burnz’s picture

Jeff Burnz commented

I suppose I dont really understand what you are requesting here - can you describe what you are wanting to achieve rather than the implementation - what do you hope to achieve by wrapping things in SPAN elements?

Be aware also that wrapping block level elements like DIV's in an inline level element like a SPAN is invalid XHTML.

stevenwood’s picture

stevenwood commented
StatusFileSize
new bg-tertiary.jpg39.5 KB

sorry bad use of words there...

i dont mean span as in a html element.

i want a background to tile across the full width of the page for the tertiary region or the footer region not just in the container area which is currently set to 960px.

does that make more sense? i have added an image to hopefully try and explain what i mean, if your still confused..

Jeff Burnz’s picture

Jeff Burnz commented

The most robust way is to remove those regions from the #container div, its easier than it seems dude, just take them out and place them below the container div so they expand to the full width of the page.

Grizz’s picture

Grizz commented

Wzzzzup Jeff,

I think he's referring to the div's secondary-content,content-top,content-bottom,tertiary-content, do not expand horizontally with content/blocks.

I have/had same problem, tried adding a wrapper inside the region(s) among other things, but height in the CSS is the only thing that works.

Any other way to get these regions to expand with content?

Grizz

Jeff Burnz’s picture

Jeff Burnz commented

OK, I think you mean about clearfixing the region if you are floating blocks?

You can add class="clearfix" or if you use the dev version theres a markup free method in starter.css that uses the overflow:hidden; method for clearing floats.

Enzomaticus’s picture

Enzomaticus commented

You might want to take a look at the fusion theme to see how that handles this situation. It has a very easy way to use a full width background for the main content areas without much difficulty. Perhaps you can wrangle their method into AT quite easily.

I'm assuming that what you want to do is easily have a full width footer (or other region) while the rest of the page keeps its 960 width? If not, please disregard my answer.

stevenwood’s picture

stevenwood commented

Thanks Jeff, I was trying to make something simple, over complex...

gmclelland’s picture

gmclelland commented

I just ran into this issue as well. I think the best approach is how the Fusion theme handles it. They add a wrapper div with an id="row" around each region. Basically each major part has three things:

1. A row div
2. The region div
3. The region inner div

So if you had three parts to your layout say top, main, footer then it would look like

<html>
<body>
<div id=container>
  <div id=row>
    <div id=top>
      <div id=top-inner></div
    </div>
  </div>
  <div id=row>
    <div id=main>
      <div id=main-inner></div
    </div>
  </div>
  <div id=row>
    <div id=footer>
      <div id=footer-inner></div
    </div>
  </div>
</div>
</body>
</html>

The row div is set to expand 100% width
The region div is set to 960px or what width the main layout is
You set your margins and padding on the region inner divs instead of setting them on the region div so you don't break the grid's layout

So what's the best way to approach having backgrounds that span the full width, but still having you content inside of your layout width?

Do we just add the additional divs as wrappers?

Thanks for your help

Jeff Burnz’s picture

Jeff Burnz commented

Yes, that is exactly what I do - add a wrapper that expands the full width then I add a new class to the DIV's I want to take the width. You can override the layout variable and add this class so it gets the width set on it, so you retain the width theme settings.

I would never add this to the core theme because core is all about being lightweight, I do not like Fusions output at all, its verbose in the extreme and very bloated. AT is about starting off with less, then adding what you need.

gmclelland’s picture

gmclelland commented
StatusFileSize
new layout.jpg34.97 KB

Sorry Jeff, I don't quite follow what you are saying. Attached is what I'm trying to achieve. Sorry about the ugly colors.

Are you saying to set the width of div id=container to 100% and then add a wrapper div around each region ie. Header, Content, Footer with a class of row? Then set a class like "inner-container" on Header, Content, Footer and set the width of inner-container to 960px?

Sorry, I just need you to elaborate a bit more. I'm new to the Adaptive Theme.

scarer’s picture

scarer commented

Yes I am also trying to do something similar. I want to add a new full page wrapper that has a repeatable image at the top and then I want the footer region to have a repeatable background for the entire width of the page and the content of the footer region confined to the 960px wrapper.

So where do you add this class to your adaptive theme sub theme?

Jeff Burnz’s picture

Jeff Burnz commented

OK, sorry for taking so long with this, been a bit wrapped up with D7 development since we're getting close with that now, its all go!

I wrote a tutorial about this on my own site, so many people can find it: http://bit.ly/d2YoAY

gmclelland’s picture

gmclelland commented

Thanks Jeff, very helpful.

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Closed (fixed)