Any experience with MediaWiki? Help!

Using max-width on the Monobook skin to restrict width for high res screens

[badbadmonkey]

Any idea how to do this?

I think it is kind of dumb that the width of the default MediaWiki skin is 100%, it is especially silly for visitors with resolutions anything much above the 19" / 1280px size.

I figured I would put the the whole content in a <div> with "max-width:1280px".
And use margin-left and margin-right set to :auto to center the whole thing.

That would be by changing the default CSS element:

#globalWrapper { 
 font-size:127%; 
 width: 100%; 
 margin: 0; 
 padding: 0; 
}

This sort of works - the article body and the footer is restricted in width and centered as intended, but the p-personal (log-in etc toolbar) and other stuff (sidebar, logo) does not behave, despite the fact that they are children divs of the Monobook global.

I have played a bit with the CSS of those particular elements in monobook/main.css, e.g. changing position: and width: etc, but I can't get them to cooperate.

E.g. the toolbar is styled as follows:

#p-personal { 
position: absolute; 
left: 0; 
top: 0; 
z-index: 0; 
} 
#p-personal { 
width: 100%; 
white-space: nowrap; 
padding: 0; 
margin: 0; 
border: none; 
background: #DDDDDD; 
overflow: visible; 
line-height: 1.2em; 
}

You can refer to the entire default CSS here:
<snip>

Anybody got any idea what changes need making?

[edited by: swa66 at 2:54 pm (utc) on Nov. 8, 2008]
[edit reason] No URLs, please see forum charter [/edit]

[csuguy]

The p-personal div is a child of a div with no id and a class of 'printfooter'. The printfooter has a default display:none. First, if you haven't done so, you may need to explicitly make this and/ its children display. Secondly, you'll need to make printfooter have a position:relative and p-personal have position:relative or absolute - depending upon how you are using it.

Also - I was looking at your source, you've got a lot of code in there. I suggest putting comments at where your divs close. For example:

<div id="content">
...
</div> <!-- content close -->

I believe you have a few unclosed divs in there, but I'm not completely sure.

[badbadmonkey]

That's not my source, it's the default MediaWiki code (actually a bit out of date but I don't think it's too different).

I don't understand the printfooter reference and having to set display:, these elements already display just fine just like the standard Wikipedia set-up without me touching anything. I'm just trying to set a max-width for the entire site.

I monkeyed with position, anything other than absolute or static it gets messed up. If display:none of printfooter is removed, the toolbar is in the wrong position and the print footer stuff is displayed on the screen (from the for printing template).

Argh I was hoping it would be as simple as wrapping the whole thing in a simple div with max-width set.

[csuguy]

You should post all of your CURRENT CODE on here so we can look at it.

I don't know if you tried this but:

.printfooter
{
display:none;
position:relative;
}

That might work.

Again - it was difficult to see where the div's ended so I suggest commenting those and then posting your entire code on here. Do that and we will be able to better help you.

[csuguy]

Oh - and put a simple html comment in where your content would normally go.

[badbadmonkey]

Okay what I've done is zipped the skin PHP and the CSS into a single file:
<snip>

Easiest way to do it I think, both files are way too long to quote on here.

To reiterate, in main.css, #globalWrapper {} can have added to it:

max-width:1280px; 
margin-left:auto; 
margin-right:auto

And this mostly works. It is the other elements, e.g. p-personal, which do not behave and playing with position etc alone doesn't seem to do the job.

[edited by: swa66 at 2:52 pm (utc) on Nov. 8, 2008]
[edit reason] No URLs please, see forum charter [/edit]

[csuguy]

First off - you really should post your CSS and your HTML. Run the php page in your browser and give us the resulting html - that way we can pop it in our own html files and see it all for ourselves. Right now its hard to visualize the page with all of the php cluttering up the file - and the fact I can't see the file in action isn't helping either.

I did however look at what you gave me. My diagnosis could be incorrect because I can't actually see the page - but it looks like I was on the right track before - though I was looking at the wrong div as the code is different.

Anyways - #p-personal and the other sidebar stuff are all divs which are contained by a div with the id of "column-one" - who's CSS is very simple:

#column-one {
padding-top: 160px;
}

However, if you look at p-personal - it's CSS looks like this:

#p-personal {
position: absolute;
left: 0;
top: 0;
z-index: 0;
}

There is more CSS for p-personal of course - but this is what were concerned with. If you look at the other divs in contained in this column - they all have something in common... position:absolute! As you know - this removes them from the normal flow of the document and positions them where ever you set the left and top attributes to be. As such - the only way for them to be affected by the globalWrapper is to put them back into the flow of the document and thus into globalWrappers control.

To do this you need to add this to the column-one css:

position: relative;

By doing this - all of the top and left values will use the top left corner of the column-one div as their point of origin. And because the column-one is directly influenced by globalWrapper - so shall p-personal and the other divs of this column be influenced.

Now - it may not look right when you make this change, so you may have to mess with the left & top attributes of all of the elements in this column to make it look right. I might be able to suggest a more helping fix for the visuals if you provide the html so I can see it on my comp. And please - don't just give a link/image as you are not supposed to for this forum.

Ryan

[badbadmonkey]

Dude. You are, The Sh!4...!

That #column-one{} was the culprit, altering its

position:

was enough to allow to work what I was trying.

No need to look at any more code, unless anyone else wants to see it.

Brilliant! Thanks!

[csuguy]

No problem! Glad I could help!

[wheelie34]

unless anyone else wants to see it

badbadmonkey, could you tell me which files and what you changed, I have been developing a wiki with mediawiki for a good few months now, setting the page to display a SET width and CENTER is an excellent idea.

Thanks in advance

[badbadmonkey]

It's just CSS, you alter MediaWiki:Monobook.css

#column-one { position: relative; }

#globalWrapper { 
max-width: 1280px; 
min-width: 760px; 
margin-left: auto; 
margin-right: auto; 
}

I think that's all you need to change, honestly I can't remember now and my modified CSS is pages long.

Obviously you can set the size range how you like, I think the above is sensible to suit down to 800px wide browser windows, just to stop completely destroyed formatting in small resized windows... as for the upper limit, even 1280px is too wide for a single column text layout, but I think it's okay for short concise content particularly if there are lots of floats like sidebar quotes and images.

Wikipedia's default 100% is just stupid for a single column, on my 24" (1920px) it is ridiculous. It would work if you could have some sort of dynamic multi-columns, like a newspaper format.

[wheelie34]

Sorted, thanks very much