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)

CustomGlobalNav (also known as BlackGlobalNavigation 2.0) lets you customize global navigation's colors and size. It was created as a replacement to the original BGN, and as a way to unify all of the global navigation modification scripts. You can change the navbar color to black and white, have different bars for dark and light wikis or have different bars for the wiki of your choice.

Installation

Import the CustomGlobalNavigation.css stylesheet. Add the following line at the top of your global.css or on a local wikia.css.

@import "/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:CustomGlobalNavigation.css";

Or combine the import with another one. You can also import FDSVars.css. It might be useful for theming (this step is optional).

Configuration

Without any configuration the global navigation will look almost exactly like before (there are only some small changes in the dropdowns). You can customize the bar by changing the CSS variables contained in .wds-global-navigation-wrapper. Currently supported variables are:

Colors

Variable Description Default value
--cgn-background Background of the navigation (can be a gradient or an image) FDS Navy
--cgn-color-text Fandom logo, hover font color FDS Light Gray
--cgn-color-text-secondary Search input placeholder FDS Middle Gray
--cgn-color-accent Fandom heart, links FDS Aqua
--cgn-color-chevron Chevrons FDS Coral
--cgn-color-dropdown-background Dropdown background FDS Light Gray
--cgn-color-dropdown-text Dropdown font color FDS Black
--cgn-color-dropdown-text-secondary Minor elements in dropdowns FDS Dark Gray
--cgn-color-dropdown-text-accent Links in dropdowns FDS Link
--cgn-avatar-blend-mode Avatar blending Normal
--cgn-left-content-links-blend-mode Left content blending Normal
--cgn-notification-icon_blend-mode Notification icon blending Normal
--cgn-search-blend-mode Search box blending Normal
--cgn-start-wiki-blend-mode Wiki creation button mix mode Normal

Layout

Variable Description Default value Allowed values
--cgn-height Height of the navbar 55px Any CSS height value (however values below 40px are discouraged)
--cgn-position Navbar's behaviour fixed fixed (visible at all times), absolute (hides on scroll)
--cgn-logo-height Height of the Fandom logo 27px Any CSS height value
--cgn-link-font-size Font size of the links 18px Any CSS font size value
--cgn-start-a-wiki-display Visibility of the main START A WIKI button flex flex (visible), none (hidden)
--cgn-start-a-wiki-secondary-display Visibility of the secondary START A WIKI button (the one hidden inside WIKI) list-item list-item (visible), none (hidden)
--cgn-notification-bold-font-weight Font weight of bold fragments inside notifications dropdown bold bold, normal
--cgn-notification-icon-display Visibility of the notification icons flex flex (visible), none (hidden)

Other (filters etc.)

Variable Description Default value
--cgn-avatar-filter Avatar filter effects none

To change your config copy and edit necessary variables inside a .wds-global-navigation-wrapper. For example if you wanted to make the chevrons white you would copy the following CSS:

.wds-global-navigation-wrapper {
  --cgn-color-chevron: white;
}

Default config

.wds-global-navigation-wrapper {
  --cgn-color-background: #002a32;
  --cgn-color-text: #f2f5f5;
  --cgn-color-text-secondary: #bed1cf;
  --cgn-color-accent: #00d6d6;
  --cgn-color-chevron: #ff6a64;
 
  --cgn-color-dropdown-background: #f2f5f5;
  --cgn-color-dropdown-text: #1a1a1a;
  --cgn-color-dropdown-text-secondary: #5f7a7b;
  --cgn-color-dropdown-accent: #00acac;
 
  --cgn-height: 55px;
  --cgn-position: fixed; /* or absolute */
 
  --cgn-logo-height: 27px;
  --cgn-link-font-size: 18px;
 
  --cgn-start-a-wiki-display: flex; /* or none */
  --cgn-start-a-wiki-secondary-display: list-item; /* or none */
 
  --cgn-notification-bold-font-weight: bold; /* or normal */
  --cgn-notification-icon-display: flex; /* or none */
 
  --cgn-avatar-blend-mode: normal;
  --cgn-avatar-filter: none;
  --cgn-left-content-links-blend-mode: normal;
  --cgn-notification-icon_blend-mode: normal;
  --cgn-search-blend-mode: normal;
  --cgn-start-wiki-blend-mode: normal;
}
You don't need to copy the variable with default value if you don't want to change it.

Different config for dark themed wikis

Hold your variables in different selectors:

  • .wds-global-navigation-wrapper – all wikis
  • body.oasis-dark-theme .wds-global-navigation-wrapper – dark themed wikis
  • body:not(.oasis-dark-theme) .wds-global-navigation-wrapper – light themed wikis

Different config for a wiki

Define the variables in a local wikia.css. If you want to use the same config for a couple of wikis use the following code globally:

.wiki-dev .wds-global-navigation-wrapper,
.wiki-witcher .wds-global-navigation-wrapper {
  /* Those variables will work on dev.wikia.com and witcher.wikia.com */
}

Using Fandom Design System

