FANDOM


Цей скрипт тільки для ОСОБИСТОГО використання!

Ви можете встановити цей скрипт для себе, але його заборонено використовувати на всій вікі (тобто, в MediaWiki:Common.js або MediaWiki:Wikia.js), оскільки це порушуватиме Умови Використання ФЕНДОМу.
(Див. Політика налаштувань)

CustomGlobalNav (також відомий як BlackGlobalNavigation 2.0) дозволяє налаштовувати кольори та розмір глобальної навігації. Він був створений як заміна оригінального BGN, а також спосіб об'єднати всі глобальні скрипти та стилі для зміни навігації. Ви можете змінити колір навігаційної панелі на чорно-білий, підключати різнокольорові смужки для темних і світлих вікі або мати різнокольорові смужки для вікі за вашим вибором.

Встановлення

Імпортуйте таблицю стилів CustomGlobalNavigation.css. Додайте наступний рядок у верхню частину вашого global.css або в wikia.css на вікі.

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

Або поєднайте імпорт з іншим. Ви також можете імпортувати FDSVars.css. Це може бути корисним для їхнього тестування (цей крок необов'язковий).

Конфігурація

Без будь-якої конфігурації глобальна навігація виглядатиме майже точно так, як раніше (у випадаючих списках будуть лише невеликі зміни). Ви можете налаштувати панель, змінюючи змінні CSS, що містяться в .wds-global-navigation-wrapper. Змінні, які підтримуються зараз:

Кольори

Змінна Опис Значення за замовчуванням
--cgn-color-background Фон навігації FDS Navy
--cgn-color-text Логотип Фендому, колір шрифту при наведенні FDS Light Gray
--cgn-color-text-secondary Пошуковий рядок FDS Middle Gray
--cgn-color-accent Серденько Фендому, посилання FDS Aqua
--cgn-color-chevron Стрілки FDS Coral
--cgn-color-dropdown-background Фон спадного меню FDS Light Gray
--cgn-color-dropdown-text Колір шрифту спадного меню FDS Black
--cgn-color-dropdown-text-secondary Невеликі елементи у спадних меню FDS Dark Gray
--cgn-color-dropdown-text-accent Посилання у спадних меню FDS Link
--cgn-avatar-blend-mode Змішування аватара Normal
--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-height Висота навігаційної панелі 55px Будь-яке значення висоти CSS (однак значення нижче 40px не рекомендується)
--cgn-position Поведінка навігаційної панелі fixed fixed (завжди видимо), absolute (ховається при прокрутці)
--cgn-logo-height Висота логотипа Фендому 27px Будь-яке значення висоти CSS
--cgn-link-font-size Розмір шрифту посилань 18px Будь-яке значення висоти CSS
--cgn-start-a-wiki-display Видимість головної кнопки START A WIKI flex flex (видима), none (прихована)
--cgn-start-a-wiki-secondary-display Видимість вторинної кнопки START A WIKI (яка прихована всередині меню WIKI) list-item list-item (видима), none (прихована)
--cgn-notification-bold-font-weight Жирність фрагментів шрифтів у спадному меню сповіщень bold bold, normal
--cgn-notification-icon-display Видимість значків сповіщень flex flex (видимі), none (приховані)

Інше (фільтри тощо)

Змінна Опис Значення за замовчуванням
--cgn-avatar-filter Фільтри ефектів аватара none

Щоб змінити налаштування, скопіюйте та змініть необхідні змінні всередині .wds-global-navigation-wrapper. Наприклад, якщо ви хочете зробити стрілочки білими, скопіюєте оцей CSS:

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

Стандартна конфігурація

.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; /* або absolute */
 
  --cgn-logo-height: 27px;
  --cgn-link-font-size: 18px;
 
  --cgn-start-a-wiki-display: flex; /* або none */
  --cgn-start-a-wiki-secondary-display: list-item; /* або none */
 
  --cgn-notification-bold-font-weight: bold; /* або normal */
  --cgn-notification-icon-display: flex; /* або 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;
}
Вам не потрібно скопіювати змінну й селектор за замовчуванням, якщо ви не бажаєте її змінювати.

Налаштування для темних та світлих вікі

Тримайте змінні в різних селекторах:

  • .wds-global-navigation-wrapper – всі вікі
  • body.oasis-dark-theme .wds-global-navigation-wrapper – темні вікі
  • body:not(.oasis-dark-theme) .wds-global-navigation-wrapper – світлі вікі

Налаштування для різних вікі

Визначте змінні в локальному wikia.css. Якщо ви хочете використовувати одне й те саме налаштування для декількох вікі, скористайтеся наступним кодом у global.css:

.wiki-dev .wds-global-navigation-wrapper,
.wiki-witcher .wds-global-navigation-wrapper {
  /* Ці змінні працюватимуть на dev.wikia.com і witcher.wikia.com */
}

