[Template] Different widths for header & content

[pawl]

Filled this as a request, thought I'd post it up in case others weren't sure how to do it.

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;
The orange text will be the width of your boards view on the homepage, threadview in boards etc. Basically everything below the ads. Again, px or % values are fine.



Then, find this, approx 128;
#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }

Below it, add the following line;
#wrapper2 { width: @content_width; margin: 0 auto; overflow-x: hidden; }




Now, in your Layout Templates (Admin -> Themes -> Layout Templates), head to Forum Wrapper.
Between the $[header] and <div id="content" role="main"> (approx lines 55 & 56), add the following red text;

$[header]
</div>
<div id="wrapper2">
<div id="content" role="main">

Easy! =]

As ever, leave a reply if you have any problems or questions, or if I've made a silly mistake anywhere!

[Maiden]

Possibly slightly off topic pawl

But I have this: solariatest1.freemessageboards.com/

If I added the orange bit of your above suggestion would that allow me to push the content back to beside the sidetable? Would I need to add all of it for it to work properly?

Thanks.

[pawl]

The orange bit won't work without the red bit, and vice versa.

Basically, the red bit tells some of the tables (via the template) that they want to be a difference width. The orange bit tells them (from the stylesheet) what width they should be, and if they should do anything else.

To be completely honest with you though, I've not really played with side tables at all, as they're not something I am a massive fan of. While you could use this to make the boards smaller, they're still centred, so they would be way too small. I would probably recommend having a go at reducing the size of the tables by however wide the sidetables are (including a few px for a gap), and adding a margin-left for the same amount.


Something like this (just giving you the values here, use the first post as your guide still);

@wrapper_width: 940px;

@content_width: 895px;

#wrapper2 { width: @content_width; margin: 0 0 0 245px; overflow-x: hidden; }


Can't guarantee it'll work, as it's completely untested, but it's always worth a go. Just make sure you back up your original settings, either in a NotePad (or similar) file, or by having duplicates of the original code open in another tab!

[Maiden]

Hi pawl!

Thanks!

solariatest1.freemessageboards.com/

I had to put in a 31% rather than the 245px in you guide, but it seems to work perfectly.

Thank you so much. Can start to actually lay down a V5 layout for us now and get ready for conversion.

[pawl]

Jan 7, 2013 5:02:57 GMT -8 Maiden said:

Hi pawl!

Thanks!

solariatest1.freemessageboards.com/

I had to put in a 31% rather than the 245px in you guide, but it seems to work perfectly.

Thank you so much. Can start to actually lay down a V5 layout for us now and get ready for conversion.

The only problem with percentages is that they're relative to your screen resolution though.
Both my laptops for example run at 1280x800, and your boards still overlap the sidetables. How far overlapped were they at 245px? You should be able to up that number until they display correctly, only they'll display properly in all screen sizes then.

The way you have it now, while it might be right for you, will overlap for some (like me) or have a massive gap for others.

[Maiden]

at 245px the board was pressed right up on the left hand side of the screen... but I hadn't thought of that problem with the percentage. I've played again and I think it must've just been glitchy as now 374px works perfectly (Does it look okay your end?)

The only odd thing now is that the footer is centered the content rather than matching the welcome table in width?

Thanks for your help

[pawl]

Oddly I find that a width of 693 and a margin of 410 works better on my display.

The footer will be an easy enough fix.
You'll have to leave it with me though, about to get ready to leave for a meeting before work. Back at about 11pm gmt, will have a wee play with you then. Doesn't help that pretty much everything I've done for you so far was just educated guesses, haha. Either way, I'll hit you up when I get back from work. =]

[Maiden]

Thanks pawl, really appreciate it.

Your educated guesses go better than mine then

[Maiden]

So I couldn't resist fiddling.... and wondered if you'd have any more amazing help for me.

Tim Camara told me how to make the sidebars accept % values so I've set that at 20% and then the pixel attributes in purple and orange above as

@wrapper_width: 80%;
@content_width: 60%;

through trial and error and the header image/navigation overlaps the sidebars.

Then 30% for the padding.

Setting the wrapper width to 100% makes the green stretch beyond the edges of my screen width wise but does unoverlap the header thing and the sidetables.

I was hoping to do everything with % variables as we have lots of mobile/tablet users and a whole plethora of screen sizes and resolutions and I recall someone telling me % was better for that?

[pawl]

If you want the header to be the same size as the boards, and for the side tables to sit next to them, then you don't actually need to use this code. You want to revert to having the wrapper cover both the header and the boards, and simply change the margin for that.

As it is, you've got the wrapper_width (for the header) larger than the content_width (for the boards), which means that it's going to overlap.

Are you trying to get the side tables under the banner, or next to them?

[Maiden]

Next too.

I've set the default theme to a purple and grey one which illustrates how the sidebars looked before applying anything

[pawl]

If that's the case, I'd say that you don't need this modification at all. Doesn't installing the sidebar plugin automatically do what you're wanting it to? Or does it display below the banner as standard? Either way, you don't need to separate the header from the boards and set different widths - this mod will just over-complicate things. =P

[Maiden]

No the sidebar plugin is very limited.

Originally when I posted in this thread I had the side bar under the welcome header next to the nav tree (moved up from where the plugin puts it to solve a pm duplication issue) which was why I though I wanted this code.

Then I moved the ad up above the welcome header and realised that as I'd fixed the sidebar relative to the screen (and don't know how to make it scroll until it centres on the side of the page and then stop - I guess a bit pagination esque) I'd have to move it up even further

And then we get to where we are now where I don't need the code, unless someone magical can help me with the scrolling and then not scrolling thing.

Sorry to have got confused in your thread, it has honestly been a great help, I feel like I learn many new things every day on this V5 adventure

Sent from phone, please forgive typos!

[Stinky666]

Hi pawl, how would I go about making the info center the same width as my banner/header? Or even better, how could I make it a separate width?

exdat.freemessageboards.com/

[pawl]

@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? =]