Forum:Wikitable class changed why?

It's great to be rolling out performance enhancements and improvements, but I don't understand why global class styles were changed also???

As in - why was the Header color of the wikitable class changed???

I'm sure on many wikis the new color style looks fine, but on w:c:ParadiseIslandHD it doesn't - we (as I assume nay other wiki sites did too) chose this class because of its standardised style, border, colors, spacing, padding, etc, etc, and the colors suited very well our theme.

But now the Header color blends in with our them's background, giving the header-cells a wahsed-out / bleached look compared to the data-cells, instead of standing-out as they used to / are meant to.

I've left it a while to see if someone was fixing it by default, since no-one wants a global style-change done when styles were selected and matched to their wikis, but it hasn't been fixed yet.

So what I'm wondering now is, will this be fixed, or are we going to have to go and change the table class on every single table on every single page to make the tables look decent again? If so, could someone please let me know the code format of what the style used to be (and out of curiosity, where to see what the current styles of all the table classes are - also just to see what other styles are pre-made and available to use?) - and I might put that into a template so if we decide to change the style in the future ourselves, we can just change it in the template rather than on every single table on every single page one by one.

Thanks!
 * I'm guessing this is a change in 1.19 - but I haven't seen it myself - can you provide a link to a page where you don't like how it looks?
 * are we going to have to go and change the table class on every single table on every single page to make the tables look decent again?
 * Wikitable is a class, so you would just need to write some CSS and put it in Wikia.css in order to get the style of the table you want - no need to change the class. --  Random Time  13:49, July 15, 2012 (UTC)

OK, so I can override the global default within an individual wiki - but before I start playing with css styles, can you let me know where the global wikitable class is defined? So I can see its current style config so I can start with that and tweak it? And can someone tell me what the style was before it was changed? I think it is as simple as "The header-cell background colour was lightened from a darker Blue to a Bleached-WashedOut-Blue", or maybe the header and data cell background colors were swapped, because I'm sure the data cells were lighter than they are now. egs: And then pretty much every single page (~160) on: egs:
 * w:c:paradiseislandhd:Awards
 * w:c:paradiseislandhd:Income_and_XP
 * w:c:paradiseislandhd:Repairs
 * w:c:paradiseislandhd:Cleaning
 * w:c:paradiseislandhd:XP_levels
 * w:c:paradiseislandhd:Category:Build
 * w:c:paradiseislandhd:Party_boat
 * w:c:paradiseislandhd:Zorbing
 * w:c:paradiseislandhd:Flag_Day

Wait! Whoa! OMG! While clicking on the pages to copy and paste here, one of them just popped up with the OLD (great-looking) style! I thought "OMG, it must be using a different class - quick, click on Edit - Source to see what class it is, but it was the same wikitable class. As soon as I Backed out of the Edit, it showed the same ugly class as every other page does now. Oh why oh why didn't I hit Sniping Tool and grab a screenshot of it!!! Grrr!!!

The default style for the wikitable class can be found in oasis.scss I believe (although this one is minified so you'll have to search the document for the word "wikitable" and extract the relevant styling yourself. More importantly than this link: how to find this information. In Chrome (you may need a slightly different procedure depending on your browser), you can access loaded stylesheets by following these steps: Anyways, this kind of stuff can be found using Developer Tools in your respective browser. All you have to do is poke around a bit and you'll find it :)
 * 1) Open the developer tools panel
 * 2) *Right-click on the page and choose "Inspect element"
 * 3) *or... Press F-12 (hotkey) on your keyboard
 * 4) *or... Click the wrench icon in the upper-right corner, "Tools" -> "Developer tools"
 * 5) Open the "Resources" panel of developer tools
 * 6) Explore all of the files under the "Frames" option, somewhere in there you'll see "Stylesheets".

