How can I have a page specific background?

[arctic flare]

I wanna have my Userpage specifically have a background image/color that's different to the rest of the wiki

[warped widget]

Um ig you can do it like this
.ns-2{
background-color:
}

[warped widget]

@arctic flare

[deep quartz]

if ur the admin, enable [[mw:Extension:CSS]] and u can change the css on ur userpage
otherwise not entirely sure its possible

[robust oyster]

https://www.mediawiki.org/wiki/Extension:CSS

[atomic lava]

You can try something like:

.page-User_JustLeafy2k3, .page-User_JustLeafy2k3 #mw-head {
  background-image: url(https://static.miraheze.org/ultroswiki/thumb/8/86/UltrosBackground.jpg/1199px-UltrosBackground.jpg?20240414180243);
}```
Obviously, you must replace the username with yours and the URL to the background image

lemme know if this works for u

[arctic flare]

i have admin i enabled css

[arctic flare]

where do i put this?

[atomic lava]

https://yourwiki.miraheze.org/wiki/mediaWiki:Common.css?action=edit

[arctic flare]

i have the CSS extension enabled

but it never works

i use the code im given and it does not work

[deep quartz]

depends on what skin ur wiki is using, what part of the background exactly u want to change etc
send a link

[arctic flare]

Well

It does not want me to send the lnik

we have a custom domain does it not like those

https://urbanshade.miraheze.org/wiki/User:Mangone

There awesome

[deep quartz]

this probably works ```
.mw-page-container {
background-image: url(URL HERE);
}

[arctic flare]

okay lemme test

i just throw it above my text in my page right?

[deep quartz]

{{#css:
the code here
}}

[arctic flare]

also how would i do it with just colors? dont have the file uploaded yet i just wanna test

[deep quartz]

put this in ur page anywhere

background-color: #hexcode then

[arctic flare]

thank you brotha

does it show up in previews?

[deep quartz]

it should? put !important between the color and the semicolon if it doesnt

[arctic flare]

like this?

sorry if im being a bother i just dont know much

[deep quartz]

yeah that should work

[arctic flare]

well it definitely isnt gray so

something is wrong

[deep quartz]

put !important after the color before the semicolon

[arctic flare]

like dis

?

[deep quartz]

yeah

[arctic flare]

YIPPE

wait but the navigation on the side is white

[deep quartz]

background-color:unset !important;
}```

[arctic flare]

That worked

Is there documentation on this specifically? I dont wanna keep bothering you with how to change stuff

[deep quartz]

https://www.w3schools.com/css/default.asp

[arctic flare]

I really just need to know how to do colors for all the stuff on the page like the text and the gif box

[deep quartz]

most importantly poke around in inspect element, youll see where everything gets its colors and background colors there

[arctic flare]

alr

Awesome I'm LEARNING!!!

This is actually fun thank you

wait how do i get rid of this random gradient

[deep quartz]

.vector-page-tools::after {
  display:none !important;
}

[arctic flare]

Worked

Okay this is the last one i promise
Wb this texxt?

Making it white i mean

[deep quartz]

p, h1, h2, h3, h4, h5 {
color:white;
}

should about cover it

[arctic flare]

that worked

awesomesauce thank you very very much for helping

god damn it

this was gray for like 1 second then it turned white again

how can i make it gray like the bg?

or just have the gif appear on it's own without any background

[deep quartz]

cant help abt that bc i cant access any page other than the main page and cant see any images haha, try to inspect element it, u can chnage colors in inspect element too to see if something works before adding it to the page

[arctic flare]

i dont see anything in the inspect about color

the only way to make it not have a bg is by removing |thumb| from it but then it appears below my text and also it's huge

i know it's huge because the gif is large but i dont like that it appears below

[deep quartz]

that wont be where the css, shows up, u have to look here
and highlight over it to see if u have the right thing selected, i dont think that frame is on the image, rather on something above it

[arctic flare]

Ohhh

Found it

[deep quartz]

i think u can do |right|300px too

[arctic flare]

Oki

Oh awesome

[arctic flare]

@deep quartz sorry to bother but the background image thing isnt working

[deep quartz]

oh right the css parser gets mad at url()
go to common.css, add

:root {
  --mangobgimg: url(url here);
}

and then on ur page use

background-image: var(--mangobgimg);