Skin:Vector/Customizing the logo for special events

From mediawiki.org
Jump to navigation Jump to search

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 modern Vector without changes to MediaWiki:Common.css on your wiki.

Legacy Vector[edit]

In Vector classic 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 in Vector is by adding this CSS MediaWiki:Common.css:

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

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

It is possible to customize the logo for special events. In modern Vector the mechanisms are different.

In the Vector modern version the logo cannot be substituted 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:

Wikipedia logo with a party hat.png

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