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 Рэжым кнопкі змешвання Wiki стварэння 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 Адлюстраванне спасылкі «Стварыць вікі» flex flex (паказвае спасылку), none (хавае спасылку)
--cgn-start-a-wiki-secondary-display Адлюстраванне спасылкі «Стварыць вікі» у выпадным меню «Вікі» 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


Гэта тэма практычна цалкам ідэнтычная цяперашняму нав. меню. Яна ўлучана па змаўчанні, калі вы імпартуеце CSS і не будзеце змяняць налады.

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!

Чым дапамагчы

  • Вы можаце выправіць кожныя абмылы ўсярэдзіне CSS.
  • Вы можаце дадаваць кожныя новыя функцыі, калі:
    1. яны правераны і стабільна працуюць.
    2. новыя зменныя не будуць канфліктаваць з існымі
    3. зменныя назад сумяшчальныя і нічога не зменяць для ўдзельнікаў, якія ўжо скарыстаюць 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+