I'm having the same problem. The wikitables look terrible at the moment. So do I change the code in "Common.css" and if so, what code do I change to fix it? --Sir Edward Grey (talk) 04:02, July 17, 2012 (UTC)


 * Pump. Please check w:c:megamitensei:List of Devil Summoner: Soul Hackers skills which the cell text color is blended with the background color. -- Inpursuit (talk) 07:14, July 17, 2012 (UTC)


 * I'm not entirely sure what you're asking, but the table in the link you posted has exactly the same problems the tables in my wiki is having. --Sir Edward Grey (talk) 07:20, July 17, 2012 (UTC)


 * @Inpursuit: Fixing the background color is easy. Just put this in your site's css page (typically MediaWiki:Common.css)


 * The thing is, I have no idea why Wikia would default the global text color but leave the background color undefined, this is plain irresponsible. Many wikis use deep dark background, the consequence should be easily foreseeable. It only creates more problem to fix in our local wiki as modifying Mediawiki namespace requires Admin right. I straightly demand Wikia to remove any color definition of the Wikitable class. -- Inpursuit (talk) 07:42, July 17, 2012 (UTC)


 * Report bugs at Special:Contact/bug if you want them fixed by Wikia (preferably with links / description / screenshot).


 * Actually it's the bar header of white at the top I'm trying to change the colour of, not the lower cells. I've been searching, but I can't seem to find the code for that attribute. --Sir Edward Grey (talk) 22:03, July 17, 2012 (UTC)


 * So far I've been using this code:


 * ...but it hasn't been working. (Also tried:


 * ...still no effect) --Sir Edward Grey (talk) 22:45, July 17, 2012 (UTC)

You have the correct CSS for the title bar. You might have to add !important to it. But it should be working. If it's not, please link to 1) where you put the CSS and 2) the page where it's not working.


 * Here's the link to a page where it should be working LINK! and here's the Common.css. Very close to the top, this is the code I'm having trouble with:


 * I'm very new to this, only just started learning CSS in the last few days, so there's probably some really stupid mistakes in there.--Sir Edward Grey (talk) 23:43, July 17, 2012 (UTC)


 * Change  to  . That's the only obvious problem I see.


 * Made that fix, but still nothing's changed. The only code that seems to take is the "color: #d29762;" bit in "table.wikitable". I've no idea why it seems to be ignoring the rest. --Sir Edward Grey (talk) 00:46, July 18, 2012 (UTC)


 * Okay, now you don't have any syntax errors left. But, it's still not working. So, why? The reason is because certain CSS selectors have higher priority than others. Wikia has some CSS that is setting the background-color to #F2F2F2 which is out-prioritizing yours. So, try using higher priority selectors and see if that helps:




 * That worked perfectly! So how would I modify that to set higher priority selectors for this line of code?


 * Thanks for helping me with that. --Sir Edward Grey (talk) 01:21, July 18, 2012 (UTC)

Try this CSS: Steps to get from your CSS to this result:
 * 1) Fix the syntax error with the "1px" in the "border" property.
 * 2) Add !important to everything.
 * 3)  is fine, it doesn't need changing.
 * 4) The HTML base of the document (use Developer Tools in your browser, preferably Firefox or Chrome) near the  element looks like this:.
 * 5) To match that HTML with fairly high priority, use the following CSS selection:.
 * 6) What this CSS selection says: "A  element has class="wikitable". The table's direct child node is some element (* matches any element). That element's direct child node is a   node. The   direct child node is the   element that we want to apply CSS rules to.
 * 7) What if the HTML base was  (the table body element is missing)? To match that, use this CSS selection:.
 * 8) How to handle both cases where the  element may or may not be in the document? Well, just apply the CSS rules to both selections (note the comma):


 * Sorry, I copy+pasted the wrong code in my last post. This is what I should have posted:


 * This part is working perfectly:


 * ...but this part is only partially working:


 * The color line is working, the border line isn't. --Sir Edward Grey (talk) 02:42, July 18, 2012 (UTC)


 * Use, like I said. Also, try changing the border width from "1px" to something obvious like "20px" -- that way you'll know whether or not it's working because the border will be thick enough that you can see it.


 * Sorry, for some reason I thought the  were just notes of you saying, "This is important," not actual code. I added it and now everything's working. It seems that the "border" attribute applies only to the outer edge of the table and not the dividers in between cells, which was what I really wanted to change (which was why I thought it wasn't working even though it was). Thanks so much. You've been a huge help. --Sir Edward Grey (talk) 03:14, July 18, 2012 (UTC)

You can get the border between all of the cells with this: It will affect the whole table except for the th part. But I think by now you should know how to get the border for the th part on your own.


 * Yeah, I do ;) It's all perfect now. --Sir Edward Grey (talk) 04:35, July 18, 2012 (UTC)