MediaWiki 1.26 upgrade

Repeating Dropdown Arrows on MORE
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)

Update
The vector menu arrow was moved from  to , while   now has the tab-break.png instead of tab-break.png being on. 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  (often , which would remove the new arrow), or, if a custom tab-break.png was used, then move the tab-break CSS to.
 * 2) If a custom arrow image is in use, then move that CSS from  to.
 * 3) *Hydra: If the more menu has the blue vectorTab tab-break when it should not, then add  to.
 * 4) *Hydradark: For the similar orange vectorTab tab-break on hydradark, add the same code to
 * 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
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:

Unfortunately, I do not see a way to remove the background image from h3 (the tab-break) without using, 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:

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

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


 * 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:


 * 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  is now below   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:


 * If the sidebar width has been changed,  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 . This may be a viable fix in these situations:


 * Note that  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. &mdash;  oOeyes  [[Image:User-OOeyes-Sig.png|link=User talk:OOeyes]] 07:33, 1 February 2016 (UTC)

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

Mobile Background Image/Color
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)

Mobile body text
The body text is no longer set in the  and now needs to be set in.

Remove AdBlock Helpers
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

Inputbox
Inputbox buttons now need to be styled with these classes:

Move Page
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:

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

Search form header selector has changed
Prior to MW 1.26, the css governing the search form header used the following selectors:

As of 1.26, these have changed to:

Also,   now requires    prepended and the default colour of the divider  has changed from #383838 to #dddddd for hydradark.

Navigation tabs
The positioning of #left-navigation section is now explicitly defined, so most wikis required some checking. The default position used previously was: margin-left: 160px; margin-top: 26px; }
 * 1) left-navigation {

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
The new watch/unwatch icon, default css is: background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOC4xMDMgMS4xNDZsMi4xNzUgNC40MDggNC44NjQuNzA3LTMuNTIgMy40MzEuODMxIDQuODQ1LTQuMzUxLTIuMjg3LTQuMzUxIDIuMjg3LjgzMS00Ljg0NS0zLjUyLTMuNDMxIDQuODY0LS43MDd6IiBmaWxsPSIjZmZmIiBzdHJva2U9IiM3Y2I1ZDEiIHN0cm9rZS13aWR0aD0iMC45OTk5MTk5OTk5OTk5OTk5Ii8+PC9zdmc+"); }
 * 1) ca-watch.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+"); }
 * 1) ca-unwatch.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; }
 * 1) ca-unwatch.icon a,
 * 2) ca-watch.icon a {

And the following selectors can be styled to match the wiki's skin: /* add styling to match your other vector tabs if you like */ }
 * 1) ca-watch span,
 * 2) ca-unwatch span {

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

div#mw-panel div.portal h3, color: ; }
 * 1) mw-panel.collapsible-nav .portal h3 a,
 * 2) mw-panel.collapsible-nav .portal h3 a:visited,
 * 3) mw-panel.collapsible-nav .portal.collapsed h3 a,
 * 4) mw-panel.collapsible-nav .portal.collapsed h3 a:visited {

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

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, background-image: none; }
 * 1) mw-panel.collapsible-nav #p-sitePromos.portal {

Login screen
On dark wikis, the login screen is difficult to read. Add (or modify) the following: /* login screen */ .mw-ui-vform label { color: #c0c0c0; }

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

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

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

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

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

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

.wikiEditor-ui-tabs div.current a { 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 ; }

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

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

.wikiEditor-ui-toolbar .group .label { 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
There is at least one new button (below is a search button): .mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-primary { }

Recent changes legend
Recent changes has a new legend which you may want to style: .mw-changeslist-legend { border: 1px solid ; }

Sort headers
Sort headers on tables require a new class: .sortable th, .unsortable th { background-color: <header-color>; color: <text-color>; }

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

MediaWiki 1.26 güncellemesi