Topic on Project:Support desk

css for Vector-2022

5
2003:C2:3F21:FD00:516D:5391:79D1:A338 (talkcontribs)

Where shall I place my css modifications for the new Vector (2022) skin? I've tried MediaWiki:Vector-2022.css

but it has no effect.

Ciencia Al Poder (talkcontribs)

It may take some time to take effect, usually 20 minutes at most. Otherwise, a syntax error in that page may render the entire CSS or from one point to the end unusable. For example, if you forgot to open or close curly braces. You may want to check if the CSS of that page is valid running it through an online CSS validator.

2003:C2:3F21:FD00:48AC:4A02:818F:D381 (talkcontribs)

Sorry, no, there must be another reason. The same css code works fine as "User:MyUser/vector-2022.css" and does not work as "MediaWiki:Vector-2022.css"

Any other ideas? It is Mediawiki 1.39.6

Ciencia Al Poder (talkcontribs)

$wgUseSiteCss may be false, it fails only on restricted pages and $wgAllowSiteCSSOnRestrictedPages is false, or MediaWiki:Vector-2022.css or MediaWiki:Common.css (!) contains other CSS with syntax errors that renders the entire CSS unparseable (since both stylesheets are concatenated together).

Check also the browser's developer console

2003:C2:3F3F:4A00:49D7:2504:A269:1D1 (talkcontribs)

We don't use $wgUseSiteCss, so it is true by default.

It is the CSS code itself that does not work, but I am helpless why. CSS is nothing that I understand, the code came into being by copy&paste and a lot of try&error. It reads:

.mw-body {
    position: relative;
    z-index: 0;
}
.mw-body-content {
    position: static;
}
.perrypedia_translator {
    display: inline-block;
    position: absolute;
    top: -3.8em;
    right: 0;
}

We use it to position some icons right beside the article title (via top-notice-ns). This works with serveral skins, CologneBlue, DarkVector, Modern, Timeless, and the old vector skin. Of course the "top" value is different in each skin's css. Only with Vector-2022 it does not do anything, no matter which value.

On the other hand, some other css that I inserted into MediaWiki:Vector-2022.css does work perfectly well.

Reply to "css for Vector-2022"