CODEWITHSUNDEEP
cssmediawiki
Arnaud
Arnaud

Reputation: 266

Mediawiki css customization: set max width

I have set up a mediawiki webpage. I find it annoying that the text extends to 100% of the browser width.

I tried playing with MediaWiki:Common.css to set up a max width, but so far I get poor results: especially it does not degrade gracefully. Anyone tried and succeeded? I was not able yet to find working solutions with Internet searches.

Here is my best result: (put this in MediaWiki:Common.css)

div#content { max-width: 800px; }

It degrades OK, but the right-navigation bar is off to the right.

Version: MediaWiki 1.22.2

Upvotes: 2

Views: 912

Answers (2)

pa4080
pa4080

Reputation: 941

For Vector skin put next lines into MediaWiki:Vector.css or into your User:Name/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;

More details could be found at:

Upvotes: 3

Artem P
Artem P

Reputation: 5333

  #globalWrapper {
    max-width: 800px !important;
    margin: auto !important;
    position: relative;
  }

Upvotes: 0

Related Questions