Hi,
I'd like my website to have an header as wide as the user's screen, and the rest of the page not wider than a fixed value.
In "Settings -> Standard Layout -> Set a max width" I know I can set this on a general basis, but what's the cleanest way to do such a separation between header and rest of content in AT_Subtheme?
My guess is:
1) remove max width from theme settings
2) add max-width attribute to the container (#columns) below the header
3) add "margin: 0 auto;" to the #columns div to center it
But I'm asking because it's the first time i'm trying to do a responsive layout, and i'm afraid of screwing up the great job made by AT!
Thanks!
Comments
Comment #1
Jeff Burnz CreditAttribution: Jeff Burnz commentedAre you talking about the whole header or just the background behind the header?
Comment #2
Sifro CreditAttribution: Sifro commentedthe whole header
Comment #3
T.Mardi CreditAttribution: T.Mardi commentedYou can enable this in the theme settings. One of the extensions allows full width headers / footers.
Comment #4
Jeff Burnz CreditAttribution: Jeff Burnz commented@ #3, not really, the full width headers setting will just enable a full width background, to make a the whole header full width requires some template coding. Attach your page template as you have it now and we'll take a look.
Comment #5
Sifro CreditAttribution: Sifro commentedyou can see it live on giochi-android . it
Basically it is like this:
CSS:
AT is set WITHOUT a max_width.
Comment #6
T.Mardi CreditAttribution: T.Mardi commentedSorry, my bad Jeff. I didn't realise it was only for background images.
What template would you have to edit and what would you have to do to make a region full width in AT?
I had a look at the link Sifro posted but the slide show isn't the full width of the browser. To make a slider in the header region the full width of the browser would I need to do please?
Many thanks.
Comment #7
Sifro CreditAttribution: Sifro commentedYes I decided to change the layout because i didn't like it that way, but if you want to achieve something like that, you use the technique i described in my previous post.
You'll have a full width region called #slider and the fixed-width #header and #columns above and below it :)
Comment #8
Sifro CreditAttribution: Sifro commentedComment #9
T.Mardi CreditAttribution: T.Mardi commentedThanks Sifro, I managed to get a full width area by using max-width on the Header region.
I need to find a way of adding a new region called 'Slider' so that region is full width, I would like to keep the header at normal width. I haven't been able to find any docs on how to add a new region to AT 3.x yet so will keep looking.
Thanks for your help.
Comment #10
Sifro CreditAttribution: Sifro commentedadding a new region in AT shouldn't be any different from adding a region in any other themes.
Define your region in the template.info file, add this to your page.tpl.php and clear the cache:
<?php print render($page['sidebar']); ?>
Comment #11
T.Mardi CreditAttribution: T.Mardi commentedThanks for that Sifro, but I've already tried that and it doesn't work.
I've decalred the new region in my .info file, copied the page.tpl to my sub themes directory and pasted that code code (replacing sidebar) with the name of my region, slider.
The region shows up on the blocks page but when I add anything to that region from the blocks page nothing shows up. Caches have been cleared several times.
Comment #12
Sifro CreditAttribution: Sifro commentedThat's weird.
What happens if you use this code for example:
echo ' debug'; print render($page['slider']);
Do you see 'debug' printed?
Comment #13
T.Mardi CreditAttribution: T.Mardi commentedI've just tried that now and nothing appears Sifro.
Comment #14
T.Mardi CreditAttribution: T.Mardi commentedHere is how my page.tpl looks:
Comment #15
Sifro CreditAttribution: Sifro commentedIt looks like page.tpl.php doesn't get loaded by Drupal.
Maybe you have to put it in the subtheme/templates directory?
Comment #16
T.Mardi CreditAttribution: T.Mardi commentedFigured it out Sifro, I had to add a copy of page--full-width-wrappers.tpl to my subtheme also and print this in there (note: these were in the base sub theme directory, not in a folder called 'templates')
Works great now. Thanks for your assistance on this, much appreciated! :)
I think that because I have enabed full width wrappers in my theme settings I had to use this template file? Is the page.tpl not needed in this instance?
EDIT: Just deleted page.tpl from my sub theme folder, flushed caches and everything works fine with just the page--full-width-wrappers.tpl file edited.
Comment #16.0
T.Mardi CreditAttribution: T.Mardi commentedmore precise infos