Jump to content

User:JDrewniak (WMF)/sandbox/DIP breaking changes

From mediawiki.org

Although the Desktop Improvements Project strives to be non-disruptive to editor workflows, some customizations like gadgets and user scripts/styles may break or require updating to continue working with the modernized Vector.

If the information below is relevant to your wiki, please update the relevant Wikipedia:Customisation page on your wiki.

Custom Logos

[edit]

Many projects feature custom logos to celebrate certain events, milestones, or even to distinguish special features within a wiki.

Legacy Vector

[edit]

To customize the logo on the MediaWiki:Common.css page in legacy Vector:

.mw-wiki-logo {
    background-image: url("https://upload.wikimedia.org/{{path_to_your_logo}}.png")
}

Modern Vector

[edit]

The logo on modern Vector is now comprised of three images. This means that you may have to create new images with the individual elements in order to update the ones you want. For guidelines on how to create new logos, refer to the Logo creation guidelines task on Phabricator.

The new logo elements now include:

  • An icon .mw-logo-icon
  • A wordmark .mw-logo-wordmark
  • A tagline .mw-logo-tagline

In it's entirely, the HTML now looks like this:

<a href="{{homepage url}}" class="mw-logo">
	<img class="mw-logo-icon" src="{{icon url}}" height="50" width="50">
	<span class="mw-logo-container">
		<img class="mw-logo-wordmark" src="{{wordmark url}}" width="119" height="18">
		<img class="mw-logo-tagline" src="{{tagline url}}" width="115" height="13">
	</span>
</a>

Each one of these images can be replaced individually.

Splitting the logo into three piece lets us to reuse these images in Minerva (the mobile skin) which until now, required a separate mobile version of the logo containing just the wordmark. Now we can use the same wordmark on the mobile sites as we do on the desktop sites.

To customize the logo on MediaWiki:Common.css page in modern Vector:

/* To change the icon */
.mw-logo-icon {
  box-sizing: border-box;
  padding-left: 50px; /* width of the original icon image */
  background: center / contain no-repeat url("{{new icon url}}");
}

/* To change the wordmark */
.mw-logo-workmark {
  box-sizing: border-box;
  padding-left: 119px; /* width of the original workmark image */
  background: center / contain no-repeat url("{{new workdmark url}}");
}

/* To change the tagline */
.mw-logo-tagline {
  box-sizing: border-box;
  padding-left: 115px; /* width of the original tagline image */
  background: center / contain no-repeat url("{{new tagline url}}");
}

CSS selector changes

[edit]

DOM order changes

[edit]

Known gadget breakages

[edit]