The default navigation bar heavily relies on the Fandom Design System. You can also use FDS colors in your config. CustomGlobalNavigation includes Fandom 2.0 colors by default (use them by setting a value to var(--cgn-wds-color-COLORNAME), for example var(--cgn-wds-color-aqua)) but you can use every FDS color if you included the FDSVars.css stylesheet in this step (use them by setting a value to var(--wds-COLORNAME), for example var(--wds-color-dark-c1)).

Themes

Default

  • FDS Navy#002a32for background$cgn-color-background
  • FDS Aqua#00d6d6for links$cgn-color-accent
  • FDS Light Gray#f2f5f5for hover$cgn-color-text
  • FDS Coral#ff6a64for chevrons$cgn-color-chevron
  • FDS Light Gray#f2f5f5for dropdown$cgn-color-dropdown-background


A theme almost identical to the existing global navigation. It is already turned on when you import the stylesheet and doesn't require any config.

BlackGlobalNavigation

  • BGN Black#111for background$cgn-color-background
  • BGN Blue#0074D9for links$cgn-color-accent
  • BGN White#eeefor hover$cgn-color-text
  • BGN Light Gray#e5e5e5for chevrons$cgn-color-chevron
  • BGN Dark Gray#1e1e1efor dropdown$cgn-color-dropdown-background


Copy the following CSS to your global.css or a local wikia.css.

/* Make sure CustomGlobalNavigation.css is imported above */
.wds-global-navigation-wrapper {
  --cgn-color-background: #111;
  --cgn-color-text: #eee;
  --cgn-color-text-secondary: #777;
  --cgn-color-accent: #0074D9;
  --cgn-color-chevron: #eee;
  --cgn-color-dropdown-background: #1e1e1e;
  --cgn-color-dropdown-text: #eee;
  --cgn-color-dropdown-text-secondary: #777;
  --cgn-color-dropdown-accent: #0074D9;
  --cgn-height: 45px;
  --cgn-avatar-blend-mode: normal;
  --cgn-avatar-filter: none;
  --cgn-left-content-links-blend-mode: normal;
  --cgn-notification-icon_blend-mode: normal;
  --cgn-search-blend-mode: normal;
  --cgn-start-wiki-blend-mode: normal;
  --cgn-start-a-wiki-display: none;
}

Mint Compact

  • FDS Black#1a1a1afor background$cgn-color-background
  • FDS Mint#5df2aefor links$cgn-color-accent
  • FDS Light Gray#f2f5f5for hover$cgn-color-text
  • FDS Aqua#00d6d6for chevrons$cgn-color-chevron
  • FDS Dark Gray 15%#262626for dropdown$cgn-color-dropdown-background


Copy the following CSS to your global.css or a local wikia.css.

/* Make sure CustomGlobalNavigation.css AND FDSVars.css are imported above */
.wds-global-navigation-wrapper {
  --cgn-height: 45px;
  --cgn-start-a-wiki-display: none;
  --cgn-start-a-wiki-secondary-display: none;
  --cgn-notification-bold-font-weight: normal;
  --cgn-logo-height: 25px;
  --cgn-color-background: var(--wds-fandom-color-black);
  --cgn-color-text: var(--wds-fandom-color-light-gray);
  --cgn-color-text-secondary: var(--wds-fandom-color-mid-light-gray);
  --cgn-color-accent: var(--wds-fandom-color-mint);
  --cgn-color-chevron: var(--wds-fandom-color-aqua);
  --cgn-color-dropdown-accent: var(--wds-fandom-color-mint);
  --cgn-color-dropdown-background: var(--wds-color-dark-c1);
  --cgn-color-dropdown-text: var(--wds-fandom-color-light-gray);
  --cgn-color-dropdown-text-secondary: var(--wds-fandom-color-dark-gray);
}

Adaptive

This theme changes the navbar to mirror the style of community header. Note that it requires JavaScript and unless you visit a lot of communities it will be better to use a self-made config.

CGN Adaptive

Copy the following JS to your global.js.

$(function() {
  var cgn_color = window.getComputedStyle(document.querySelector('.wds-community-header__sitename a'), null).getPropertyValue('color');
  var cgn_background = window.getComputedStyle(document.querySelector('.wds-community-header'), null).getPropertyValue('background-color');
  var cgn_wrapper = document.querySelector('.wds-global-navigation-wrapper').style;
  cgn_wrapper.setProperty('--cgn-color-background', cgn_background);
  cgn_wrapper.setProperty('--cgn-color-text', cgn_color);
  cgn_wrapper.setProperty('--cgn-color-text-secondary', cgn_color);
  cgn_wrapper.setProperty('--cgn-color-accent', cgn_color);
  cgn_wrapper.setProperty('--cgn-color-chevron', cgn_color);
});

Additional information

Migrating from BlackGlobalNavigation

If you've used BlackGlobalNavigation before you are highly encouraged to switch over to CGN with the BGN Theme. The standalone BGN stylesheet won't be supported in the future and might break. Firstly replace the BlackGlobalNavigation.css import with an import to CustomGlobalNavigation.css. Then add the CSS from this section below your import. You are now using CGN!

Contributing

  • You can fix any bugs inside the stylesheet.
  • You can add any new features as long as:
    1. they are stable.
    2. new variables don't conflict with existing ones.
    3. the variable is backwards compatible and doesn't change anything for existing users.

Supported scripts

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+