[Template] Different widths for header & content

[Stinky666]

Jan 17, 2013 6:41:12 GMT -8 pawl said:

@infocenter_width: XXXpx;

#wrapper3 { width: @infocenter_width; margin: 0 auto; overflow-x: hidden; }

Those in the stylesheet, and you'd just need to wrap the info center code in a wrapper3 div.
Need me to post up the exact spot, or can you find it? =]

Hi Paul. I haven't tried the Info Center one yet, because I am currently working on a different theme.
However, I did try do it with the nav tree but it won't work for some reason. I just need the nav tree to be the same width as the content, and not as the header.

Note - I have tried both "navtree_width" and "nav_tree_width", neither seem to work. I think it's most likely just some stupid mistake on my part.
Here is what I have..

Layout Templates Forum Wrapper:
$[participated_threads_link]

<div id="navigation-tree">
$[navigation.tree]
</div>
$[header]
</div>
<div id="wrapper2">
</div>
div id="wrapper3">
<div id="content" role="main">


Style Sheets:
@wrapper_width: 861px;
@content_width: 800px;
@navtree_width: 800px;


#wrapper { width: @wrapper_width; margin: 0 auto; }
#wrapper2 { width: @content_width; margin: 0 auto; overflow-x: hidden; }
#wrapper3 { width: @navtree_width; margin: 0 auto; overflow-x: hidden; }

[pawl]

I'd just like to point out that the @value_names I've added are made up, you can call them whatever you want. =P

For what you're trying to do, just follow the initial post. When I tell you to change the template, ignore where I tell you to put the div tags.
Instead, put them here;

</header>
</div>
<div id="wrapper2">
$[participated_threads_link]

<div id="navigation-tree">
$[navigation.tree]
</div>

$[header]


That should (in theory, at least, not tested) work. =]

[Stinky666]

Jan 17, 2013 8:21:25 GMT -8 pawl said:

I'd just like to point out that the @value_names I've added are made up, you can call them whatever you want. =P

For what you're trying to do, just follow the initial post. When I tell you to change the template, ignore where I tell you to put the div tags.
Instead, put them here;

</header>
</div>
<div id="wrapper2">
$[participated_threads_link]

<div id="navigation-tree">
$[navigation.tree]
</div>

$[header]


That should (in theory, at least, not tested) work. =]

You're correct sir, it worked
Thanks

[jimmuck]

Hi' Paul,
I tried to do as you explained below


In your Style Sheet (Admin -> Themes -> Colours & Styles -> Style Sheet tab), find this line, approx 47;

@wrapper_width: 940px;
This is the size that your welcome table is going to be from now on. You can change the purple text for either a pixel value (ex; 750px) or a percentage value (ex; 100%).

Below this line, add the following;
@content_width: XXXpx;

BUT, when I try to ADD the last part there ........ @content_width: XXXpx;   I'm advised that there is a Syntax Error on line 48

The Line#48 ....   didn't move down and allow a space to insert  .... @content width: xxxpx;  The Text moved, but not the  #48.
Will I screw up if I 'SUBMIT' that please

^{FOLKS, through the kindness and input from PB's members and Staff? I have happily resolved this issue by using a 94% setting instead of a Pixel setting and I thank you all, Cheers Jimmuck.}

[pawl]

That's because you copied the XXXpx, instead of replacing it with a pixel width value (for example 800px)
You have to specify either an exact number of pixels, or a percentage of the available screen space (which will vary for each user based on resolution and window size) =]

[jimmuck]

Not to be smart Paul, bit I DID add a Pixel quantity ... I went from 1000px down to 84px and then I tried the % option and then made my choice ....

Thank you for posting the original Keys, as I used that as my guidance and the friends on here as my sounding board.

By the way, "How was London??" I used to live in Shepherd's Bush, '56-'57 & '60's started singing at The Two I's in Old Compton street the same time as Sir Cliffie, 
Screaming Lord Sutch, Vince Eager and me' 'Scotty Mack'
I still miss the old country, even after 44 years out here in Eskimo Land, cheers for all of your hep PB's .... you ROCK!


My Wee Board is Magic!!!!

[Stinky666]

pawl, dumb question.
I need 4 widths total,how would I go about doing this?
I need:

Header: 100%
Content: 92%

Then i want a border with a shadow to be about 94%
And finally, I want my nav menu/bar to be the same as the border with shadow: 94%
I have this bit for the BG repeat and shadow..


#wrapper { background-color: #111111; box-shadow: 0px 0px 30px rgba(0,0,0,0.5); width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }


This is for that concept I showed you, so if need be, you have the linked image to view to see what I mean exactly.
Much appreciated.

[pawl]

If it's for the one you showed me, would it not be easier to have the header incorporated into the background, what with the way that you've got it laid out? Would save you trying to position the menu above and over, so you could simply put the menu inside your wrapper at 94%, and then have the content sit inside that at 92%.

Hope that made sense. =P

[Stinky666]

Mar 1, 2013 15:32:28 GMT -8 pawl said:

If it's for the one you showed me, would it not be easier to have the header incorporated into the background, what with the way that you've got it laid out? Would save you trying to position the menu above and over, so you could simply put the menu inside your wrapper at 94%, and then have the content sit inside that at 92%.

Hope that made sense. =P

That makes perfect sense and I hadn't even considered doing that. it's a 1px width header/banner, so it'd be easy having two backgrounds (using that as center-top and repeat horizontally).

Will give it a shot shortly (don't see how I would screw it up lol)..

[Welshling]

Delusional is where i have added the codes as instructed but now there is a problem with the outside (far right) border. Its not there, should be 1px blue color. And there's a gap (far left) of the main banner, its filled with black and it shouldn't be there. It should just be the banner right?

[Welshling]

^ ignore the above please, it has been fixed by Stinky666

[Smudges]

pawl i added this code as usual and now its messed up the forum


forum url - theme-junkies.proboards.com/

[Stinky666]

Apr 16, 2013 19:02:56 GMT -8 Smudges said:

pawl i added this code as usual and now its messed up the forum


forum url - theme-junkies.proboards.com/

What's messed up for you exactly? The "only" thing messed to me, is it goes off screen to the right side by a hundred pixels or just over.
That happens for me, because my screen resolution is 1280px width, and you have your Wrapper width set to 1349px.


Edit:
I'd recommend setting the width to 100% rather than a pixel size.

[Welshling]

pawl hey there, i am using your concept because the forum width at present is too small for signatures sized 500 in width and so to save everyone editing the size of their images i thought it would be easier to mess around with the width's of the forum. But as you can see the board (forums and categories) aren't changing, even after adding your pieces of css to both the templates and css areas. Could you perhaps take a look at the source for me, on lines 47 and so on?

I think its either the border around the forum at fault, or perhaps the sidebar redux is messing with it somehow?

xlovesucksx.proboards.com/

Ideally i would like the forum width at 800 and the welcome table, 700 pixels.
thanks

EDIT: i have changed the welcome table to 963, because the boards themselves were un readable (too small) but now as you can see, its thrown everything out. the boards are way too big, when they should only be 800 right? i don't get it e.e

Stinky666 can you maybe help me please, save me waiting for Paul to login?

[Welshling]

Anyone?