Admin Forum:Chat button styling

Forums: Admin Central Index → Technical Help → Chat button styling 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.

I'm trying to style the chat button in the right rail at w:c:tardis. But I'm not quite understanding the CSS element name. It's. . . different to how the other buttons are in the rail. Could someone who knows a little bit more about CSS please take a look at the "start a chat" button and tell me what element names I would use to style it? Thanks 21:24:57 Sat 10 Sep 2011


 * Try using . On a sidenote: the amount of custom styling you're using, CSS3 in particular, makes the wiki run slower on weaker computers - box-shadow is known to slow down a page. — Sovq 06:48, September 11, 2011 (UTC)
 * Yeah, I've been trying to scale back the box-shadow-y-ness for Firefox users, because I understood they were particularly affected. Is it your understanding that other browsers have an issue with it as well?  It's hard for me to see it, because I've got an old computer and browsers, and I'm not noticing horrible load times.


 * In any case, div.chat-join button was one of my initial ideas, and it's not worked. (I've tried it both as .div.chat-join button and div.chat-join button, cause i'm still not quite sure when to apply a prepending "." and when not to.  Neither case has worked, though.)   16:56:14 Sun 11 Sep 2011


 * Odd, when I add  to the set of button overrides you use for other buttons in Firebug, it works fine. The dot - "." - indicates css classes called in the article with class="CSSCLASS", so it should not be added before the "div" part in this case.


 * I opened your wiki both in Chrome and Firefox and in both of them scrolling, opening navigation menus or triggering ":hover" styling effects have quite a bit of a delay. But then again I probably do have the oldest computer around here ;). — Sovq 17:53, September 11, 2011 (UTC)

If by “re-styling” you mean changing the wording, you do not have to use CSS/JS. You can do it by editing the relevant files in the MediaWiki namespace. Hope this helps! — Spike Toronto  07:20, September 11, 2011 (UTC)
 * w:c:tardis:MediaWiki:Chat-start-a-chat changes the text on the Start a Chat button.
 * w:c:tardis:MediaWiki:Chat-join-the-chat changes the text on the Join the Chat button.
 * You can see most of the relevant system messages for the Tardis Wiki’s Chat here


 * No, I mean the actual style of the button — though every bit of knowledge helps. What's throwing me, I suppose, is that if you inspect another button in the right rail, you get a specific class name, like "wikia-button-upphotos".  But the chat button doesn't seem to have a class attached.  It seems to be created by something that looks more like "raw" JS:  


 * Anyone got any ideas? 16:56:14 Sun 11 Sep 2011


 * Okay, so now it's just getting weird. I can remove the join chat image by specifying the element div.chat-join button img but I can't affect the button's actual styling by referring to div.chat-join button  Anyone know what to make of that?  13:52:52 Mon 12 Sep 2011
 * Have you tried ? Did you clear the cache? 13:57, September 12, 2011 (UTC)


 * It must be a problem on your end. Try another browser/another account/refresh and purge the cache properly. — Sovq 13:59, September 12, 2011 (UTC)
 * How "must" it be a problem on my end? I've tried three different browsers and have obviously cleared the cache in all of them.  I've also had multiple users confirm for me that they, too, aren't seeing a change in the start/join button, except that the image has now been taken away.  Obviously, if we can see that the image has been successfully removed, we're not having simply browser/cache issues.  I mean, the goal here is to make the chat button to look like all the other buttons in the right rail.  You're not saying that you are seeing a successfully styled start/join chat button, are you?   14:43:28 Mon 12 Sep 2011


 * Hold on, I'm an idiot. I had a stray space between a * and a / in my note about the section, meaning that I accidentally remarked out the styling of the very element I was trying to style.  So I guess it was a problem on my end.  Not quite as basic as failing to clear the cache, but — yeah, embarrassing nonetheless.


 * So, anyway, thanks for everyone who helped me . . . get back to where I was when I opened the thread. Sorry for wasting everyone's time. Still, I guess we have definitely learned, for posterity, that the element name for styling the chat buttons are div.chat-join button and div.chat-start button


 * I'll just be exiting quietly through the side door now . . .   15:06:40 Mon 12 Sep 2011


 * To be fair, the "must" part was a poor choice of wording on my part. Since I only tested the change without actually editing MediaWiki:Wikia.css, then syntax errors also were a possibility. — Sovq 15:44, September 12, 2011 (UTC)
 * No worries, your wording got me thinking about boneheaded mistakes for which I'd not yet actually checked. Everything helps in diagnosing a fiddly bit of code. :)  15:25:29 Wed 14 Sep 2011