Skin:Vector/Customizing the logo for special events

Many projects feature custom logos to celebrate certain events, milestones, or even to distinguish special features within a wiki (see Category:Wikipedia commemorative logos). These custom logos will not appear on Vector 2022 without changes to MediaWiki:Common.css on your wiki.

Vector 2022

The logo cannot be substituted like in the legacy version of the skin, but can be decorated using CSS pseudo elements as in the examples in this page.

For example let's put a party hat on the Wikipedia globe:

Code:

.mw-logo {
  position: relative;
}
.mw-logo-icon {
  width: 30px;
  height: 30px;
}
.mw-logo:before {
    content: '';
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/de/Party_hat_%28fun%29.png);
    width: 200px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 50px auto;
     transform: rotate(-20deg);
    position: absolute;
    top: -63px;
    left: 41px;
}

More examples with code are provided on T257247.

Adding images after the wordmark

Note, the wordmark should be monochrome and not contain any graphical elements of any kind. For placing images after the wordmark you have the following options.

If you are removing the project icon, consider changing the graphic associated with the project to the cutomized logo and shifting it to the right of the wordmark.

.mw-logo-icon {
    order: 1;
}

If you want the logo to also appear in skins that do not support icons (e.g. Minerva) consider creating a pseudo-element to add an icon after the wordmark like so:

.branding-box a span:after {
    content: '';
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/de/Party_hat_%28fun%29.png);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 50px auto;
    position: absolute;
    top: 0;
}

Vector legacy (2010)

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.

In Vector legacy (2010) the logo is provided purely by CSS and thus a CSS only change can substitute the logo for another.

The way these logos have been customized traditionally is by adding this CSS MediaWiki:Common.css:

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