Jump to content

Topic on Project:Support desk/Flow

max-width in Vector skin to control site layout width

18
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;
}
This post was hidden by 31.31.187.156 (history)
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.

Rokejulianlockhart (talkcontribs)

I entirely disagree. One of the attributes of the 2022 redesign of Vector is that it does not adapt to the size of my screen past a certain amount.

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)
Varlin (talkcontribs)

Spas.Z.Spasov's CSS causes some offset problems (with Extension:Popups, with some unfolding combobox and with some dialogs). This alternative option seems to cause less offsets.

/* set max width and fix the background, see skinVector.patch */
#wikirouge-bodycontent-wrapper {
	position: relative;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1100px;
}

    html,
    body {
        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%);
    }
    
    /** 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; }

But it needs to be combined with this patch :

--- skins/Vector/includes/templates/index.mustache (date 1571250157017)
+++ skins/Vector/includes/templates/index.mustache (date 1571250157017)
@@ -1,4 +1,5 @@
{{{html-headelement}}}
+<div id="wikirouge-bodycontent-wrapper">
<div id="mw-page-base" class="noprint"></div>
<div id="mw-head-base" class="noprint"></div>
<div id="content" class="mw-body" role="main">
@@ -32,5 +33,6 @@
{{! html-unported outputs <div id="mw-navigation"> and <div id="footer"> }}
{{{html-unported}}}
{{{html-printtail}}}
+</div>
</body>
</html>
Vishkujo (talkcontribs)

How do you use the patch? (Or where do you put it?)

Thanks.

Varlin (talkcontribs)

You have to edit this file

skins/Vector/includes/templates/index.mustache

And add the lines marked with a " + " (here, just a div tag) at the right place.

(This syntax enables you to make it automatically using some tools)

Spas.Z.Spasov (talkcontribs)

The idea provided by @Varlin is great, except the part we need to edit some core files that would cause some additional actions on update. So the another way to add such wrapper is by using the a hook in the LocalSttings.php file:

/**
 * Skin Vector Max Width Wrapper
**/
$wgHooks['AfterFinalPageOutput'][] = 'skinVectorWidthWrapper::onAfterFinalPageOutput';
class skinVectorWidthWrapper{
        public static function onAfterFinalPageOutput( $output ) {
                $out = ob_get_clean();
                // change final html in $out
                ob_start();

                /* split the string contained in $html in three parts:
                 * everything before the <body> tag
                 * the body tag with any attributes in it
                 * everything following the body tag
                 * Ref.: https://stackoverflow.com/a/2216352/6543935 */
                $matches = preg_split('/(<body.*?>)/i', $out, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

                echo $matches[0] . '<div id="skin-vector-maxwidth-wrapper">' . $matches[1] . $matches[2] . '</div>';
                return true;
        }
}

Then the CSS code in Vector.css should be similar as the sown above:

/**
 * Skin Vector Max Width, see skinVectorWidthWrapper::onAfterFinalPageOutput
**/
#skin-vector-maxwidth-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1460px;
}

html,
body {
    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%);
}

@media print {
	#skin-vector-maxwidth-wrapper {
	    position: relative;
	    margin-left: 0;
	    margin-right: 0;
	    max-width: 100%;
	}
	
	html,
	body {
	    background:none;
	}
}

/**
 * Skin Vector Max Width: fix the position of:
 *    personal user menu
 *    search bar
 *    add right blue border
**/
#p-personal { right: 3pt; }
#p-search { margin-right: 3pt; }
.mw-body { border-right: 1px solid #A7D7F9; }

When I have enough time, I will create a small extension in order to provide this functionality in more elegant way.

Lbillett (talkcontribs)

If your standards are low enough, simply adding a max-width to Mediawiki:Vector.css as below will at least keep the content constrained. It's not centered and the interface links will be way out to the right, but you won't have to look at sprawling content on your colleagues monitor.

#bodyContent {
  font-size: 0.81em;
  max-width:1000px;
}
Reply to "max-width in Vector skin to control site layout width"