MediaWiki 1.26 upgrade

From Gamepedia Help Wiki
Jump to: navigation, search

Mediawiki 1.26 checklist[edit | edit source]

Repeating Dropdown Arrows on MORE[edit | edit source]

This Custom CSS causing repeating dropdown arrows on More tab. Removing it also removes arrows all together (going to investigate if this is a hydra theme bug)

div.vectorMenu {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAMAAAAlM38UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9QTFRFsbGxmpqa3d3deXl58/n79CzHcQAAAAV0Uk5T/////wD7tg5TAAAAMklEQVR42mJgwQoYBkqYiZEZAhiZUFRDxWGicEPA4nBRhNlAcYQokpVMDEwD6kuAAAMAyGMFQVv5ldcAAAAASUVORK5CYII=");
    border: medium none;
}

Update[edit | edit source]

The vector menu arrow was moved from div.vectorMenu to div.vectorMenu h3 a, while div.vectorMenu h3 now has the tab-break.png instead of tab-break.png being on div.vectorMenu h3 a. Existing CSS on these elements might cause errors, such as a missing arrow, a repeating arrow, or having two layered arrows. The following changes should fix errors related to this, or at least serve as a starting point:

  1. Remove existing background related CSS from div.vectorMenu h3 a (often background: none;, which would remove the new arrow), or, if a custom tab-break.png was used, then move the tab-break CSS to div.vectorMenu h3.
  2. If a custom arrow image is in use, then move that CSS from div.vectorMenu to div.vectorMenu h3 a.
    • Hydra: If the more menu has the blue vectorTab tab-break when it should not, then add background-image: none; to div.vectorMenu h3.
    • Hydradark: For the similar orange vectorTab tab-break on hydradark, add the same code to div#mw-head div.vectorMenu h3
  • If these fixes can be facilitated through the existing skins to prevent the need to do it manually we will look into it. Azxiana (talk) 20:19, 18 January 2016 (UTC)

Update 2[edit | edit source]

Looking into this (using the custom css on this wiki), the background drop-down arrow is being applied to div.vectorMenu. By default vector (and in return, hydra) do not apply backgrounds here, so applying background positioning defaults won't effect non-custom style'd sites. In the case of this wiki, adding the following to skins/hydra/hydra.css cleaned up the view for the most part:

div.vectorMenu {
	background-repeat: no-repeat;
	background-position: 100% 70%;
}

Unfortunately, I do not see a way to remove the background image from h3 (the tab-break) without using !imporant, but that would stop it from being modified in a useful way later.

This is how the styling of this wiki currently looks with the changes made:

Hydra-partial-fix.png

- Cchunn (talk) 22:38, 19 January 2016 (UTC)

Left Sidebar[edit | edit source]

Positioning[edit | edit source]

Positioning and margins inside div#mw-panel may need to be removed for most wikis.

div#mw-panel {
    position: static;
    margin-top: -5em;
    padding-top: 0;
}
Is there an example on local where this is in use? This just pushes the sidebar down below div#content, which is exactly how static positioning should behave in that case. It's not what we want, though.
When inspecting, what I'm finding is that the wikis with "correct" sidebar positioning (visually speaking) are using is:
div#mw-panel {
    position: absolute;
    top: 160px;
    padding-top: 1em;
}
This is the method being used on the local Hydra, Help, DOTA2, Minecraft, Smite, Wildstar, and Witcher Wikis.
FTB Wiki has a statically positioned sidebar, and it's pushed below the content. This is unaffected by changing margins or padding, because there's no reason it should. That's where the HTML says it should go.
(Note that for the purposes of this issue, static and relative are almost the same. The difference is that with relative, you have to pay attention to top, bottom, left, and right as well, but otherwise they position the element the same way. Relative positioning has other useful side-effects, though.)
As I noted in a comment to a JIRA bug which was marked invalid, this takes the sidebar out of flow, so it will overlap the footer on short pages. Example: http://help.gamepedia.local/User:OOeyes/sig
Because div#mw-navigation is now below div#content in the actual HTML source, this is not easy to work around without resorting to absolute positioning.


