MediaWiki 1.31 upgrade/CSS changes

From Gamepedia Help Wiki
Jump to: navigation, search

In general, it has been found that MW 1.31 is far less tolerant of small coding gaffes, like missing end quotes for example, than previous versions. If CSS appears to be only partially loading, check for similar errors.

Vector tabs[edit | edit source]

Share tab changes to black on hover[edit | edit source]

Fix:

div.vectorMenu h3:hover span,
div.vectorMenu h3:focus span {
   color: #fff; /* or whatever colour suits */
}

Down arrows on the share and more menus look wrong[edit | edit source]

Arrows are in the wrong place[edit | edit source]

Fix:

div.vectorMenu h3 span::after {
   right: -5px; /* or whatever value works */
   top: 0;  /* or whatever value works */
}

Arrows are hard to see[edit | edit source]

Arrow too dark Arrow too light
div.vectorMenu h3 span::after {
   filter: invert(1);
}
div.vectorMenu h3 span::after {
   filter: unset;
}

Arrows conflict with custom arrows[edit | edit source]

To remove default down arrows:

div.vectorMenu h3 span::after {
   display: none;
}

To remove custom arrows: depends on the wiki's custom styles. The following is the former default arrow code that may still be present on some wikis and can be removed to use the new default arrows:

Hydra Hydradark
div#mw-head div.vectorMenu {
	background-image:url(https://commons.gamepedia.com/media/commons.gamepedia.com/8/87/Vector_menu_downarrow_dark.png);
}
div#mw-head div.vectorMenu {
	background-image:url(https://commons.gamepedia.com/media/commons.gamepedia.com/0/0b/Vector_menu_downarrow.png);
}

Watch/unwatch button is in the wrong place[edit | edit source]

1.31 changed the CSS selector used to apply the default styles to the watch/unwatch (star) button, which caused the default styles to override certain custom styles that some wikis apply to their watch buttons. To return the button to its pre-update custom appearance, the first step is to update the selectors in the custom styles to match the default:

Replace With
#ca-unwatch
.vectorTabs #ca-unwatch
#ca-watch
.vectorTabs #ca-watch

The above changes are also needed when those selectors are combined with others. For example, #ca-unwatch.icon a would need to be updated to .vectorTabs #ca-unwatch.icon a.

Additional fixes[edit | edit source]

If the above selector changes don't solve the positioning issues, one of the following fixes may be needed in addition. Depending on your wiki's styles, these fixes may not be effective.

Watch button... Fix
Has a custom height set
.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a {
	padding-top: 0;
}
Does not have a custom height set
.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a {
	padding-top: 16px; /* adjust as needed */
}

Logo and sidebar[edit | edit source]

Margin too large above sidebar[edit | edit source]

Fix:

#mw-panel #p-logo + .portal {
	margin-top: 0;
}

Logo overlaps the content area or navigation on small screens[edit | edit source]

Fix:

#p-logo {
	left: 0;
}
@media screen and (min-width: 982px) {
	#p-logo {
		left: 0.5em;
	}
}

Wiki source editor[edit | edit source]

Edit options text too dark on hydradark wikis[edit | edit source]

div.editOptions now needs to have the text colour specified on hydradark wikis:

.editOptions {
	color: #fff; /* change as needed */
}

Editor "insert" buttons out of place[edit | edit source]

Msupload button causes rest of "insert" section of toolbar to be weirdly pushed down. The difference between it and the other insert section buttons is a lack of a vertical-align. Therefore, solution:

#msupload-container {
    vertical-align: middle;
}

History[edit | edit source]

Selected revisions text too dark on hydradark wikis[edit | edit source]

#pagehistory li.selected {
	color: #fff; /* change as needed */
}

Visual Editor[edit | edit source]

Content area[edit | edit source]

Preferences[edit | edit source]

CurseProfile[edit | edit source]

Notifications[edit | edit source]

The selector for the background for "All Notifications" has changed and in Hydradark, this makes for a white bg with white text. The following css fixes that:

.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    background: inherit;
}

System messages table[edit | edit source]

With Mediawiki 1.31, the old arrow icons used for navigating this large table have been replaced with text-style buttons. On darker themed wikis, the "First" and "Previous" buttons can be difficult to read. You can add some css to heighten the contrast.

Add:

.oo-ui-buttonElement.oo-ui-labelElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
    color: #000;
}

Mobile view[edit | edit source]

Mobile Frontend updates have added some changes to CSS that can break some mobile headers.

CSS may need to be made more specific in Mediawiki:Mobile.css. This can be accomplished by prepending .skin-minerva to the rule declaration.

YesY ticketed Fix for mobile CSS not loading at all

Consistently found errors[edit | edit source]

These are CSS errors that will likely not be tolerable on MediaWiki 1.31 that have been consistently on wikis with older default-loadout CSS:

  • color rule missing # in table.wikitable td, table.wikitable tr td, table.wikitable > tr > td, table.wikitable > * > tr > td ruleset.
  • Border color incomplete on table.navbox (#67676 should be #676767)
  • ox instead of px, frequently but not exclusively found in border size properties.
  • Misplaced { in front page image styles on 2 column main pages:
#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image
    height: 114px;{
  • background-repeat: x,y should be background-repeat: repeat.
  • #transparent, #black and other similar wrong color values.
  • Missing semicolon in box-shadow property of .fpbanner ruleset.
  • Misplaced comma in link ruleset:
a, 
a:visited,
div#content a.extiw,
div#content a.extiw:visited,
div#content a.external, {