User:K6ka/Fixing the new Wikia navbar

From K6ka's Wiki
Jump to navigation Jump to search

Wikia's new navbar is not exactly a piece of art. Despite multiple complaints Wikia has gone ahead and just decided to roll it out. The navbar no longer conforms to local wiki colors (so it's white on all wikis), and it is massive, huge, and distracting. On top of that, it follows you as you scroll, so you can never escape it. It almost feels like Wikia is no longer trying to be a wiki farm. Just "Look at our shiny logo" is what I see.

Well, as an editor on Wikia that both read and write pages on Wikia, this is unacceptable. I come here because wiki editing is a hobby of mine, not staring at some oversized company logo. While I haven't found any code that reverts to ye olde goodness, here's some modifications you can do (for yourself only!) to make the navbar a bit more bearable.

Copy the following code...

/**
 * "Fix" the new and "improved" global navigation Wikia has forced upon us
 *
 * See https://gist.github.com/sactage/21b17a54ce6359d2bdee for the most recent version of this script
 *
 * Changes so far:
 *   Sets background colour of global nav to that of the headers (set via Special:ThemeDesigner)
 *   Removes some some of the borders used as visual separation in the global nav, since they look like crap
 *   Changes the colour of the chevrons on the global nav (for dropdowns) to white/black depending on new bg colour
 *   Changes colour of Wikia logo to white for darker themes
 *   Stops bar from having the obnoxious appearance of taking up the full width of the page -- Thanks to Gaz Lloyd and Tyilo from RSW
 *   Stops bar from moving with you as you scroll down the page -- Thanks to Gaz Lloyd and Tyilo from RSW
 * 
 * @TODO Maybe add options - e.g. allow choosing if nav scrolls with you or not
 * @TODO Change colour of user menu dropdown
 * @TODO Improve notifications bubble look
 * @TODO Send a literal letter to Wikia's product team, telling them this is utter crap
 *
 * @author sactage <sactage@gmail.com>
 * (c) 2014 sactage
 *
 */
(function fixGlobalNav() {
    var bgColor = mw.config.get('wgSassParams')['color-header'],
        borderElements = document.querySelectorAll('.global-navigation .page-width, .global-navigation-item'),
        globalNav = document.querySelectorAll('.global-navigation-item'),
        bgParse = bgColor.match(/#([0-9a-f]){2}([0-9a-f]){2}([0-9a-f]){2}/).splice(1),
        gt127 = 0,
        arrowColor,
        arwStyle = document.createElement('style'),
        logo = document.querySelector('.global-navigation-link.wikia-logo img');

    // change chevron colour based on the background colour we're going to use for the nav
    for (var i = 0; i < 3; i++)
        parseInt(bgParse[i], 16) > 127 && gt127++;
    if (gt127 < 2) {
        arrowColor = 'white';
        logo.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmVyc2lvbj0iMS4xIiAgIHg9IjBweCIgICB5PSIwcHgiICAgdmlld0JveD0iMCAwIDIxNy44IDYwIiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIxNy44IDYwIiAgIHhtbDpzcGFjZT0icHJlc2VydmUiICAgaWQ9InN2ZzI5OTUiICAgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC41IHIxMDA0MCIgICB3aWR0aD0iMTAwJSIgICBoZWlnaHQ9IjEwMCUiICAgc29kaXBvZGk6ZG9jbmFtZT0id2lraWEuc3ZnIj48bWV0YWRhdGEgICBpZD0ibWV0YWRhdGEzMDAzIj48cmRmOlJERj48Y2M6V29yayAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcyAgIGlkPSJkZWZzMzAwMSIgLz48c29kaXBvZGk6bmFtZWR2aWV3ICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgIGJvcmRlcm9wYWNpdHk9IjEiICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIgICBncmlkdG9sZXJhbmNlPSIxMCIgICBndWlkZXRvbGVyYW5jZT0iMTAiICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MjAiICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTA1NyIgICBpZD0ibmFtZWR2aWV3Mjk5OSIgICBzaG93Z3JpZD0iZmFsc2UiICAgaW5rc2NhcGU6em9vbT0iMTEuMzEzNzA5IiAgIGlua3NjYXBlOmN4PSIzMS4yNDk2NjQiICAgaW5rc2NhcGU6Y3k9IjYuMjQwMDQ1NyIgICBpbmtzY2FwZTp3aW5kb3cteD0iLTgiICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IiAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMjk5NSIgLz48cGF0aCAgIGQ9Ik0xMDAuNiw1OC44VjBoMTMuMnYzM2wzLjUtNC40bDcuNC04LjhoMTguOUwxMjgsMzUuMmwxNi41LDIzLjdoLTE3LjJsLTktMTQuOWwtNC42LDQuM3YxMC41SDEwMC42eiBNNTEuOCwyMC4xbC01LDI2LjRsLTYuNC0yNi40aC02aC0wLjNoLTIuN2gtMC4zaC02bC02LjQsMjYuNGwtNS0yNi40SDBsMTAuMSwzOC44aDE3LjdsNS0yMC40bDUsMjAuNGgxNy43bDEwLjEtMzguOEg1MS44eiBNMjE3LjEsNDcuNWwwLjcsMTEuM2gtMTIuMWwtMC45LTQuMmMtMi44LDIuOS02LjIsNS40LTEyLjMsNS40Yy0xMSwwLTE3LTcuMS0xNy0yMC42YzAtMTMuNSw2LTIwLjYsMTctMjAuNmM2LjEsMCw5LjUsMi40LDEyLjMsNS40bDAuOS00LjJoMTIuMWwtMC43LDExLjNWNDcuNXogTTIwMy45LDM0LjRjLTEuNy0yLjItNC4zLTMuNy03LjgtMy43Yy00LDAtNy4xLDIuNi03LjEsOC43YzAsNi4xLDMuMiw4LjcsNy4xLDguN2MzLjUsMCw2LjEtMS41LDcuOC0zLjdWMzQuNHpNNzkuOCwwLjJjLTQuMiwwLTcuNiwzLjQtNy42LDcuNmMwLDQuMiwzLjQsNy42LDcuNiw3LjZjNC4yLDAsNy42LTMuNCw3LjYtNy42Qzg3LjQsMy42LDg0LDAuMiw3OS44LDAuMiBNOTEuMiwyNy44di04LjNoLTUuN0g3Mi4ydjEzLjR2MTIuNXYxMy4xdjAuM2gxOXYtOC4yaC01LjlWMjcuOEg5MS4yeiBNMTUzLjcsNy44YzAsNC4yLDMuNCw3LjYsNy42LDcuNmM0LjIsMCw3LjYtMy40LDcuNi03LjZjMC00LjItMy40LTcuNi03LjYtNy42QzE1Ny4xLDAuMiwxNTMuNywzLjYsMTUzLjcsNy44IE0xNTUuOCwyNy44djIyLjhoLTUuOXY4LjJoMTl2LTAuM1Y0NS40VjMyLjlWMTkuNWgtMTMuMmgtNS43djguM0gxNTUuOHoiICAgZmlsbD0iIzA5MjE0MCIgICBpZD0icGF0aDI5OTciICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=';
    } else {
        arrowColor = 'black';
    }
    // it's impossible to use the Selectors API with psuedo-elements (wtf mozilla) - this is the next best thing
    arwStyle.innerHTML = '.hubs-entry-point:after, #searchFormChevron, .AccountNavigation > li > a:after { border: 5px solid transparent; border-top-color: ' + arrowColor + '; }';
    arwStyle.innerHTML += '\n.global-navigation { position:absolute !important; border-bottom:initial !important; background:initial !important; }\n#WikiaPage { position: relative; top: -2px; }';
    (gt127 < 2) && (arwStyle.innerHTML += '\n.search-label-bold { color: ' + arrowColor + ' !important; }');
    document.head.appendChild(arwStyle);

    // kill borders because they look kinda horrible
    for (var i = 0; i < borderElements.length; i++) {
        borderElements[i].style.border = 'none'; }

    // change nav bg
    for (var i = 0; i < globalNav.length; i++)
        globalNav[i].style.backgroundColor = bgColor;

})();

...into one of these...

Script file Located at Affected wikias Affected users Affected skins
Special:MyPage/wikia.js this wiki this wiki you only Wikia (default)
Special:MyPage/common.js this wiki this wiki you only all
w:Special:MyPage/global.js}} community[1] all wikis you only all