One possible method is below, but this may have a lot of undesirable side effects:
div#mw-panel {
    position: static;
    margin-top: -5em;
    margin-left: -10em;
    padding-top: 0;
}

div#pageWrapper {
    padding-left: 10em;
}

div#content {
    float: right;
    width: 100%;
    box-sizing: border-box;
}

div#footer {
    float: right;
    clear: right;
    width: 100%;
    box-sizing: border-box;
}
If the sidebar width has been changed, 10em will have to be changed as well.
(Personally, I recommend using 160px instead. I'm not certain 10em will not bork the layout if the user has changed their font size preferences in their browser. But, iirc, width would have to be defined on certain elements inside #mw-panel as well.)
This will, however, bork any skin that relies on having a background on div#pageWrapper. This may be a viable fix in these situations:
div#pageWrapper {
    margin-top: -5em;
    padding-top: 5em;
    overflow: hidden;
}
Note that 5em will have to be replaced with the actual height of the wiki header if this has been changed. The margin and padding is necessary to prevent the logo from disappearing, and there's a possibility that z-indexs might be necessary on #mw-head and #p-logo as well. And I'm honestly not sure there aren't additional side effects I just haven't found yet. oOeyes User-OOeyes-Sig.png 07:33, 1 February 2016 (UTC)

Heading coloring[edit | edit source]

The CSS for the sidebar headings has changed and possibly will display orange for expanded sections.

#mw-panel.collapsible-nav div.portal h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a {
    color: <color>;
}

Mobile[edit | edit source]

Mobile Background Image/Color[edit | edit source]

There is no more #content_wrapper div. GlobalPageEditor will be utilized to change all instances to #content.

The content background color won't display without this.

  • Is this incorrect? There is no more #content_wrapper div. Azxiana (talk) 23:44, 1 February 2016 (UTC)
div#content_wrapper {
    background-color: unset;
}

body.mediawiki #mw-mf-page-center {
    background: #202020 ;
}

Mobile body text[edit | edit source]

The body text is no longer set in the div#content_wrapper and now needs to be set in body.

body {
    background: <background image/color>;
    color: <font color>;
}

Remove AdBlock Helpers[edit | edit source]

This helper ends up breaking the advertisement and will be removed anywhere it is found.

http://minecraft.gamepedia.local/index.php?title=MediaWiki%3ACommon.css&type=revision&diff=935200&oldid=919918

/* Fix float bug with adblocked side ad... block */
.atfmrec {
	margin: 0;
}
#cdm-zone-02:not(:empty) {
	margin: 15px 0 2em 1em;
}

Inputbox[edit | edit source]

Inputbox buttons now need to be styled with these classes:

.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary {
}

.mw-ui-button.mw-ui-progressive:disabled,
.mw-ui-button.mw-ui-primary:disabled {
}

Move Page[edit | edit source]

The textarea and dropdowns of Special:MovePage do not respect the input, select, or textarea styling. If you want to customize them, you need to use these selectors:

.oo-ui-dropdownWidget,
.oo-ui-dropdownWidget-handle,
.oo-ui-menuSelectWidget,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea {
    background: #;
    border-color: #;
    color: #;
}

.oo-ui-dropdownWidget .oo-ui-selectWidget {
    border-color: #;
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    background: #;
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background: #;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    background: #;
    border-color: #;
}

Notifications[edit | edit source]

Watchlist notifications now have a border-radius defined. To turn this off, use either of the code listed below.

body.mw-notification {
    border-radius: 0;
}

body.skin-hydradark .mw-notification {
    border-radius: 0;
}

Search form header selector has changed[edit | edit source]

Prior to MW 1.26, the css governing the search form header used the following selectors:

.mw-search-formheader { ... }

