Jump to content

Skin:Vector/Customizing the logo for special events

From mediawiki.org

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]

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