FANDOM


This script is for PERSONAL use only!

You are free to install this script for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:Common.js or MediaWiki:Wikia.js), as it would violate FANDOM's Terms of Use.
(See the customization policy)

Customize the style of your toolbar!

To do so, add this to your global.css:

Themes

Theme 1

.WikiaBarWrapper {
    background: #3264af !important;
    background: -moz-linear-gradient(top, #3264af 25%, #00327d 50%, #00194b 75%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#3264af), color-stop(50%,#00327d), color-stop(75%,#00194b)) !important;
    background: -webkit-linear-gradient(top, #3264af 25%,#00327d 50%,#00194b 75%) !important;
    background: -o-linear-gradient(top, #3264af 25%,#00327d 50%,#00194b 75%) !important;
    background: -ms-linear-gradient(top, #3264af 25%,#00327d 50%,#00194b 75%) !important;
    background: linear-gradient(to bottom, #3264af 25%,#00327d 50%,#00194b 75%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3264af', endColorstr='#00194b',GradientType=0 ) !important;
}
.WikiaBarWrapper .toolbar .tools > li > a {
	color: #0ff;
	font-weight: 700;
}

And then change the values to suit your taste. You may use hex or rgb values for the colors, whichever you're more comfortable with. You can remove the variants which your browser does not use, for example if you use Chrome, you only need -webkit-gradient, and in you use Firefox you only need -moz-linear-gradient.

Example

ToolbarStyle

Theme 2

Note: This theme disables the hiding of the bar. FontAwesome is also required.

/***** Wiki Bar *****/
.WikiaBarWrapper {
    background: white;
    border-top: 1px solid #bbb;
    box-shadow: none;
    height: 24px;
}
.WikiaBarWrapper .wikia-bar {
    background-image: none !important;
}
.WikiaBarWrapper .toolbar {
    padding: 0;
}
.wikia-bar .toolbar .tools li a {
    color: #333;
    text-decoration: none;
    cursor: default;
}
.WikiaFooter .toolbar .tools > li, .WikiaBarWrapper .toolbar .tools > li {
    transition-duration: .1s;
    border: none;
    padding: 4px 10px;
    margin: 0;
}
.wikia-bar .toolbar .tools > li:hover {
    background: #eee;
}
.wikia-bar .toolbar .tools > li:active {
    background: #ddd;
}
.wikia-bar .arrow, .WikiaBarCollapseWrapper,
.toolbar .tools li .arrow-icon-ctr {
    display: none !important;
}
/***** Change icons *****/
.toolbar .tools li img {
    display: none !important;
}
.tools-customize:before {
    content: "\f013";
    font-family: FontAwesome;
    margin-right: 0.75em;
}
.mytools.menu > a:before {
    content: "\f0c9";
    font-family: FontAwesome;
    margin-right: 0.75em;
}
/***** Tools menu *****/
.tools-menu {
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    background: white !important;
    transform: translateY(2px) !important;
    transition-duration: .1s;
}
.tools-menu li:not(:first-child) {
    border: none;
}
.tools-menu li > a, .tools-menu li span {
    font-size: 12px;
    padding: 5px 11px 5px 7px !important;
    transition-duration: .1s;
}
.tools-menu li > a:hover {
    background: #eee !important;
}
.tools-menu li > a:active {
    background: #ddd !important;
}

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.