Forum:Collapsed table. Can't change background color

I am trying to use CSS to make the background of the heading blue for this collapsed show/hide table:
 * http://cannabis.wikia.com/wiki/Template:You_can_help_3 - (Later note: See Template:You can help 5 to see the standard class=toccolours off-white background color and format).

I am not using this table anywhere, so feel free to experiment.

See also:
 * http://cannabis.wikia.com/wiki/Template:You_can_help_2

It has the blue color I am trying to get. Here is the color number:


 * #ccccff;

Template 3 uses table wikitext. Template 2 uses NavFrame wikitext.

Here are the JS and CSS pages:
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.js
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.css

I want to convert all the collapsed tables on the wiki to using table wikitext instead of NavFrame wikitext. See:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates

Table wikitext does not have overlap problems with stuff on the right side. --Timeshifter 05:53, March 16, 2010 (UTC)


 * I've fixed this for you. All that really needed to be done is styling, per normal tables, the first row. I also made the table fill the full width of the page, but you absolutely don't need to keep that. :)  The 888th Avatar   (talk)  10:25, March 16, 2010 (UTC)


 * Thanks. Where is class=toccolours specified in CSS? I don't know where to look for the overall CSS stuff for all Wikia wikis. I want to learn how class=toccolours is specifying colors, borders, margins, padding, etc..


 * If I take out class=toccolours and all inline styling, then I end up with this:
 * http://cannabis.wikia.com/wiki/Template:You_can_help_4


 * It is using only class="collapsible collapsed". I want to see what to modify in
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.css
 * in order to add color, borders, padding, margins, etc. to all show/hide tables built using only class="collapsible collapsed". --Timeshifter 21:51, March 16, 2010 (UTC)


 * The "toccolours" class is inherited from the default css on MediaWiki wikis, because it's used to define all the table of contents. You can change that class by using .toccolours in the Common.css, but that will also change the look of all your content tables - not too flash an idea. :)
 * My advice for making all your collapsible tables to have the same styling (that's what you want, right?) is to make a new class in Common.css, e.g. .navtables and add styling there. Then simply add the class to each table e.g. class="navtables collapsible collapsed". The 888th Avatar   (talk)  23:08, March 16, 2010 (UTC)


 * Thanks again. I was thinking that is what I might have to do. But I am not too good at CSS, and need to see something to work with. Can you link to the default css page so I can find the toccolours class, and use it as a model? --Timeshifter 01:12, March 17, 2010 (UTC)

No problem. :) If you're not using IE, the shared CSS for Wikia is at . It's a big, confusing, wall of CSS, so use CTRL-F on your browser, type in "toccolours", and you'll see it highlighted. The stuff between curly brackets directly after this is what has been used in this class. The 888th Avatar   (talk)  08:58, March 17, 2010 (UTC)


 * Thanks. I am not sure I would ever have found such a link for default CSS. It must be buried deep in the MediaWiki software without a simple name that can be enclosed in double brackets. Thanks for the good instructions. Is this the CSS in question?:


 * .toccolours{border:1px solid #aaa;background-color:#f9f9f9;color:#000;padding:5px;font-size:95%}


 * And is this where I first experiment with creating class=navtables or some other class name?:
 * http://help.wikia.com/wiki/User:Timeshifter/monaco.css --Timeshifter 09:21, March 17, 2010 (UTC)


 * You're welcome. :D With finding stuff like this, you can cheat by using, for example, Firefox's Firebug extension, which you can download, or Chrome's developer tools, which is included by default. I'm not sure if that's really cheating though - trying to find stuff like this otherwise is quite hard. Yes, you're right - that is the CSS in question. It might be better to test and create classes on your own wiki, though - Common.css if you're confident (that's where it should end up eventually) or personal monaco.css if you're not. Not sure if Wikia Help will have the classes you're creating. ;) The 888th Avatar   (talk)  09:47, March 17, 2010 (UTC)

(unindent) Oops. I meant to point to this:
 * http://cannabis.wikia.com/wiki/User:Timeshifter/monaco.css

I discovered that the default CSS can also be found by saving any page on the wiki (Firefox file menu, save page as, web page, complete). It is listed in the _files folder as this:
 * cb20084typeCoreCSSthemenamecustomrtlStaticChutebrowsernotIE.css

.toccolours is listed there in that CSS file in the same way as in the CSS file you linked to. So the CSS pages may be the same. I did not compare further though.

I found out there is already a class set up for show-hide tables that works fairly well: .navbox

See: Help:Dynamic navigation to see the standard show-hide CSS that includes .navbox CSS.

I made some changes in the CSS that I had copied from there to here:
 * http://cannabis.wikia.com/wiki/MediaWiki:Common.css

I removed all the font sizes in the show-hide CSS at first. I am experimenting with font sizes. I am confused by how nested show-hide tables sometimes have smaller and smaller fonts. I also prefer default text alignment, not center-aligned. Most importantly I removed width: 100%; because it causes overlap problems on the right side of pages that have right-side images, videos, TOCs, infoboxes, etc.. I also removed clear: both;

After those changes I converted all the non-experimental show-hide tables used on the wiki to class="navbox collapsible collapsed". See:
 * http://cannabis.wikia.com/wiki/Category:Collapsible_box_templates

Template:You can help with class="navbox collapsible collapsed" can be compared to Template:You can help 5 with class="toccolours collapsible collapsed".

I am still using the Javascript from here:
 * w:c:dev:ShowHide

To see how these show-hide boxes work on pages with lots of stuff on the right side see the many show-hide boxes on this page:
 * http://cannabis.wikia.com/wiki/Madrid,_Spain --Timeshifter 22:45, March 18, 2010 (UTC)