FANDOM


  • With all of the changes to the underlying site structure that will come with fluid layout, there will need to be changes to the standard Wikia CSS, and of course to any custom CSS that might exist on individual communities. And since fluid layout also introduces a little more design complexity, it made sense for us to both improve the editing interface for the primary CSS file and provide some additional help and resources around CSS. Here are some details about how accessing and editing Mediawiki:Wikia.css will change.

    Accessing Wikia.css
    An entry point to the new editing interface will be added to Admin Dashboard. Browsing to Mediawiki:Wikia.css?action=edit will also route you to the new interface, located at Special:CSS.

    How it looks
    As you can see in the screen shot, it looks like a standard file editor, and now syntax highlighting is available when you edit. Admins on dark-themed wikis should be pleased to learn that highlighted class names will be visible now (they were black before, and unreadable on dark backgrounds). The “publish” area of the interface still has all of the options you might need (edit summary, minor edit, etc).

    Error checking
    The new interface also features realtime linting (error checking) with pop-ups that give you the details of the error. There’s also an icon that appears for any line with the !important declaration – a reminder to use it sparingly.

    Updates and help
    The right rail area in this interface will include links to the most recent Technical Update blog posts that note “big” CSS changes in each release. This way, if any recent changes might affect your local CSS, you’ll have that note right next to you while you’re editing. We’ll be providing a weekly report in the technical updates that details most of the changes in each release, big and small. The right rail will also include links to CSS help pages, webinars, and the Community Central Forum Board.

    We've given all users access to this feature on the Community Test Wikia, so head over there to check it out for yourselves!

      Loading editor
    • Oh my god this looks amazing. I love it. Wikia.css is way more compatible now and the look of it, instead of just plain text, is really cool. I LOVE THE ERROR CHECKING. The sidebar with CSS news is also just the best. This is great!!

        Loading editor
    • Looks nice, I might actually edit in the browser even when working on bigger changes now :)

        Loading editor
    • The error checking feature looks like it could be useful, but I am still a little concerned about how the changes would affect the coding in the current CSS coding. I know the wiki I contribute to the most has a lot of code already in our CSS. It will be interesting to see what this project develops into.

        Loading editor
    • Bane Cane wrote: The error checking feature looks like it could be useful, but I am still a little concerned about how the changes would affect the coding in the current CSS coding. I know the wiki I contribute to the most has a lot of code already in our CSS. It will be interesting to see what this project develops into.

      The error checking doesn't force a change. It only notifies you that code you've entered may be incorrect and gives you a hint on how to fix it. Changing the code is up to the user.

        Loading editor
    • Rappy 4187 wrote:

      Bane Cane wrote: The error checking feature looks like it could be useful, but I am still a little concerned about how the changes would affect the coding in the current CSS coding. I know the wiki I contribute to the most has a lot of code already in our CSS. It will be interesting to see what this project develops into.

      The error checking doesn't force a change. It only notifies you that code you've entered may be incorrect and gives you a hint on how to fix it. Changing the code is up to the user.

      Thank you, I understood that already, I should have been more clear. I meant more about the other parts of the project with how it might affect the aesthetic appearances of information on the pages.

        Loading editor
    • Finally god has answered my prayers. Thank You god!

        Loading editor
    • First of all, it's cool that the text is highlighted and that the text doesn't wrap, which is way better than all of those line breaks when your reach the right side of the editor :P
      I have a couple of questions:

      1. If i understood correctly, does it only affect Oasis (wikia.css)?
      2. Will MediaWiki:Wikia.css?action=edit&useskin=monobook also direct me to Special:CSS?
      3. Why does it say not to use adjoining classes?
      4. If the answer to my Q2 is "no", then are you going to completely disable Wikia.css?
      5. Final question: do you see yourself doing the same with JS pages as well and/or personal JS and CSS pages at some point in the near future?

      Sorry if i bother with the questions :P
      Also i though it would be nice if you include the "Page history" result in a popup section, similar to the "Show changes", instead of trying to load it in the same window. Or in a new ticket (anyway even if you don't it shouldn't be a big deal, it can probably be displayed using some javascript).

        Loading editor
    • Penguin-Pal wrote:
      1. If i understood correctly, does it only affect Oasis (wikia.css)?
      2. Will MediaWiki:Wikia.css?action=edit&useskin=monobook also direct me to Special:CSS?
      3. Why does it say not to use adjoining classes?
      4. If the answer to my Q2 is "no", then are you going to completely disable Wikia.css?
      5. Final question: do you see yourself doing the same with JS pages as well and/or personal JS and CSS pages at some point in the near future?

      Thanks for the suggestion about the history. To answer your questions:

      1. Correct, this new interface is currently only for Wikia.css
      2. No, the editing experience for Wikia.css in Monobook is not changed
      3. It's for legacy IE6 support, not really something to worry about anymore.
      4. Perhaps you mean Common.css? We don't have any plans to disable anything, but Wikia.css is the primary CSS file for the Wikia skin, of course.
      5. It's something we can consider if users are requesting it!
        Loading editor
    • BertH wrote:

      Penguin-Pal wrote:
      1. Final question: do you see yourself doing the same with JS pages as well and/or personal JS and CSS pages at some point in the near future?
      1. It's something we can consider if users are requesting it!

      Yes please.

        Loading editor
    • Wow, all I can say is, lovely!

        Loading editor
    • BertH wrote:

      Penguin-Pal wrote:
      1. If i understood correctly, does it only affect Oasis (wikia.css)?
      2. Will MediaWiki:Wikia.css?action=edit&useskin=monobook also direct me to Special:CSS?
      3. Why does it say not to use adjoining classes?
      4. If the answer to my Q2 is "no", then are you going to completely disable Wikia.css?
      5. Final question: do you see yourself doing the same with JS pages as well and/or personal JS and CSS pages at some point in the near future?

      Thanks for the suggestion about the history. To answer your questions:

      1. Correct, this new interface is currently only for Wikia.css
      2. No, the editing experience for Wikia.css in Monobook is not changed
      3. It's for legacy IE6 support, not really something to worry about anymore.
      4. Perhaps you mean Common.css? We don't have any plans to disable anything, but Wikia.css is the primary CSS file for the Wikia skin, of course.
      5. It's something we can consider if users are requesting it!

      Ok, thank you for making this clear :)

        Loading editor
    • Great change! This will be a huge help to those who are newer to CSS yet still want a pretty wiki. Now, if only we could use tab on the edit page for indentation... :P

        Loading editor
    • $(function() {
          var cough = '-cough- ',
              body = 'In editor syntax highlighter for JavaScript ';
          alert(cough + body + cough);
      });
        Loading editor
    • Princess Platinum wrote:

      $(function() {
          var cough = '-cough- ',
              body = 'In editor syntax highlighter for JavaScript ';
          alert(cough + body + cough);
      });

      lol

        Loading editor
    • Callofduty4 wrote: Now, if only we could use tab on the edit page for indentation... :P

      Change your keyboard's binds to that : is bound to <tab>. :)

        Loading editor
    • Hurrah, this looks great. Quite excited for these updates about to get rolled out :)

        Loading editor
    • Like it!

        Loading editor
    • Very nice!

        Loading editor
    • Great guys, good job !

        Loading editor
    • Wow! Well done!

        Loading editor
    • BertH wrote:

      Penguin-Pal wrote:
      1. If i understood correctly, does it only affect Oasis (wikia.css)?
      2. Will MediaWiki:Wikia.css?action=edit&useskin=monobook also direct me to Special:CSS?
      3. Why does it say not to use adjoining classes?
      4. If the answer to my Q2 is "no", then are you going to completely disable Wikia.css?
      5. Final question: do you see yourself doing the same with JS pages as well and/or personal JS and CSS pages at some point in the near future?

      Thanks for the suggestion about the history. To answer your questions:

      1. Correct, this new interface is currently only for Wikia.css
      2. No, the editing experience for Wikia.css in Monobook is not changed
      3. It's for legacy IE6 support, not really something to worry about anymore.
      4. Perhaps you mean Common.css? We don't have any plans to disable anything, but Wikia.css is the primary CSS file for the Wikia skin, of course.
      5. It's something we can consider if users are requesting it!

      You said that you'd be redirecting Wikia.css to Special:CSS, but you also said that the new designer wouldn't be available for monobook, this means us users that use monobook wont be aboe to edit the Wikia skin in monobok, right?

        Loading editor
    • You will still be able to edit MediaWiki:Wikia.css while in Monobook, using the current (basic) editor.

        Loading editor
    • Oh ok.

        Loading editor
    • Will there finally be some possibility to create specialized CSS for mobiles? I developed a large template system that heavily tweaks the user experience through lots of CSS, but it can't go live because what the parser of useskin=wikiamobile make out of my code is plain awful... Links are dismantled and displayed partly on the screen, icons float around randomly, the hidden list item bullets reappear... I'd like to be able to make wikia use my classes for the mobile skin.

        Loading editor
    • LWChris wrote: Will there finally be some possibility to create specialized CSS for mobiles? I developed a large template system that heavily tweaks the user experience through lots of CSS, but it can't go live because what the parser of useskin=wikiamobile make out of my code is plain awful... Links are dismantled and displayed partly on the screen, icons float around randomly, the hidden list item bullets reappear... I'd like to be able to make wikia use my classes for the mobile skin.

      Fortunetely you can use Handheld.css from the RuneScape Wiki to do that, but i think it's very unlikely that a globabl stylesheet for that would be applied- at least in the near future- as it slows down loading for mobile devices, which is something that Wikia is trying to avoid.

        Loading editor
    • Correct. No custom CSS is available for the current mobile web as the fast loading times would suffer. The statistics show that 90% of mobile users will likely leave a site if it doesn't load within 2 seconds. It's not all bad news though. We're currently working on a mobile web refresh and we'll offer some light css via the Theme Designer. Stay tuned for that.

        Loading editor
    • Mira84 wrote:
      The statistics show that 90% of mobile users will likely leave a site if it doesn't load within 2 seconds.

      I think that 100% of any user group will leave a site if its content is displayed as messed up and broken as the mess that the current generator makes out of my templates.

        Loading editor
    • It looks likes to be able to really see what the changes would do on our wiki we will have to wait and see and then play clean up if needed.

        Loading editor
    • Looks great!

        Loading editor
    • Awesome!

        Loading editor
    • Mira84 wrote:

      while its great to hear error checking for CSS, will the same be considered for JS? it would help beginners a lot, especially if they are just starting out on a new wiki as a founder.

        Loading editor
    • JS is a lot more complicated and a lot less standardized, and would probably be a lot harder to error check.

        Loading editor
    • Very nice to see you're not actually using CSS Lint, which is pretty subjective.

        Loading editor
    • Dzylon
      Dzylon removed this reply because:
      *
      22:45, November 19, 2013
      This reply has been removed
    • Looks very good.

        Loading editor
    • Please forgive me if this is a noob question, but is there a way I can see what the default styles are so I know precisely what an element does before I mess with it in Wikia.css? Also, it's a bit tedious to have to go into "View Page Source" and scroll through all the code to learn what classes/IDs exist in the first place. I hope there's a better way that I don't know about yet because I'm just getting my toes wet with this stuff.

        Loading editor
    • You can use your browser's web console and inspector for that. Summon it with F12 on Chrome & Ctrl+Shift+K on Firefox.

        Loading editor
    • Yes, in Firefox you can right click > "Inspect Element" to instantly get web-dev info on it.

        Loading editor
    • TK-999 and Thisismyrofl, thanks! Now to learn to use this tool effectively....

        Loading editor
    • Neshomeh wrote:
      Please forgive me if this is a noob question, but is there a way I can see what the default styles are so I know precisely what an element does before I mess with it in Wikia.css? Also, it's a bit tedious to have to go into "View Page Source" and scroll through all the code to learn what classes/IDs exist in the first place. I hope there's a better way that I don't know about yet because I'm just getting my toes wet with this stuff.


      I use the Firefox add-on "Firebug", which is the blueprint of the Firefox console AFAIK (see the "Inspector" view compared to the add-on). Then I use the Stylish add-on to apply CSS for my own elements without modifying the actual CSS. If it all works correctly, I migrate my CSS to the global, actual MediaWiki.css page.

        Loading editor
    • I'm wondering, am I the only one to still see black characters for selectors and attributes on dark-theme based wiki? Staff or mentors who have access please check Special:CSS out.

        Loading editor
    • Cafeinlove wrote:
      I'm wondering, am I the only one to still see black characters for selectors and attributes on dark-theme based wiki? Staff or mentors who have access please check Special:CSS out.

      Do you have any CSS-editor browser extensions installed? Another user reported this and it turned out to be an extension causing a conflict. Special:CSS is set up to work with different color schemes, and I'm not seeing any black text on your Special:CSS page.

        Loading editor
    • You are right, I tried to turn every extension off and reactivated 1 per 1 to pick the buggy one out and figured out that Stylebot for chrome was causing trouble.

        Loading editor
    • I messed up my wiki css,what do I do to delete it

        Loading editor
    • This is a very old blog. you aren't likely t find an answer here, better to go to the forums

        Loading editor
    • Ok thanks!

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.