FANDOM


This page includes a way to customize the oasis top navigation bar. Unlike what Theme Designer offers, those techniques do not affect other elements in the page (such as notifications).
Please see Help:JavaScript and CSS Cheatsheet for more info about JavaScript and CSS pages.

Methods

CSS Only

This method uses CSS only. It loads instantly, but takes a while for modifying color values.

header#WikiHeader > nav li.marked {
	background-color: BACKGROUNDCOLOR !important;
}
header#WikiHeader .navbackground {
	background-color: BACKGROUNDCOLOR !important;
}
header#WikiHeader .navbackground > div {
	background-color: SHADOWCOLOR !important;
}
header#WikiHeader li.nav-item.marked > a {
	border-top: 1px solid SHADOWCOLOR !important;
}
header#WikiHeader nav.WikiNav > ul.nav > li.nav-item {
	border-bottom: 1px solid transparent !important;
}
header#WikiHeader #displayTimer {
	border: none !important;
}
header#WikiHeader li.subnav-2-item.marked2 > a {
	border-color: SHADOWCOLOR !important;
	border-width: 1px 1px 0px 1px !important;
}
header#WikiHeader ul.subnav-3.subnav {
	border-color: SHADOWCOLOR !important;
}
header#WikiHeader li.subnav-2-item.marked2 a:hover {
	background-color: HOVERCOLOR !important;
}

And replace:

Find what Replace with
SHADOWCOLOR Navigation background color
SHADOWCOLOR Shadow color
HOVERCOLOR Level-3 item background when hovered

You may also want to customize the bottom-right part of the background that makes the navigation to look as if it's attached to the right of each page:

header#WikiHeader .navbackground img.chevron {
	border-color: NEWCOLOR transparent transparent NEWCOLOR !important;
}

SASS

Passing a SASS code into a compiler (you can use this online convertor), and then using the output CSS.
In the top section, set color values for each variable instead of the capitalized word COLOR:

// variables

$background-color-var: COLOR; // background
$hover-color-var:      COLOR; // shadow
$hover-color-var:      COLOR; // hover

// the code

header#WikiHeader > nav li.marked {
	background-color: $background-color-var !important;
}
header#WikiHeader .navbackground {
	background-color: $background-color-var !important;
}
header#WikiHeader .navbackground > div {
	background-color: $hover-color-var !important;
}
header#WikiHeader li.nav-item.marked > a {
	border-top: 1px solid $hover-color-var !important;
}
header#WikiHeader nav.WikiNav > ul.nav > li.nav-item {
	border-bottom: 1px solid transparent !important;
}
header#WikiHeader #displayTimer {
	border: none !important;
}
header#WikiHeader li.subnav-2-item.marked2 > a {
	border-color: $hover-color-var !important;
	border-width: 1px 1px 0px 1px !important;
}
header#WikiHeader ul.subnav-3.subnav {
	border-color: $hover-color-var !important;
}
header#WikiHeader li.subnav-2-item.marked2 a:hover {
	background-color: $hover-color-var !important;
}

Javascript & CSS

This method is similar to the CSS method, but it uses JavaScript to load the CSS code. It is easier to modify, but the usage of JavaScript results a short delay from the time the page has loaded to the point where the styling is applied.
Replace the capitalized words PLACEHOLDER from lines 3-5 with color values or color names that you want to use for your wiki navigation.

/* custom wiki navigation bar colors */
// set colors
var wikiNavCustomBackground = "PLACEHOLDER", // background color
    wikiNavCustomShadow = "PLACEHOLDER",     // shadow color
    wikiNavCustomHover = "PLACEHOLDER";      // level-3 item background when hovered
 
// create stylesheet
mw.util.addCSS('\
    header#WikiHeader > nav li.marked {\
        background-color: ' + wikiNavCustomBackground + ' !important;\
    }\
    header#WikiHeader .navbackground {\
        background-color: ' + wikiNavCustomBackground + ' !important;\
    }\
    header#WikiHeader .navbackground > div {\
        background-color: ' + wikiNavCustomShadow + ' !important;\
    }\
    header#WikiHeader li.nav-item.marked > a {\
        border-top: 1px solid ' + wikiNavCustomShadow + ' !important;\
    }\
    header#WikiHeader nav.WikiNav > ul.nav > li.nav-item {\
        border-bottom: 1px solid transparent !important;\
    }\
    header#WikiHeader #displayTimer {\
        border: none !important;\
    }\
    header#WikiHeader li.subnav-2-item.marked2 > a {\
        border-color: ' + wikiNavCustomShadow + ' !important;\
        border-width: 1px 1px 0px 1px !important;\
    }\
    header#WikiHeader ul.subnav-3.subnav {\
        border-color: ' + wikiNavCustomShadow + ' !important;\
    }\
    header#WikiHeader li.subnav-2-item.marked2 a:hover {\
        background-color: ' + wikiNavCustomHover + ' !important;\
    }\
');

See also: Colors

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.