Topic on Project:Support desk

add a header to Vector

9
Davecotter (talkcontribs)

Monobook had a header background image. i'd like to have one (for all pages) now that i'm using Vector. i saw this article which hinted at this, but it neglected to specify exactly how to create this. It mentions "Vector.css" but doesn't say where that file is, or where to create it or how to hook it into the system. Any hints here would be appreciated.

Malyacko (talkcontribs)
Davecotter (talkcontribs)

thanks for that but, as a beginner, finding the info i need is difficult because there's a mountain of information and i don't know HOW to find it. as an experienced user i can understand that you would be frustrated with a beginner, preferring to say "read the f*** manual", but if you remember what it's like to BE a beginner, i can assure you i looked at the manual, and only became confused.

specifically: must i edit a stock file and add something that causes it to include MY css file? if so, what file, and where, and how? that is all. i looked at the page you sent me to and found nothing that seemed to me to indicate the answer to that question. is "Vector.css" an existing file? if so, where is it? if not, where do i create it? and then how do i cause it to be loaded?

Bawolff (talkcontribs)

its just a page on your wiki named MediaWiki:Vector.css . It is not a file. The page with that name is special and automatically gets included as css.

Ernstkm (talkcontribs)

Some CSS knowledge and a bit of experimentation will be unavoidable here. There is no straightforward way to just pop a header image into the Vector skin like there was with MonoBook.

As an example to get you started (provided the MonoBook skin is still installed on your wiki), you can use MonoBook's background image with the following CSS in your wiki's MediaWiki:Vector.css. As mentioned above, this is a real page on your wiki in the MediaWiki namespace, not a file on the filesystem; the page should already exist and be empty except for a comment explaining what it's for.

body {
    background-color: #f9f9f9;
    /* this assumes that your wiki is installed at '/w' in the web root */
    background-image: url('/w/skins/MonoBook/resources/images/headbg.jpg');
    background-repeat: no-repeat;
}

#mw-page-base {
  background-image: none;
  background-color: transparent;
}

I used the developer tools in my browser in order to figure out which page elements to target with these CSS rules. In my opinion, that's the most straightforward way to do these kinds of customizations.

You'll notice right away, however, that this bit of CSS alone isn't going to cut it. The Vector skin's top row of tabs are created with embedded PNG images that fade to white, and that's almost certainly going to look bad with whatever background image you choose.

Good luck!

See also

Davecotter (talkcontribs)

This is all fantastic info, thanks.

However, when I go to edit Vector.css, I get this:

You do not have permission to edit this page, for the following reason:
You do not have permission to edit this CSS page because it may affect all visitors.
Permissions for editing of sitewide CSS/JS/JSON files were recently separated from the edit interface right. If you do not understand why you are getting this error, see mw:MediaWiki_1.32/interface-admin.

and that page it tells me to "see" doesn't exist. hmmm

Ernstkm (talkcontribs)

When you see mw: that's an interwiki prefix that means "points to an article on mediawiki.org." If you look at Special:Interwiki on your wiki and search for "mw" this will make more sense.

I guess it would've been nice if this error message had contained a clickable link, but knowing this, you still can assemble the correct URL yourself, which is https://www.mediawiki.org/wiki/MediaWiki_1.32/interface-admin

Being able to edit the CSS for a MediaWiki web site is a security risk, so ordinary users are not permitted to do this. You will need to use the administrator account for your wiki, or make yourself a "sysop".

Davecotter (talkcontribs)

you're my hero man. do you like karaoke?

Ernstkm (talkcontribs)

Happy to help. I've been known to partake, but only under duress. ;)

Take care out there.

Reply to "add a header to Vector"