Header Spanning Page but not boards...

[Mickey Blue Eyes]

Hi there, first post here since the update...

I need to find a way to have my header (background, menu bar, navtree etc.) span horizontally right to the edges of the page <-----------> wile restricting he rest of the forum below to 980px width.

Th old code I had in place for this does not work.

May thanks in advance,

Mick.

[Stinky666]

Jul 16, 2013 3:41:39 GMT -8 Mickey Blue Eyes said:

Hi there, first post here since the update...

I need to find a way to have my header (background, menu bar, navtree etc.) span horizontally right to the edges of the page <-----------> wile restricting he rest of the forum below to 980px width.

Th old code I had in place for this does not work.

May thanks in advance,

Mick.

Surprised no one has replied to this.
pawl has posted a template modification for this, which is very easy to install/use/edit:
support.proboards.com/thread/434970/template-different-widths-header-content

[Mickey Blue Eyes]

Thanks a lot Stinky

[Mickey Blue Eyes]

Just a quick follow up...

At the moment the top background, menu bar background and menu buttons (home, search etc.) ALL span the entire 100% page width.

Sounds strange I know but What I need to achieve is:

Top Background behind logo: spans page 100% (already does this)
Backgroud gradient image behind menu bar buttons: spans page 100% (already does this)
Container for menu bar buttons: Restricted to 980px
Rest of the forum below: restricted to 980px
Footer background: span page 100%

Here are some images to make things clearer:

Here is what the forum currently looks like:




Here is what I'm trying to achieve:





All help much appreciated, thanks in advance!

Mick.

[Brian]

Hi, Mickey Blue Eyes.

Go to Structure > Layout Templates > Forum Wrapper and find the line in red. Add the line in green before it, so it looks like this.

<div id="navigation-wrapper">
<div id="navigation-menu" class="ui-helper-clearfix">

Now find </header> and add another </div> before it.

</div>
</div>
</header>

Next, go to Themes > Advanced Styles & CSS > Style Sheet. Find this line (usually line 263).

#navigation-menu { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(0, 0, @nav_bar_border_radius, @nav_bar_border_radius); }

And change it to this.

#navigation-wrapper { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(0, 0, @nav_bar_border_radius, @nav_bar_border_radius); }

Finally, add this to the very bottom of the style sheet.

#navigation-menu { width: @content_width; margin: 0 auto; }

You should be good to go after that.

[Brian]

Also, the footer should already span the width of the page by default.

Can you link me to your forum so I can investigate?

[Mickey Blue Eyes]

Thanks for all the help Brian, bizarrely when I saved all the changes the footer image went back to spanning the page again! so easy fix for that one.

Last silly questions now I promise...

I now have a background image set for the Nav-Tree, is there a way of doing what we just did for the tree too? (nav-tree background image spanning 100% but content locked to 980px)



Thanking you again!

[Mickey Blue Eyes]

*quick bump* any help sorting the nav-tree ^^ that really is all there is left to do now

Doesn't have to be Brian by the way haha