FANDOM


  • Hi everyone,

    I've come to the conclusion that, in the grand scheme of things, a skin isn't important - content is always the priority. However, forget I said that because this is a fanon wiki, not the opposite thereof. Skins are the high-maintenance, presentation aspect of your wiki and, beforehand, this wiki was unequivocally the definition of 'Kim K butt surgery in wiki form'. Our skin was certainly controversial, since there's always going to be the one guy who loves it and won't let go, and there's always the guy who thinks otherwise and hates it, thus choosing to leave the wiki and contribute to Wattpad and whatnot. It's this very thing that started my train of thoughts to refresh this wiki's skin, to start anew - and so far, I'm content with the results. This skin is less in-your-face, eye-hurting and instead more subtle—the way a wiki for everyone should be. So, as of September 4th, 2016, the Fan Creations Wiki is now a dark theme, monochrome and sleek wikia, in stark contrast to its former tumultuous CSS-materialised attire.

    Changes

    If it wasn't obvious, I'll just make a changelog.

    • All CSS is refreshed
      • Does not include JS (JavaScript), which creates extra features, modules, etc. such as the Ratings Module
    • Temporary square background is added (will be changed)
    • New wordmark is added
    • Helvetica Neue font is added (only systems with this font downloaded get to see it, though, but I highly recommend it)
    • Background, buttons and main are all made dark grey
    • Modules, the TOC (Table Of Contents), templates and other messages are given a black background
    • Links are made yellow
      • Redlinks (links to pages which don't exist) are made a more subtle red
    • Infoboxes are made dark grey
    • The favicon (the formerly-blue 'G' at the top) has been greyscaled

    These are the major changes. There are other minor fixes and things also implemented, but these aren't so obvious and thus aren't included. For a full changelog, visit:

    Plans for the future

    • Addition of more fonts here and there
    • Adding some colour (we're just not going to go all-out this time)
    • Making the skin look nice on all devices
    • Fixing up the chatroom
    • Improving of the navbar (that big dark grey-ebony thing in the top right that says 'Main Exhibition'
    • Making this forum post the link for the notice in front of each page (the "Are you a long term contributor" one)
    • Making chat all dark theme, and making the Nightosphere Skin into a light skin

    Observations

    • Images with shadows look noticeably cleaner and sharper.
    • My eyes aren't on the verge of squinting whenever I look at the page.
    • The buttons (such as the "Edit this page" or "Discuss" buttons) have a much better :hover class than before, formerly being
        deeppink
      so it doesn't show particularly well.
    • The wiki feels warmer and more neutral, when in the past it felt almost cold due to the blue background and colours.

    Personal customisations

    ToU modifications screenshot

    I made a request to Wikia about customising their corporate spaces on the wiki globally, but it was declined (see screenshot). This means that the only solution to making the Wikia corporate spaces (the Global Navigation and Fandom footer) is to make the users that want it to look more aesthetically pleasing input it for themselves. This code will make the global navigation stay eternally black-with-transparency and add some transparency to the Fandom footer.

    Here's a preview:

    ToU customisations screenshot

    Code

    Click this for the code. It's been compressed into this little box so it's more user-friendly and comfortable for those who don't want to use it. It has been tested multiple times and has worked on all occasions.

    /* Making Fandom footer slightly transparent
    @CREDIT: User:Dragonleaf5678
    @USAGE: Personal (/common.css) usage only, violates ToU if globally */
    .wds-global-footer {
        background-color: rgba(57, 68, 77, 0.84) !important;
    }
     
    /* Global Navigation eternally dark
    @CREDIT: User:Dragonleaf5678
    @USAGE: Personal (/common.css) usage only, violates ToU if globally */
    .global-navigation {
        background-color: rgba(0,0,0,0.65) !important;
        box-shadow: 0 0 0 2px transparent !important;
        color: #fff;
    }
    .global-navigation .cell-link {
        color: #fff !important;
    }
    .global-navigation .wikia-logo__subtitle {
        color: #ddd;
    }
    .global-navigation .explore-wikia-entry-point .chevron {
        border-top-color: #fff;
    }
    .wikia-logo img {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyMTcuOCA2MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjE3LjggNjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTAwLjYsNTguOFYwaDEzLjJ2MzNsMy41LTQuNGw3LjQtOC44aDE4LjlMMTI4LDM1LjJsMTYuNSwyMy43aC0xNy4ybC05LTE0LjlsLTQuNiw0LjN2MTAuNUgxMDAuNnogTTUxLjgsMjAuMWwtNSwyNi40bC02LjQtMjYuNGgtNmgtMC4zaC0yLjdoLTAuM2gtNmwtNi40LDI2LjRsLTUtMjYuNEgwbDEwLjEsMzguOGgxNy43bDUtMjAuNGw1LDIwLjRoMTcuN2wxMC4xLTM4LjhINTEuOHogTTIxNy4xLDQ3LjVsMC43LDExLjNoLTEyLjFsLTAuOS00LjJjLTIuOCwyLjktNi4yLDUuNC0xMi4zLDUuNGMtMTEsMC0xNy03LjEtMTctMjAuNmMwLTEzLjUsNi0yMC42LDE3LTIwLjZjNi4xLDAsOS41LDIuNCwxMi4zLDUuNGwwLjktNC4yaDEyLjFsLTAuNywxMS4zVjQ3LjV6IE0yMDMuOSwzNC40Yy0xLjctMi4yLTQuMy0zLjctNy44LTMuN2MtNCwwLTcuMSwyLjYtNy4xLDguN2MwLDYuMSwzLjIsOC43LDcuMSw4LjdjMy41LDAsNi4xLTEuNSw3LjgtMy43VjM0LjR6TTc5LjgsMC4yYy00LjIsMC03LjYsMy40LTcuNiw3LjZjMCw0LjIsMy40LDcuNiw3LjYsNy42YzQuMiwwLDcuNi0zLjQsNy42LTcuNkM4Ny40LDMuNiw4NCwwLjIsNzkuOCwwLjIgTTkxLjIsMjcuOHYtOC4zaC01LjdINzIuMnYxMy40djEyLjV2MTMuMXYwLjNoMTl2LTguMmgtNS45VjI3LjhIOTEuMnogTTE1My43LDcuOGMwLDQuMiwzLjQsNy42LDcuNiw3LjZjNC4yLDAsNy42LTMuNCw3LjYtNy42YzAtNC4yLTMuNC03LjYtNy42LTcuNkMxNTcuMSwwLjIsMTUzLjcsMy42LDE1My43LDcuOCBNMTU1LjgsMjcuOHYyMi44aC01Ljl2OC4yaDE5di0wLjNWNDUuNFYzMi45VjE5LjVoLTEzLjJoLTUuN3Y4LjNIMTU1Ljh6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=");
    }
    .AccountNavigation .avatar {
        border: 1px solid #fff !important;
    }
    .AccountNavigation .account-navigation-item .links-container .chevron {
        border-top-color: #fff;
    }
    .notifications-container .notifications-entry-point {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9Ii00NjkgMjcxIDIwIDIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IC00NjkgMjcxIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDEuMDAwMDAwKSIgPjxwYXRoIHN0eWxlPSJmaWxsOiNGRkY7IiBkPSJNLTQ1MywyODUuNmgtMTZjMC0wLjMsMC4xLTAuNiwwLjEtMC44DQpjMC4yLTAuOSwwLjgtMS43LDEuNS0yLjNjMC45LTAuNywxLjQtMS43LDEuNi0yLjhjMC4yLTAuOSwwLjItMS45LDAuMi0yLjhjMC0xLDAuMi0xLjksMC44LTIuN2MwLjYtMC45LDEuNS0xLjUsMi41LTEuOA0KYzAuMSwwLDAuMSwwLDAuMS0wLjFjLTAuMS0wLjcsMC41LTEuMywxLjItMS4zYzAuNiwwLDEuMSwwLjYsMSwxLjJjMC4zLDAuMSwwLjcsMC4yLDEsMC40YzEuNSwwLjgsMi4zLDIuMSwyLjQsMy44DQpjMCwwLjgsMCwxLjYsMC4xLDIuNGMwLjEsMS4xLDAuNCwyLjIsMS4xLDMuMWMwLjIsMC4zLDAuNSwwLjUsMC43LDAuN2MwLjgsMC43LDEuNCwxLjcsMS41LDIuOEMtNDUzLDI4NS40LTQ1MywyODUuNS00NTMsMjg1LjYiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRkY7IiBkPSJNLTQ1OC43LDI4Ni43YzAsMC44LTAuMywxLjQtMSwxLjggYy0wLjgsMC41LTEuNiwwLjYtMi40LDAuMWMtMC43LTAuNC0xLjEtMS4xLTEuMS0xLjlILTQ1OC43eiIvPjwvZz48L3N2Zz4NCg==");
    }
    .notifications-container .notifications-entry-point:after {
        border-top-color: #fff;
    }
    .global-navigation .start-wikia-container .start-wikia {
        border: solid 1px #fff;
        color: #fff;
    }
    .global-navigation .start-wikia-container .start-wikia:hover {
        background-color: #656E78;
    }
    .notifications-container .notifications-entry-point:hover {
        background-color: #656E78;
    }
    .account-navigation-container.table-cell:hover {
        background-color: #656E78 !important;
    }
    .AccountNavigation.active {
        background-color: #656E78 !important;
    }
    .global-navigation .cell-link:hover {
        color: #656e78 !important;
        background-color: #ddd;
    }
    .global-navigation .explore-wikia-dropdown a {
        color: #656e78 !important;
    }
    .AccountNavigation .user-menu > li > a:hover {
        background-color: #811129;
        color: #fff;
    }
    .AccountNavigation .user-menu > li > a {
        background-color: #333;
        border-top: 1px solid #6D6D6D !important;
        color: #FEC356;
    }
    .AccountNavigation .user-menu {
        border: 1px solid #6D6D6D;
    }
    .AccountNavigation .user-menu > li:first-child a {
        border-top: 0 !important;
    }
    #GlobalNavigationWallNotifications {
        background-color: #222;
        border: 1px solid #6D6D6D;
    }
    #GlobalNavigationWallNotifications .notification.empty {
        background-color: #333;
        color: #FEC356;
    }
    .global-navigation .explore-wikia-dropdown a {
        color: #FEC356 !important;
    }
    .global-navigation .explore-wikia-dropdown {
        border: 1px solid #6D6D6D;
    }
    .global-navigation .explore-wikia-dropdown a:hover {
        background-color: #222;
        text-decoration: none;
        color: #FEC356 !important;
    }
    .global-navigation .explore-wikia-dropdown a {
        color: #FEC356 !important;
        background: #333;
    }
    .global-navigation .explore-wikia-dropdown a:not(first-child) {
        border-top: 1px solid #6D6D6D;
    }
    .global-navigation .cell-link:hover {
        color: #fff !important;
        background-color: #656E78;
    }
    .global-navigation.inverse .cell-link.top-level:hover {
        color: #fff;
        background-color: #656E78 !important;
    }
    Suggestions? Feedback? Concerns? Please leave anything relevant below. Thanks, enjoy the skin! --Dragonleaf t · c 21:59, September 4, 2016 (UTC)
      Loading editor
    • Good lord, you’re a real dyed-in-the-wool system operator. I thought you were just a random artist on my Wiki, but you’re on a whole new level. I’m still struggling with my first dark theme lol.

        Loading editor
    • A FANDOM user
        Loading editor
Like this post
You've given this message Kudos!
See who gave Kudos to this message

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.