.mw-search-formheader div.search-types ul li.current a { ... }

As of 1.26, these have changed to:

.mw-search-profile-tabs { ... }

.mw-search-profile-tabs div.search-types ul li.current a { ... }

Also, fieldset#mw-searchoptions now requires .skin-hydradark prepended and the default colour of the divider ( fieldset#mw-searchoptions div.divider ) has changed from #383838 to #dddddd for hydradark.

MediaWiki 1.23 checklist[edit | edit source]

Navigation tabs[edit | edit source]

The positioning of #left-navigation section is now explicitly defined, so most wikis required some checking. The default position used previously was:

#left-navigation {
    margin-left: 160px;
    margin-top: 26px;
}

There is a new icon for watching / unwatching pages incorporated into the right-navigation section. This pushes over the #p-cactions drop-down and requires some styling depending on your wiki's skin:

div.vectorMenu h3 a {
    background-image: none;
}

Watch/Unwatch tab[edit | edit source]

The new watch/unwatch icon, default css is:

#ca-watch.icon a {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOC4xMDMgMS4xNDZsMi4xNzUgNC40MDggNC44NjQuNzA3LTMuNTIgMy40MzEuODMxIDQuODQ1LTQuMzUxLTIuMjg3LTQuMzUxIDIuMjg3LjgzMS00Ljg0NS0zLjUyLTMuNDMxIDQuODY0LS43MDd6IiBmaWxsPSIjZmZmIiBzdHJva2U9IiM3Y2I1ZDEiIHN0cm9rZS13aWR0aD0iMC45OTk5MTk5OTk5OTk5OTk5Ii8+PC9zdmc+");
}

#ca-unwatch.icon a {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjMmVkZmYiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjNjhiZGZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgeDE9IjEzLjQ3IiB5MT0iMTQuMzYzIiB4Mj0iNC41OTYiIHkyPSIzLjM5NyIgaWQ9ImIiIHhsaW5rOmhyZWY9IiNhIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIvPjwvZGVmcz48cGF0aCBkPSJNOC4xMDMgMS4xNDZsMi4xNzUgNC40MDggNC44NjQuNzA3LTMuNTIgMy40MzEuODMxIDQuODQ1LTQuMzUxLTIuMjg3LTQuMzUxIDIuMjg3LjgzMS00Ljg0NS0zLjUyLTMuNDMxIDQuODY0LS43MDd6IiBmaWxsPSJ1cmwoI2IpIiBzdHJva2U9IiM3Y2I1ZDEiIHN0cm9rZS13aWR0aD0iMC45OTk5MTk5OTk5OTk5OTk5Ii8+PC9zdmc+");
}

#ca-unwatch.icon a,
#ca-watch.icon a {
    background-position: 5px 60%;
    display: block;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 3.1em 0 0; /* Changing the padding to "26px 0 0" keeps it above the content area. */ 
    width: 26px;
}

And the following selectors can be styled to match the wiki's skin:

#ca-watch span,
#ca-unwatch span {
    /* add styling to match your other vector tabs if you like */
}

Sidebar[edit | edit source]

For sidebar titles, now that they have the toggles, add:

div#mw-panel div.portal h3,
#mw-panel.collapsible-nav .portal h3 a,
#mw-panel.collapsible-nav .portal h3 a:visited,
#mw-panel.collapsible-nav .portal.collapsed h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a:visited {
    color: <appropriate link colour>;
}

/* to remove the dividers between portal sections */
#mw-panel.collapsible-nav .portal {
    background-image: none;
}

If you only want to get rid of the dividers around the promos and social icons areas:

div#mw-panel.collapsible-nav div#p-socialProfiles.portal,
#mw-panel.collapsible-nav #p-sitePromos.portal {
      background-image: none;
}

Login screen[edit | edit source]

On dark wikis, the login screen is difficult to read. Add (or modify) the following:

/* login screen */
.mw-ui-vform label {
    color: #c0c0c0;
}

