Topic on Project:Support desk/Flow

max-width in Vector skin to control site layout width

18 comments • 15:39, 12 August 2022 2 years ago

18

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?

Reply 11:27, 14 March 2014 10 years ago

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;
}

Reply 16:12, 14 March 2014 10 years ago

111.69.202.141 (talkcontribs)

Yep I got about as far myself.

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.

Reply 14:36, 15 March 2014 10 years ago

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;
}

Reply Edited 15:45, 8 April 2014 10 years ago

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.

Reply 16:18, 17 March 2014 10 years ago

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!

Reply 17:21, 22 June 2014 10 years ago

MarkAHershberger (talkcontribs)

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

Reply Edited 16:28, 17 March 2014 10 years ago

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.

Reply 15:39, 12 August 2022 2 years ago

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;

Reply Edited 20:14, 27 September 2016 8 years ago

88.145.181.85 (talkcontribs)

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

Reply 22:08, 12 April 2017 7 years ago

Spas.Z.Spasov (talkcontribs)

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

Reply 22:38, 12 April 2017 7 years ago

Varlin (talkcontribs)

Maybe this can solve this behaviour problem : Topic:U7ov66rh8w0tdsut

Reply 21:30, 15 February 2018 6 years ago

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>

Reply Edited 19:19, 16 October 2019 5 years ago

Vishkujo (talkcontribs)

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

Thanks.

Reply 05:41, 17 October 2019 5 years ago

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)

Reply Edited 16:50, 24 October 2019 5 years ago

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.

Reply Edited 13:18, 12 April 2020 4 years ago

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 Edited 23:37, 23 October 2020 4 years ago

Reply to "max-width in Vector skin to control site layout width"