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

Jeff Burnz’s picture

Are you talking about the whole header or just the background behind the header?

Sifro’s picture

the whole header

T.Mardi’s picture

You can enable this in the theme settings. One of the extensions allows full width headers / footers.

Jeff Burnz’s picture

@ #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.

Sifro’s picture

you can see it live on giochi-android . it

Basically it is like this:

<div id="header"> header and menu</div>
<div id="slider">Slider markup</div>
<div id="columns">Main page content</div>

CSS:

#header, #columns { max_width: 1270px; }

AT is set WITHOUT a max_width.

T.Mardi’s picture

Sorry, 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.

Sifro’s picture

Yes 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 :)

Sifro’s picture

Status: Active » Closed (fixed)
T.Mardi’s picture

Thanks 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.

Sifro’s picture

adding 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']); ?>

T.Mardi’s picture

Thanks 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.

Sifro’s picture

That's weird.
What happens if you use this code for example:
echo ' debug'; print render($page['slider']);

Do you see 'debug' printed?

T.Mardi’s picture

I've just tried that now and nothing appears Sifro.

T.Mardi’s picture

Here is how my page.tpl looks:

      <!-- !Header Region -->
      <?php print render($page['header']); ?>

    </header>
      <!-- !Slider Region -->
<?php
echo ' debug'; print render($page['slider']);
?>
    <!-- !Navigation -->
    <?php print render($page['menu_bar']); ?>
    <?php if ($primary_navigation): print $primary_navigation; endif; ?>
    <?php if ($secondary_navigation): print $secondary_navigation; endif; ?>
Sifro’s picture

It looks like page.tpl.php doesn't get loaded by Drupal.
Maybe you have to put it in the subtheme/templates directory?

T.Mardi’s picture

Figured 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')

    <?php if($page['slider']): ?>
      <div id="slider-wrapper">
        <div class="container clearfix">
          <?php print render($page['slider']); ?>
        </div>
      </div>
    <?php endif; ?>

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.

T.Mardi’s picture

Issue summary: View changes

more precise infos