Використання Fandom Design System

Панель навігації за замовчуванням сильно залежить від Fandom Design System. Ви також можете використовувати кольори FDS у своїх налаштуваннях. CustomGlobalNavigation включає в себе кольори Fandom 2.0 (за умовчанням використовуйте їх, встановивши значення var(--cgn-wds-color-COLORNAME), наприклад, var(--cgn-wds-color-aqua)), але ви можете використовувати кожен колір FDS якщо ви включили таблицю стилів FDSVars.css на цьому кроці (використовуйте їх, встановивши значення var(--wds-COLORNAME), наприклад, var(--wds-color-dark-c1)).

Теми

За замовчуванням

  • FDS Navy#002a32для фону$cgn-color-background
  • FDS Aqua#00d6d6для посилань$cgn-color-accent
  • FDS Light Gray#f2f5f5для посилань при наведенні$cgn-color-text
  • FDS Coral#ff6a64для стрілочок$cgn-color-chevron
  • FDS Light Gray#f2f5f5для фону спадних меню$cgn-color-dropdown-background


Тема майже ідентична існуючій глобальній навігації. Вона вже включена, коли ви імпортуєте таблицю стилів і не вказуєте жодних налаштувань.

BlackGlobalNavigation

  • BGN Black#111для фону$cgn-color-background
  • BGN Blue#0074D9для посилань$cgn-color-accent
  • BGN White#eeeдля посилань при наведенні$cgn-color-text
  • BGN Light Gray#e5e5e5для стрілочок$cgn-color-chevron
  • BGN Dark Gray#1e1e1eдля фону спадних меню$cgn-color-dropdown-background


Скопіюйте наступний CSS у свій global.css або локальний wikia.css.

/* Переконайтеся, що CustomGlobalNavigation.css імпортовано вище */
.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-start-a-wiki-display: none;
}

Адаптивна версів

Ця тема змінює колір навігаційної панелі, який використовує стиль заголовка вікі. Зауважте, що для цього потрібен JavaScript, і якщо ви не відвідуєте багато вікі-спільнот, краще використовувати самостійну конфігурацію.

CGN Adaptive

Скопіюйте наступний JS до вашого 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);
});

Додаткова інформація

Переміщення з BlackGlobalNavigation

Якщо ви використали BlackGlobalNavigation, перш ніж вам надзвичайно рекомендується перейти на CGN з темою BGN. Автономна таблиця стилів BGN не буде підтримуватися в майбутньому та може зламатися. По-перше, імпортуйте BlackGlobalNavigation.css імпортом до CustomGlobalNavigation.css. Потім додайте CSS з цього розділу під вашим імпортом. Ви зараз використовуєте CGN!

Підтримка та допомога

  • Ви можете виправити будь-які помилки в таблиці стилів.
  • Ви можете додати будь-які нові функції, якщо:
  • вони стабільні.
  • # нові змінні не суперечать існуючим.
  • # змінна сумісна із зворотними значеннями і нічого не змінює для користувачів, які вже підключили CGN.

Підтримувані скрипти

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+