By arisaves on

I am using the fusion theme with the 12 column 960 px grid. I'm creating a very graphic-heavy website.

I want the content inside of the 960 px grid to always center, but I want to create a 180 px area on both the left and right sides of the content area in which I'll [hopefully] be extending the artwork that lives inside of the main content area. Okay, I know it sounds confusing. Here's a graphic.

http://imageshack.us/photo/my-images/148/diagramy.jpg/

Simply put, I want to render two blocks that are outside of my content area, but in the same row.

THEN, I want to wrap the content area & newly created divs/blocks/whatever they end up being in another div so that I can add padding to the sides and bottom. The only thing that I always want to be center aligned is that 960px area in the middle.

I know there are probably a few ways to go about this.

In case you are curious, or to help put things into perspective, the main content area is going to be occupied by a sliced image, and the contents of the newly created areas will vary per page.

Thanks in advance :)

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

none of the options you've posted would work for what you want IIRC.

trying to add any of your suggestions (regions, panels, blocks) outside of the drupal wire frame will cause scroll bars as the browser will try to render the divs that reside outside the drupal regions.

the best of my knowledge tells me that you would have to accomplish this with a background graphic only.

arisaves’s picture

arisaves commented

I got somewhat close by adding regions in page.tpl and corresponding css -- but it wasn't exactly what I wanted. The trouble in doing it with a background graphic is that the image would be gigantic, and non-repeating parts/repeating parts would conflict. I don't feel like it's completely impossible to render divs outside of the grid -- but it will probably look a little ugly under the hood.

arisaves’s picture

arisaves commented

I can probably actually just layer multiple bg images + position them with background-position property. kinda messy but way less aggravating + detrimental to core.

arisaves’s picture

arisaves commented

Updating this just in case anybody ever needs to do the same:

1. I created .png files for each page that contained the background panels, separated by 960 px of transparency.
2. I added classes for different page backgrounds to my local.css file.
3. I installed the Context module, and created rules that added body classes to the template files for specific paths.

Add new context > Conditions > Path
> Reactions > Theme

Works beautifully!