Once you're done, clear your browser cache.

This will turn the navbar from a harsh, glaring white to a color that matches the local wiki's theme. The navbar will no longer follow you when you scroll and is much smaller and more civil.

You cannot add this code into MediaWiki namespace pages (loads for all users) as that would violate Wikia's Terms of Use. You can, however, add any sort of JS or CSS code into your own personal JS/CSS files. These will load for you only.

The code was written by Sactage and the original file is here.

Old code[edit]

This is the old code I previously recommended. I recommend you use the one above instead of this one, as the one on top is better.

/** Global navigation bar funsies **/
.global-navigation {
    position: relative !important;
}
 
.search-select-overlay {
    color:#C8D2D7;
}
 
.global-navigation { 
    background-color: #002D55;
    background-image: -moz-linear-gradient(left center , #000B15 0px, #002D55 50%, #000B15 100%);
}
 
.global-navigation {
    border: none;
}
 
.global-navigation * {
    border: none;
}
 
.global-navigation .page-width {
    border: none;
}
 
.global-navigation img.avatar {
    border-radius: 0 !important;
}
 
.search-form-wrapper .table-cell {
    color:00b7e0;
}
 
.AccountNavigation > li .avatar-container {
    border-radius:0%;
}
 
.wikia-logo img {
    background-image: url(http://i.imgur.com/keGMFzh.png);
}

...into one of these...

Stylesheet Located at Affected wikis Affected users Affected skins
Special:MyPage/wikia.css this wiki this wiki you only Wikia (default)
Special:MyPage/common.css this wiki this wiki you only all
w:Special:MyPage/global.css}} community[1] all wikis you only all

Once you're done, clear your browser cache.

This will turn the navbar from a distracting, glaring white to a much more comfortable-on-the-eyes blue. The navbar will also stop following you when you scroll, so you can now "run away" from it.

You cannot add this code into MediaWiki namespace pages (loads for all users) as that would violate Wikia's Terms of Use. You can, however, add any sort of JS or CSS code into your own personal JS/CSS files. These will load for you only.

The code was originally written by Jr Mime and was slightly revised by me.

Notes[edit]

  1. 1.0 1.1 This file is located at {{#NewWindowLink:http://community.wikia.com%7CCommunity Central}}. That is the only wiki where it will become magic and affect all other wikis. Creating a file with the same name at any other wiki will have no effect.