Elastic Header and Footer Override for The Theme Machine

Topics: Customizing Orchard, Writing themes
Feb 27, 2012 at 1:33 PM
Edited Feb 27, 2012 at 1:38 PM

Hi guys,

First of all, thank you for the awesome new CMS. It is exactly what we have been needing for some time now. I am really enjoying learning how to use it!

Ok, so I'm not a total noob, but it's been a while since I had to dive into CSS rules for CMS templates. I would like to have a theme based on The Theme Machine but have stretchy background areas behind the header, navigation and footer. Everything else is fine right where it is with 960px fixed width and centered, including the actual header and footer content and the navigation menu list items. I have been looking around in the documentation and in these forums, but I though I might get some good advice if I simply ask how you make this happen or if you can point me to the CSS elements that I would need to edit or create to achieve this.

Edit: I just realized this Codeplex page has exactly the configuration I am describing if that helps you visualize. :)

 

Thanks for any help!

Matt R

Coordinator
Feb 28, 2012 at 5:00 AM

I don't understand what you mean by "stretchy background areas".

Feb 28, 2012 at 11:24 AM

I think he wants the width of the header & footer to stretch 100% of the browser window, while the middle of the page stay centered and at a fixed width. 

 

mrenf, you can do this easily with css. Have you tried taking a look at examples of how this is done with websites where you've seen this type of layout? What part are you having trouble with, the cms/theme stuff, or the css? 

Feb 28, 2012 at 11:51 AM
Edited Feb 28, 2012 at 1:03 PM
TheMonarch wrote:

I think he wants the width of the header & footer to stretch 100% of the browser window, while the middle of the page stay centered and at a fixed width. 

mrenf, you can do this easily with css. Have you tried taking a look at examples of how this is done with websites where you've seen this type of layout? What part are you having trouble with, the cms/theme stuff, or the css? 

 

 

Thanks for the reply, TheMonarch and bertrandleroy!

This is what I want. I said background areas because just like on the Codeplex pages I still want the content of these areas fixed and centered. I know how to make the whole page fixed width or full width, but I am trying to find the right elements in the The Theme Machine to have just the background of the header, top navigation bar and footer stretch to full width while the actual content of these areas stays fixed width, right where it is. I was just hoping somebody could tell me which specific css elements I need to edit or override since you guys created the theme.

Thanks again for any help!

Feb 28, 2012 at 1:04 PM

I think I found another theme that does what I want out of the box, so please dont worry with this question.

Developer
Mar 2, 2012 at 7:25 AM

And which one is it?

Mar 2, 2012 at 11:38 AM
Piedone wrote:

And which one is it?


I'm trying the Medical Dark Grey right now. I think it is going to work out. Any of the Medical series would work and they are based on the Theme Machine so they have all the same zones, which is good for my project. I still need a solution for the full width footer though if you find anything.

Thanks,

Matt R

Developer
Mar 3, 2012 at 6:22 PM

Thanks!

Developer
Mar 4, 2012 at 8:35 AM

Try adding margin: 0 auto; to the wrapper CSS class for the header/footer. It will make that div 100% wide and center its contents.

Mar 5, 2012 at 1:12 PM
pszmyd wrote:

Try adding margin: 0 auto; to the wrapper CSS class for the header/footer. It will make that div 100% wide and center its contents.

 

pszmyd,


Thank you for the reply and thanks for the Advanced Menu module. I think I'm doing what you suggest, I moved the layout-header and layout-footer classes in the site.css file to their own rule group and set margin: 0 auto; as the only rule, but this also moves the content of the header and footer. I was trying to keep the content in place at 960px fixed width and only move the "background", like the Medical series themes. I just started with one of them since I could not yet figure out how to do this myself.  Is the wrapper CSS class you mention something different outside of the site.css file?

Thanks again for you reply,

mrenf

Developer
Mar 5, 2012 at 1:45 PM
Edited Mar 5, 2012 at 1:46 PM

You're welcome!

Basically, the markup should look similar to this:

<body>
    ...
    <div class="centered">
        <div class="fixedwidth"> Some footer content 
        </div>
    </div>
    ...
</body>

where

.centered { width: 100%; margin: 0 auto; }
.fixedwidth { width: 960px; }

This way you'll get the inner div centered inside the outer one.