Wikia

Community Central

Admin Forum:Monobook transparency, bg question

18,711pages on
this wiki
Talk0

This Forum has been archived

Forums: Admin Central Index Technical Help Monobook transparency, bg question
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.


Hello. I have two technical question. First one - I wanted to make page in Monobook to be transparent (so bg would be visible through it). Transparency should be circa 45%. Second one - is it possible to make fixed bg to be centered (so at each resolution, viewers will see the center of the background). Regards, Final Cannon Dyskusja 15:24, October 7, 2012 (UTC)

I know of at least two methods of getting transparency in blocks. One is using the rbga method for background-color style. Example in the box on the right. The code is
Text in a 50% black / 50% transparent block
<div style="background-color:yellow; float:right; padding:10px">
<div style="background-color:rgba(0,0,0,0.5)">Text in a 50% black / 50% transparent block</div>
</div>
where the "0.5" in the "rgba(0,0,0,0.5)" value is the desired transparency level. The downsides are that the rgba method isn't supported in all browsers - IE 8 in particular. You also have to define a color that will be 'the other 50%' of the background.
The second method is simply using a semi-transparent image as the background for the article, but that requires you to create and upload the file and depending on its size, it might lower page loading speed.
Pick a method and add either
#bodyContent, #content {
    background-color: rgba(0, 0, 0, 0.45);
}
or
#bodyContent, #content {
    background-image: url(URL OF YOUR SEMI-TRANSPARENT BACKGROUND IMAGE);
}
to your MediaWiki:Monobook.css
As for the second question - I assume we're still talking about Monobook, since the bg in the Wikia skin is centered by default? You can achieve that by using body {background-position:center;} , but depending on the image it might cause more harm than good. Sovq 20:26, October 7, 2012 (UTC)
I used the first method and only part of page has correct transparency. Header and sides of the page are more transparent. You can see it here. Final Cannon Dyskusja 11:53, October 8, 2012 (UTC)
Try adding #bodyContent {background-color: rgba(0, 0, 0, 0.0) !important;} below the code you added earlier. Sovq 15:15, October 8, 2012 (UTC)
It don't seems to be working (unless I done something wrong). Final Cannon Dyskusja 20:30, October 8, 2012 (UTC)

(reset) EDIT: Now it's too much transparent... Final Cannon Dyskusja 20:43, October 8, 2012 (UTC)

You wanted it 45% transparent, didn't you? Page opacity in your Wikia skin is set to 0.94, so if you want to achieve the same look and color try background-color: rgba(45, 45, 45, 0.94) Sovq 21:11, October 8, 2012 (UTC)
Hmm, now it seems to have lost all of transparency. Final Cannon Dyskusja 08:46, October 9, 2012 (UTC)
Yeah that's probably caused the removal of the !important rule in one of the edits which made the background-color: #2D2D2D !important; rule have priority. Restore the !important rule or remove the background-color: #2D2D2D !important; style and it should work fine. Sovq 15:02, October 9, 2012 (UTC)
Okay, now it works. I forgot how important rule works. Thank you for help. Final Cannon Dyskusja 16:00, October 9, 2012 (UTC)

Around Wikia's network

Random Wiki