Hi,

I would like to have the same styling for the grid 1 row as abovecontent and belowcontent because instead of a 3-column grid module, I need 3 1-column modules side by side. I was thinking of using grid 1, grid 2 and grid 3 but I like the way abovecontent and belowcontent have a background that looks like a 'page'.

Can you point me in the right direction as to what css to change?

Any help is appreciated!

Joanne

Hi Joanne,

Do you have a link for the site so far?

Cheers

Oops! Sorry about that.

37.60.247.206/~jlawma76/


Joanne

Hi Joanne,

Should I be seeing grid1 content on the home page?

Cheers
Paul

No, I haven't set up the modules yet. I am still waiting for my client to make up her mind about what exactly she wants on the home page. I thought I'd have an answer sooner. Sorry.

Can we just wait on this and I'll let you know when I have something for you to look at?

Thanks.

And Happy New Year, btw!

Joanne

Yes sure no problem

Cheers
Paul

And Happy New Year from me and the team

Hi Again,

I have set up a grid1 row using module positions grid1, grid2 and grid3. Can you help me style them to look like abovecontent?

Thanks,

Joanne

Hi Joanne,

Just checking but you have no title on the grid1 position - is that correct?

Correct. I am not showing the titles right now.

Can you just add a quick pic with arrows pointing to the areas you want to change?

I'm not very good at this but here it is. Basically, I'd like to give grid1 row a border like abovecontent and belowcontent. I tried using this css:

#grid1wrap {
background: #fff none repeat scroll 0 0;
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.05);
float: left;
margin-bottom: 60px;
padding: 60px 30px;
width: 100%;
}


...but it didn't give me the 'page' effect -- a white box with the background color #f2f2f2 -- the same styling as #mid-col-inner.

Maybe it's not possible.

Joanne

The whole reason I'm doing this is because the three modules on the homepage need slightly different styling and I couldn't get that using a 3-column grid in the #abovecontent position. The video in the middle doesn't need a 'readmore' and the other two link to two different categories. I couldn't figure out how to achieve this using a 3-column grid.

Maybe I'm missing something and there's an easier way. I might be asking for more headaches because if I hide the main content on the homepage, I lose the #belowcontent -- and if I don't hide the main content on the homepage, I have an empty #mid-col-inner.

Joanne

Hi Joanne,

It's a little complicated by the fact there is grid1, grid2 and grid3

So the styling can't apply to just the one position

#grid1wrap {
box-shadow: 8px 8px 0 rgba(0,0,0,0.05);
padding: 60px 30px;
background: #f2f2f2;
}

#grid1wrap #grid1, #grid1wrap #grid2, #grid1wrap #grid3 { background:#fff;padding: 60px 30px;webkit-box-shadow: 8px 8px 0 rgba(0,0,0,0.05); -moz-box-shadow: 8px 8px 0 rgba(0,0,0,0.05); box-shadow: 8px 8px 0 rgba(0,0,0,0.05);}

Thanks, Paul.

Your code works well -- but I think I'll have to come up with another solution. I still have the #mid-col-inner problem. I can't turn that off without losing #belowcontent etc. I need to rethink this.

Thanks again for all your help!

Joanne

No problem

Good luck with it

Cheers
Paul