FANDOM


This is the talk page for discussing improvements to the WikiaCommunityCentralTheme page.

Making it better (You found my suggestion at My CC's wikia.css

As of now, I managed to make a way having different style of color when you hover on a button and when you click on it. My suggestion for making this better is the following:

:root {
--background-buttonprimaryhover: linear-gradient(to bottom, #003f73 35%, #002340 65%);
--background-buttonprimaryactive: linear-gradient(to bottom, #002340 35%, #003f73 65%);
 
}
 
.WikiaPage .wds-button:hover,button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .WikiaPage .wds-button:hover, .wikia-button:hover, .wikia-menu-button:hover {
    background: var(--background-buttonprimaryhover);
    }
.WikiaPage .wds-button:active,button:active, input[type="button"]:active, input[type="reset"]:hover, input[type="submit"]:active, .WikiaPage .wds-button:active, .wikia-button:hover, .wikia-menu-button:active {
    background: var(--background-buttonprimaryactive);
    }
 
.wikia-menu-button > a:hover,
.wikia-menu-button .drop:hover,
.wikia-menu-button > li > a:hover
{
    background: var(--background-buttonprimaryhover);
}
 
.wikia-menu-button > a:active,
.wikia-menu-button .drop:active,
.wikia-menu-button > li > a:active
{
    background: var(--background-buttonprimaryactive);
}

—Preceding unsigned comment added by HM100 (talk) 10:10, June 19, 2017‎ (UTC) - Please sign your comments with ~~~~

I wasn't planning to make any changes like that anytime soon, but I guess it's something I should consider. I had a few other things that I needed to throw in, so I guess I should try what you've presented when I next add those things in. I will need to make a slight change to what you've presented, recolouring the text colour of the buttons. ― C.Syde (talk | contribs) 22:12, June 19, 2017 (UTC)
Doesn't seem to recognise "background-buttonprimaryhover" as a valid property. ― C.Syde (talk | contribs) 08:50, June 20, 2017 (UTC)
Sorry for late but I was using variables to inspect this. Which I use this too much. So you can replace those var(--buttonprimaryhover) with the value the variable gives. Which is the lineal gradient. Howver, it needs recolour of the buttons in text color IMO. MarTsok 18:27, August 1, 2017 (UTC).

Once you added the logo, it should render smaller in Tablet landscape and Portrait breakpoints. In addition, I also made some changes to Page Title to look like before the new headers were released. Also, its size is reverted back to default one on Desktop XL breakpoint since I know it looked in that size on Desktop XL breakpoint. MarTsok 18:27, August 1, 2017 (UTC)

I had my own reasons for not removing the boldness from the page title, as it seemed to be too big a change from the default redesign, but in this situation, I guess other user's needs are greater than mine. So I have no problem with keeping these changes. ― C.Syde (talk | contribs) 20:40, August 1, 2017 (UTC)
As you know, Desktop XL breakpoint uses large font so large font on titles shouldn't be used for keeping the classic cc theme except in Desktop XL breakpoint. And having no boldness in the title seems suits as of this also restores the pre-wikia headers it had aka the ones before the release which had no bold in the titles and makes it better to have more classic central look. Just like the buttons with gradient styles but the logo should be smaller on smaller screens because it does not fit with that size. Thanks MarTsok 22:41, August 1, 2017 (UTC)
Indeed. ― C.Syde (talk | contribs) 23:21, August 1, 2017 (UTC)

Instalation

Hi there! I want to make a suggest :P. In the Installation section, it shows this code:

if (wgCityId == '177') {importStylesheetPage('MediaWiki:WikiaCommunityCentralTheme/code.css', 'dev');}

May I ask why are you using JavaScipt to import a CSS code? I mean, I think JavaScript makes heavier the load of pages, but that is not the point. Why don't you use instead a CSS import? Something like:

@import url("http://dev.wikia.com/wiki/MediaWiki:WikiaCommunityCentralTheme/code.css?action=raw&ctype=text/css");

Also, I don't think the if conditional helps, because it limits the code to be used on the wiki with only that City ID (every wiki has different ID). However, if your intention is to make it only usable in Community, then you just add the @import on wikia.css. Just a suggestion, of course :P Pintor Kagamine talk 117 contribs 19:41, August 2, 2017 (UTC)

I tried that in the past, but it resulted in unwanted side effects, and the only way to stop the side effects from happening was importing it through JavaScript. ― C.Syde (talk | contribs) 01:18, August 3, 2017 (UTC)

Installation

So, first off, excellent work with this stylesheet. I'm pretty impressed with how this has turned out.

That said, I'd like to offer a suggestion regarding a change to the manner in which it is imported. I added the script to my global.css via an @import statement and found that the rules were applied to all other wikis I visited. The reason for this behavior is because you did not prepend body.wiki-wikia to the front of every rule in the stylesheet. If you were to do so, you could dispense with the janked JavaScript import method and use a conventional @import statement, as body.wiki-wikia would ensure the rules target only Community Central and no other wiki. Eizen (talk) 12:15, September 12, 2017 (UTC)

The last time I tried that resulted in unwanted side effects, and the only way to stop the side effects from happening was importing it through JavaScript. For some reason some of the elements didn't come through properly when imported through global.css ― C.Syde (talk | contribs) 12:30, September 12, 2017 (UTC)
It seems to work as far as I can tell. ¯\_(ツ)_/¯ No need to change though if you prefer the current implementation; it's your stylesheet after all. Eizen (talk) 12:50, September 12, 2017 (UTC)

External Stylesheets

Should the external style sheets be used? yes this is a continuation of the discord conversation --Sophie 16:11, March 11, 2018 (UTC)

Context - we talked about the Stylish links in §Notes and their (potential?) security implications.
Sooo there was a bunch of issues raised, and these apply in general:

  • Syde would like the links remaining on the documentation page.
  • Stylish likely being incompatible with FANDOM's privacy policy. Would need to ask staff on that one, and whether it can actually be linked to in articles.
  • In general, it's not really secure for users to install things from external sites. The vendor could easily change owners (as Stylish did), or disappear into the sunset. This would be a problem with other sites like https://greasyfork.org etc. I guess Github would count as a notable exception - FANDOM uses it for development too.
  • Noting the site and extension in question aren't open-source anymore.

Even though I don't like the limitations with user CSS, I'm thinking no.
speedy🔔︎🚀︎ 17:15, March 11, 2018 (UTC)
Adding to speedit's reply, you could also modify the stylesheet via a MITM attack, plus the stylesheet is not reviewed like it normally would be on wiki, so the stylesheet could have a security hole in it, and nobody would know. --Sophie 17:20, March 11, 2018 (UTC)
I don't see what the big deal is, and it's just a third party extension, much like Discord is. Plus, the style-sheets are only linked on the page, because they touch places that would be impossible to do using standard Wikia CSS. ― C.Syde (talk | contribs) 20:33, March 11, 2018 (UTC)
You're not loading code from discord tho. Also those pages are not affected by personal code for a reason. --Sophie 20:46, March 11, 2018 (UTC)
I've no idea what you mean by Discord being a third-party extension. The big deal is that these pages are not loading JavaScript/CSS because they are supposed to be secure, and telling users to load CSS on them that isn't even hosted on Wikia is putting them into potential security risks which you didn't warn them about. -- Cube-shaped garbage can 20:49, March 11, 2018 (UTC)
What is that reason? Plus, if they aren't affected, then it's going to look rather inconsistent, and the intention was to make things as close as possible to how they were before the wiki was redesigned. And I can't really do that if I don't have anything that affects those pages. ― C.Syde (talk | contribs) 20:50, March 11, 2018 (UTC)
Then why don't you warn the users about potential security risks of installing these stylesheets? -- Cube-shaped garbage can 20:52, March 11, 2018 (UTC)
I could do that. But first I would need to know what those security risks are. ― C.Syde (talk | contribs) 20:54, March 11, 2018 (UTC)
MITM, unreviewed code, code with (security) errors, the extension and website's (security) issues and errors - just list a few. --Sophie 20:59, March 11, 2018 (UTC)
Noting here that Cqm has removed the links. speedy🔔︎🚀︎ 12:09, May 2, 2018 (UTC)
Doesn't that override existing consensus though? I thought the consensus was that they would be kept, but the warnings would be added. ― C.Syde (talk | contribs) 12:20, May 2, 2018 (UTC)

──────────────────────────────────────────────────────────────────────────────────────────────────── Perhaps I missed the larger discussion, but what I see above is one person struggling to understand why user defined CSS is not imported on several sensitive special pages. However, I don't see much in the way of an explanation why it's a bad idea either, so I'll explain.

Originally, just JS was disabled on those pages, because of the potential harm user JS could do, such as harvesting passwords. Some of you may note this was a bit of a moot point on Wikia historically, before the login form was made secure and JS review was introduced. It was also extended to all JS pages for different reasons, although there was some overlap. Some time later, mw core developers observed that CSS was also loaded on these pages. This was disabled because IE quirks mode could load JS through CSS, but also because CSS could be used to manipulate a user in much the same way as JS. This was back when 1.19 was a supported release (some time ago).

Now, someone has advertised a way to circumvent this using a browser extension. This has all the flaws of when CSS was loaded everywhere and more on top. Firstly, the stylesheet is not located on Dev, thus is not subject to the oversight of other users and staff should it be used for nefarious purposes. Secondly, assuming it is safe now, it can change, without warning in the future and introduce the situation I've outlined. Therefore, I elected to set a precedent and remove the links from the page despite the warnings. cqm 11:41, 3 May 2018 (UTC)

I do understand that there may be some risks, but I've installed the CSS myself, as have others, and there haven't been any disastrous results at all. I keep the CSS well maintained. While I understand the concerns, I'm still concerned that without the links to the style-sheets on the page, some users out there may be expressing disappointment that the CSS on the dev wiki does not support those special pages, and they may start to look for ways to add the CSS to those pages, not realising that I have those parts already covered. ― C.Syde (talk | contribs) 11:55, May 3, 2018 (UTC)
That it works now is no indication of the future, especially with how often oasis changes. As far as their disappointment goes, that's true for everything on Dev. People still manage perfectly well. cqm 11:58, 3 May 2018 (UTC)
I'd be more concerned about the prospect of users not realising that they need to be on the lookout for updates, in order to manually install those updates. But then I guess it all comes down to the same thing that you've mentioned. ― C.Syde (talk | contribs) 01:22, May 4, 2018 (UTC)
And as it happens, the security concerns raised have been vindicated: https://mobile.twitter.com/_developit/status/1014198557962919937 cqm 05:47, 5 Jul 2018 (UTC)
Apparently Stylish has been removed from Google extensions, so it seems that Stylish cannot be installed directly anymore anyway. ― C.Syde (talk | contribs) 07:03, July 5, 2018 (UTC)
Since Stylish was removed, should we go ahead and remove the css from the page? --Sophie 09:50, July 5, 2018 (UTC)
What page are we talking about? Also no, because the code can still function if other things like Stylus are exporting it. And even so, if I were to remove it then I wouldn't be able to preserve the code for something that does work. ― C.Syde (talk | contribs) 10:10, July 5, 2018 (UTC)

──────────────────────────────────────────────────────────────────────────────────────────────────── I'm talking about this page. Also regardless of if other extensions are importing it, there are still issues as explained above. If that is your only copy of your code, then you should consider backing it up somewhere. --Sophie 10:21, July 5, 2018 (UTC)

Okay first off, there is nothing wrong with that page, as there aren't any style-sheets on it. Secondly there are users that are using that script. And that script dated from BEFORE I knew about Stylish. So just because my style-sheets may need to be backed up does not necessarily mean the same must happen with this script. ― C.Syde (talk | contribs) 10:34, July 5, 2018 (UTC)
I'm not talking about the JS? I was talking about the stylish css that was apparently already removed. --Sophie 10:49, July 5, 2018 (UTC)
There isn't any JS. Also I will handle the style-sheets myself if they need to be removed. ― C.Syde (talk | contribs) 10:50, July 5, 2018 (UTC)
"There isn't any JS." You just mentioned JS? ("are using that script. And that script dated" "with this script."). Also there is nothing for you to handle as it is already removed. --Sophie 11:25, July 5, 2018 (UTC)
I said script, not JS. It imports CSS not JS. But it's still a script. ― C.Syde (talk | contribs) 11:31, July 5, 2018 (UTC)
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+