#mw-createaccount-join {
    box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 0.2);
}

Wiki editor[edit | edit source]

The wiki editor has completely changed, so most definitely requires styling now for dark wikis:

/* Wiki editor fixes */
.wikiEditor-ui {
    background: rgba(0, 0, 0, 0);
    border: medium none;
}

div.wikiEditor-ui-buttons {
    background-color: rgba(0, 0, 0, 0);
    border-top: medium none;
    margin-right: 5px;
}

div.wikiEditor-ui-controls {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid <border-color>;
}

.wikiEditor-ui-tabs {
    background-color: <tabs-color>;
    border-left: 1px solid <border-color>;
    border-top: 1px solid <border-color>;
}

.wikiEditor-ui-tabs div {
    background-color: <tabs-color>;
    border-right: 1px solid <border-color>;
    border-bottom: 1px solid <border-color>;
}

.wikiEditor-ui-tabs div a {
     background: <tabs-color>;  /* you can use a gradient here if you want to get fancy */
     color: <text-color>;
}

.wikiEditor-ui-tabs div.current {
    background-color: <tabs-color>;
    border-bottom: 1px solid <border-color>;
}

.wikiEditor-ui-tabs div.current a {
    color: <highlight-color>; /* depends on your tabs bg & how different you wish the current tab and text to appear */
    font-weight: bold; /* optional to make it stand out */
}

.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid <border-color>;
}

.wikiEditor-toolbar-spritedButton {
    background: url('http://hydra-media.cursecdn.com/help.gamepedia.com/5/5c/Editbar_sprites.png');
}

.wikiEditor-ui-toolbar {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.wikiEditor-ui-toolbar .group {
    border-right: 1px solid <border-color>;
}

.wikiEditor-ui-toolbar .group-search {
    border-left: 1px solid <border-color>;
    border-right: none;
}

.wikiEditor-ui-toolbar .group .label {
    color: <text-color>;
}

.tab {
    border-color: transparent;
}

.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a:visited {
    color: <text-color>;
}

.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: <text-color>;
}

.wikiEditor-ui-toolbar .group .tool-select .label {
    color: #000000; /* or any other dark colour, or change the bg to a dark colour to contrast with light text */
}

.wikiEditor-ui-toolbar .sections .section {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid <border-color>;
}

.wikiEditor-ui-toolbar .booklet .index div {
    color: <anchor-color>;
}

.wikiEditor-ui-toolbar .booklet .index .current {
    background-color: <bg-color>;
    color: <text-color>;
}

.wikiEditor-ui-toolbar .booklet .pages {
    background-color: <bg-color>;
}

.wikiEditor-ui-toolbar .page-characters div span {
    border: 1px solid <border-color>;
    color: <text-color>;
}

.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: <border-color>;
    color: <anchor-color>;
}

.wikiEditor-ui-toolbar .page-table td {
    border-top: 1px solid <border-color>;
    color: <text-color>;
}

.wikiEditor-preview-loading {
    background-color: transparent;
}

.wikiEditor-preview-contents {
    background-color: transparent;
    border-color: -moz-use-text-color <border-color> <border-color>;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

.editOptions {  
    background-color: <bg-color>;
    border-color: -moz-use-text-color <border-color> <border-color>;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

New buttons[edit | edit source]

There is at least one new button (below is a search button):

.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary {
    <!-- needs same styling as rest of the buttons -->
}

Recent changes legend[edit | edit source]

Recent changes has a new legend which you may want to style:

.mw-changeslist-legend {
    border: 1px solid <appropriate color>;
}

Sort headers[edit | edit source]

Sort headers on tables require a new class:

.sortable th,
.unsortable th {
    background-color: <header-color>;
    color: <text-color>;
}

Alternating table row colouring[edit | edit source]

.sortable tr:nth-child(2n+1) {
    background: none repeat scroll 0 0 <alternate-bg-color>;
}