Wikia

Community Central

Admin Forum:TESFanon Category Bar Transparency

18,687pages on
this wiki
Talk0

This Forum has been archived

Forums: Admin Central Index Technical Help TESFanon Category Bar Transparency
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 am Pikapi, an active administrator on the recently redesigned TESFanon Wiki. I am having a problem with making the categories bar appear transparent. It was the way it is now before I even joined, and despite my understanding of css, I cannot identify what is preventing the categories listing from appearing completely transparent. The rim of the box is rounded and opaque, as I wish for it to appear, but the categories appear in a white box.

I'm guessing that there is something we are missing in our css, but most of the wikis in our little fanon community use practically identical skins. I'm guessing that much of the page background was copy-pasted directly off of Halo Fanon's skin. Unfortunately, Nanosoldier, who copied and pasted the skin isn't very experienced with the coding himself, and it might not benefit me to ask him.

Perhaps its a little thing like a spelling error, but I don't want to have to redo all of our site coding. Here is a link to the css on my personal sandbox wiki, which, for the most part, contains much of the code present of the other fanon wikis. On my sandbox wiki, the categories bar is opaque and functioning properly. If it is something more, like a persistent glitch, I would appreciate if a staff member could give us some advice or help. — Pikapi (ChatWhat's up) 22:40, February 15, 2012 (UTC)

The pale background color of the category box is actually something added by the customized MediaWiki:Common.css on that wiki. The Common.css contains the following lines:
#catlinks, #edittools, #editpage-specialchars, .toc, #filetoc, h4.mw-specialpagesgroup, .smwfact {
   -moz-border-radius-topleft: 0.5em;
   -moz-border-radius-topright: 0.5em;
   -moz-border-radius-bottomleft: 0.5em;
   -moz-border-radius-bottomright: 0.5em;
   -webkit-border-radius-topright: 0.5em;
   -webkit-border-radius-topleft: 0.5em;
   -webkit-border-radius-bottomright: 0.5em;
   -webkit-border-radius-bottomleft: 0.5em;
   background: #F9F9F9 url(reflected_shadow.png) repeat;
   border: 1px outset #F9F9F9 !important;
}
The problem is caused by the highlighted area in the code above. The "#F9F9F9" hexadecimal code tells it to display a light color behind the semi-transparent background image. If you want to get rid of that, you should replace the highlighted section with the word "transparent".
Now on a different subject, the current background image of the wiki is beautiful, but it is INSANELY HUGE. A reasonably sized background image should be about 800kb max. Yours is 3.1MB! For a person with an average internet connection visiting your wiki for the first time, it takes a full 1 minute and 45 seconds for a page to finish loading because of the background image.
Ways you can reduce the size of your background image without losing quality:
  • Crop the image to get rid of the large, empty black area at the bottom.
  • Use a jpg image instead of a png.
  • Use an image editing software to compress the image to a smaller file size.
If you like, I can help you with these steps. --Gardimuer { ʈalk } 04:03, February 16, 2012 (UTC)

I'll take note of that. I have one more problem though with the categories. When you click "add categories", a white box appears with a near-black box below it. I would like to get rid of that. I compared TESFanon to Halo Fanon and found that on the Halo Fanon Wiki, the categories bar comes out how I would like it to on TESFanon. When rummaging through their coding, however, I couldn't find anything like what we have on TESFanon that gets half of the job done right. Can I have a solution for this? — Pikapi (ChatWhat's up) 19:44, February 21, 2012 (UTC)

That is also something caused by code in the Common.css.
#csMainContainer {
   -moz-border-radius-topleft: 0.5em;
   -moz-border-radius-topright: 0.5em;
   -moz-border-radius-bottomleft: 0.5em;
   -moz-border-radius-bottomright: 0.5em;
   -webkit-border-radius-topright: 0.5em;
   -webkit-border-radius-topleft: 0.5em;
   -webkit-border-radius-bottomright: 0.5em;
   -webkit-border-radius-bottomleft: 0.5em;
   background: #F9F9F9 url(reflected_shadow.png) repeat;
   border: 1px outset transparent !important;
}
Just as with the previous issue, replace the highlighted code with the word "transparent". --Gardimuer { ʈalk } 07:36, February 25, 2012 (UTC)
So do you mean:
 #catlinks, #edittools, #editpage-specialchars, .toc, #filetoc, h4.mw-specialpagesgroup, .smwfact {
    -moz-border-radius-topleft: 0.5em;
    -moz-border-radius-topright: 0.5em;
    -moz-border-radius-bottomleft: 0.5em;
    -moz-border-radius-bottomright: 0.5em;
    -webkit-border-radius-topright: 0.5em;
    -webkit-border-radius-topleft: 0.5em;
    -webkit-border-radius-bottomright: 0.5em;
    -webkit-border-radius-bottomleft: 0.5em;
    background: transparent url(http://images.wikia.com/common/skins/monaco/images/reflected_shadow.png) repeat;
    border: 1px outset #F9F9F9 !important;
 }
Sam Wang 08:16, February 25, 2012 (UTC)

Around Wikia's network

Random Wiki