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
Fix:
div.vectorMenu h3:hover span,
div.vectorMenu h3:focus span {
color: #fff; /* or whatever colour suits */
}
Arrows are in the wrong place
Fix:
div.vectorMenu h3 span::after {
right: -5px; /* or whatever value works */
top: 0; /* or whatever value works */
}
Arrows are hard to see
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
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
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
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
Margin too large above sidebar
![]() |
The following issue has been ticketed and fixed. The provided solutions are no longer needed and may be removed. |
Fix:
#mw-panel #p-logo + .portal {
margin-top: 0;
}
![]() |
The following issue has been ticketed. The provided solutions may be used temporarily until the issue is fixed. |
Fix:
#p-logo {
left: 0;
}
@media screen and (min-width: 982px) {
#p-logo {
left: 0.5em;
}
}
Wiki source editor
Edit options text too dark on hydradark wikis
![]() |
The following issue has been ticketed and fixed. The provided solutions are no longer needed and may be removed. |
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
![]() |
The following issue has been ticketed and fixed. The provided solutions are no longer needed and may be removed. |
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
Selected revisions text too dark on hydradark wikis
![]() |
The following issue has been ticketed and fixed. The provided solutions are no longer needed and may be removed. |
#pagehistory li.selected {
color: #fff; /* change as needed */
}
Visual Editor
Content area
Preferences
CurseProfile
Notifications
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
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
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.
ticketed
Fix for mobile CSS not loading at all
Consistently found errors
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#
intable.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 ofpx
, 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 bebackground-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, {