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

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

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

• 
  Custom Txikipedia logo for the children's wiki section on Basque Wikipedia.
• 
  Custom logo celebrating the 2020 Chinese New Year.
• 
  Custom logo celebrating Sindhi Wikipedia reaching 10,000 articles.
• 
  Custom inverse Wikipedia logo for Spanish Wikipedia.

Legacy Vector

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

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}}");
}