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 edit

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.

Vector legacy (2010) edit

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