how to have different backgrounds on different pages

[high vigil]

How do i makes it so that you could go on one page, and then another one, and they each have a different background that both have dark mode and light mode support?

[winter schooner]

There are many ways to do this. For example, MediaWiki adds the page-<pagename> class to body, so that can be used to check which page you are on in CSS.

A more general solution is to write some javascript. The user can specify a file on the page, and then the javascript will make that file the background image.

[high vigil]

can i see an example of this plz?

[winter schooner]

https://alicesoft.miraheze.org/wiki/MediaWiki_talk:Common.css
You will need to modify it so that it checks for the page name

It also only works for this particular skin. If you use a different skin, you will need to change the CSS.

[high vigil]

im sorry where does it mention the page-[name] code? srry i havent used miraheze in a while

[winter schooner]

This is a universal background image. You need to change body.skin-vector to body.page-pagenamehere yourself.

To have it work for dark mode would be a completely different story and one that requires considerable effort. I'm not sure if there is any shortcut.

[high vigil]

can i just make dark and light have the same bg?

[winter schooner]

Yes. It may only look good in one mode, though.

[high vigil]

does the code from your wiki have to be changed to fit Citizen skin? or is that code universal?

[winter schooner]

It has to be changed. It only works on vector-2022.

My usual recommendation is that if you don't have a rough idea of how to do it yourself, don't do it. Fixing CSS when you don't know what you are doing will be a lot of pain. Look for a wiki that already has it implemented on Citizen and ask them instead.

[high vigil]

i guess im just rusty on miraheze itself lol

but thnx for the recommednation

[high vigil]

should the code be in common.css or citizen.css?

[winter schooner]

Preferably citizen.css so that it doesn't break other skins

[high vigil]

is this code just regular vector-2022 background code or does it need anything special?

[winter schooner]

Just give it a try. I don't think you need special tweaks.

[high vigil]

im just not sure itll work on citizen. should i just import that code in, or put in citizen's background code with body.page-pagename?

[high vigil]

i'm pretty sure body.page-pagename doesnt work on citizen

[winter schooner]

It's probably hidden by all the elements in the front. You would need to write some CSS. I would recommend staring with the basics here.

This guide is also relevant.

[high vigil]

wdym all the elements in the front? It’s at the top of citizen.css

[winter schooner]

This conversation won't be productive unless you already know some basic css. If you are eager to have a background image, use the cosmos skin, which has a built-in setting for it. Otherwise, you would need to figure out most of this on your own.

[high vigil]

i do know some basic css, but i have never heard of body.page-pagename before

[winter schooner]

You can find it with inspector. For example, on this page, the class name is page-Teatime_Delight.

[high vigil]

Oh it works! turns out my existing background code was overriding it xd

thank u!

[high vigil]

is there a way to do this for all pages in a category?

[winter schooner]

Javascript would be the way to go. I think someone mentioned something in #general ?

[livid sage]

Alternatively, you could also use a selector similar to this one (although this might be suboptimal for performance):

body:has(.catlinks a[title="Category:ExampleCategory"]) {
  background: url("<your background image url>");
}

(you'll need to update ExampleCategory to the name of the category, and the background URL to whatever background image you want to use)