Topic on Project:Support desk

Jump to navigation Jump to search

max-width in Vector skin to control site layout width

12
111.69.202.141 (talkcontribs)

It's one of the dumber design aspects of MediaWiki and Wikipedia and their skins that the site fills 100% of the screen width, regardless of resolution, leading to a ridiculous appearance on high resolution monitors.

Short of a grid layout or other sophisticated approaches, what is required is a sensible max-width for the entire site layout, in the order of 1000 - 1300 px I suggest, allowing the site to scale horizontally below that but freeze on decent res screens.

I had a bunch of CSS modifications for Monobook that worked well, but they made use of the #globalWrapper which is not present in Vector. I am trying to migrate my old Monobook styling across to Vector.

I played around with adding styles to the various page elements in Vector, and even the <body> tag, but ended up frustrated trying to get the header and sidebar elements to cooperate.

Has anyone worked out some CSS for Vector that does the trick?

MarkAHershberger (talkcontribs)

This is as close as I can get:

/* upper blue line */
#mw-head-base {
	margin-left: auto !important;
	margin-right: auto !important;
  max-width: 1000px !important;
}
/* lower blue line + footer content */
#footer {
	margin-left: auto !important;
	margin-right: auto !important;
  max-width: 1000px !important;
}
/* main content */
#content {
	margin-left: auto !important;
	margin-right: auto !important;
  max-width: 1000px;
}
111.69.202.141 (talkcontribs)

Yep I got about as far myself.

  1. mw-page-base can be styled similarly but the page tabs, personal links, and the sidebar (which would now float over top of the content on lower resolutions) stump me.
MarkAHershberger (talkcontribs)

Just came up with something I like a little better:

/* upper blue line */
#mw-head-base {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1000px !important;
}
/* lower blue line + footer content */
#footer {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1000px !important;
}
/* main content */
#content {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1000px;
}
#bodyContent {
	z-index: 10;
}
#mw-navigation {
	margin-right: auto !important;
	max-width: 1190px;
        min-width: 1000px;
	position: absolute;
	top: 0;
        left: 50%;
        margin-left: -500px;
}
div#mw-panel {
	position: relative;
	left: 0;
	margin-left: -190px;
        width:160px;
}
div#mw-head {
	position: relative;
        right: 0;
        margin-right: 0;
        max-width: 1000px;
}
111.69.202.141 (talkcontribs)

That is an improvement. The page/discussion tabs are not left-aligned to the article, and the sidebar disappears off the screen at lower resolutions, but it's promising.

MarkAHershberger (talkcontribs)

I don't have time to do more now. And I still don't understand why you don't adjust your window to make it look better. But maybe someone else can offer more help.

74.91.102.250 (talkcontribs)

For me, I want to do this because my browser window has other tabs that conform to modern browsing standards, so I don't want to resize my window every time I switch to or from a wikipedia tab.

If someone is able to help, I think I almost have it, on a very vanilla vector-skinned site: http://www.aerenamasters.com/wiki/index.php?title=MediaWiki:Common.css

I can't figure out how to make the navigation behave well:

/* working ... */
#content{
        margin-left:auto !important;
        margin-right:auto;
	max-width: 950px;
}

#footer {
	margin-left: auto !important;
	margin-right: auto;
	max-width: 950px;
}

/* testing */
#mw-navigation {
        margin-left: auto !important;
	margin-right: auto;
	max-width: 1140px;
        top: 0;
}

Thanks for any help!

MarkAHershberger (talkcontribs)

For anyone who wants to try this but doesn't know how, you need to put it on your common.css page.

Spas.Z.Spasov (talkcontribs)

For Vector skin put next lines into MediaWiki:Vector.css or into your custom vector.css.

    /* set max width and fix the background */
    html,
    body {
    	position: relative;
    	margin-left: auto !important;
    	margin-right: auto !important;
    	max-width: 1280px;
        background-position: top left;
        background-repeat: repeat-x;
    	background-size: 100% 5em;
        background-image: url(/skins/Vector/images/page-fade.png);
        background-color: #f6f6f6;
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6));
        background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
        background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
        background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%);
    }
    
    /* set blue right border */
    .mw-body { border-right: 1px solid #A7D7F9; }
    
    /** fix the position of:
    			personal user menu
    			search bar
    			the pop-up indicator of language selector
    			search suggestions 
    **/
    #p-personal { right: 3pt; }
    #p-search { margin-right: 3pt; }
    .imeselector { position: fixed; }
    .suggestions { right: 3pt !important; }

If you want to apply this CSS for the restricted pages, write down next line into your `LocalSettings.php`, but first check this comment:

    $wgAllowSiteCSSOnRestrictedPages = true;
88.145.181.85 (talkcontribs)

Thank you so much! Exactly what I was looking for.

Spas.Z.Spasov (talkcontribs)

The problem that I can not solve completely is the behaviour of some pop ups as these of Extension:Popups.

Varlin (talkcontribs)
Reply to "max-width in Vector skin to control site layout width"