ФЭНДОМ


Так как на ВС блоги запрещены, а хранить где-то лайфхаки на задворках мне надоело, хочу поделится с вами своим оформлением глобальной шапки через личные настройки.

Хотя скорее всего, у всех у кого вытекали глаза от новых цветов шапки уже всё давно поменяли, всё равно. Помимо украшательства, я привёл к единому внешнему виду все выпадающие окна, окно оповещений и уведомлений имели разные подчёркивания, и разную прозрачность шрифта, и т.д.

Помимо простого использования можете просто накрутить свои цвета, я сократил и подписал всё что возможно, собственно для этого и создаётся блог.

Внешний вид стиля "TBoI Wiki"


Установка

Добавить в личный CSS - Special:MyPage/global.css

/*Оформление новой шапки в стиле Tboi Wiki*/
 
.WikiaTopAds {
    padding: 0px;
}
 
/*цвет фона*/
.wds-global-navigation {
    background-color: #39557f;
}
 
/*цвет кнопки поиска, создать вики, кнопок уведомлений*/
.wds-global-navigation__notifications-dropdown, .wds-global-navigation__search, .wds-global-navigation__start-a-wiki .wds-button.wds-is-secondary:not(:disabled).wds-is-secondary {
    color:#84b5d5;
        border-color: #84b5d5;
}
 
/*цвет стрелок возле кнопок*/
.wds-global-navigation__link-group .wds-dropdown__toggle-chevron, .wds-global-navigation__notifications-dropdown .wds-dropdown__toggle-chevron, .wds-global-navigation__user-menu .wds-dropdown__toggle-chevron {
    fill: #ffffff;
}
 
/*цвет обводки аватара*/
.wds-global-navigation .wds-avatar img.wds-avatar__image {
    border: 2px solid #84b5d5;
}
 
/*Кнопка выйти*/
.wds-sign-out__button {
    color: #e8e8e8;
}
 
/*черта поле поиска*/
.wds-search-is-active .wds-global-navigation__search-input-wrapper, .wds-global-navigation__search-input-wrapper {
    border-bottom: 2px solid #ffffff;
}
 
/*кнопка поиска со стрелкой*/
.wds-global-navigation__search-submit:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #833232;
 
}
.wds-global-navigation__search-submit:not(.wds-is-text) {
    border-color: #833232;
}
 
/*цвет фона всех окон*/
#GlobalNavigationWallNotifications .notifications-markasread, #GlobalNavigationWallNotifications, #globalNavigation .wds-dropdown__content, #globalNavigation .wds-is-linked::before, #globalNavigation .wds-is-linked::after  {   
    background-image: linear-gradient(to right, #314766, #39557f,#314766);
       border: none;
}
 
/*шрифты всех окон*/
#GlobalNavigationWallNotifications .notification-message, .wds-notification-card__text, #globalNavigation .wds-dropdown__content .wds-list.wds-is-linked>li>a {
color: #e7e7e7;
}
 
/*шрифты окон подпись времени*/
#GlobalNavigationWallNotifications .notification time, .wds-notification-card__context-list {
     color: #86b8d8;
}
 
/*цвет ников в первом окне*/
.wds-notification-card__last-actor {
    color: #e37171;
}
 
/*выделение пунктов в первом окне*/
#globalNavigation  .wds-list.wds-is-linked>li:hover>a {
    color: #ffffff;
     background-color: rgba(172, 0, 0, 0.3);
}
 
/*кружок оповещений*/
.wds-global-navigation__avatar-notifications-counter, .wds-global-navigation__notifications-counter {
    background-color: rgba(131, 53, 53, 0.85);
    color: #ffffff;
    font-size: 13px;
    padding: 8px;
    box-shadow: 0 0 10px #ff0000;
}
 
/*Выделение тем полученных сообщений*/
#GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header {
    background-color: rgba(172, 0, 0, 0.3);
    border-top: none;
    color: #ffffff;
}
 
/*Фон окна пустого окна уведомлений (загрузка)*/
#GlobalNavigationWallNotifications .notification.empty {
   background: transparent;
     color: #ffffff;
}
 
/*------фиксы--------*/
  /*Фиксы и параметры окна уведомлений*/ 
#GlobalNavigationWallNotifications .notification {
     border-top: 1px solid #dee7e5;
     width: 270px;
     margin-left: 15px;
}
 
/*фикс толщины шрифта в окне уведомлений*/
#GlobalNavigationWallNotifications .notification h4 {
 font-weight: normal;       
}
 
/* фиксы Окна колокольчика*/
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after, .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::before {
    background-color: transparent;
}
 
/* фон уведомлений при наведении*/
#GlobalNavigationWallNotifications .notification:hover {
     background-color: transparent;
}
 
/* фикс прозрачных шрифтов*/
#GlobalNavigationWallNotifications .notification.read h4, #GlobalNavigationWallNotifications .notification.read .avatars {
    opacity: 1.0;
}

/*Фикс кабинета участника eng*/
.wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content {
    background-color: #39557f;
}
 
 
/*------Отключалки--------*/
/*отключить кнопку создать вики в меню вики*/
.wds-global-navigation__link-group .wds-dropdown__content .wds-button.wds-is-secondary:not(:disabled) {
    display:none
}
 
/*убрать лого Фандом*/
.wds-global-navigation__logo-image {
    display: none;
}
 
/*отключение кнопок видеоигры кино и тв (вики остаётся)*/
.wds-global-navigation__link {
    display: none;
}

Фикс для мартовского обновления шапки

В марте 2019 была обновлена шапка, где элементы шапки были разбросаны по углам, что пришлось не по нраву большинству участников. Для тех кто не справился с исправлением сам, можете использовать мой вариант, приближенный к тому что было.

Добавить в личный CSS - Special:MyPage/global.css

Настроено для разрешения 1920x1080

 /*положение правых кнопок*/
.wds-global-navigation__user-menu, .wds-global-navigation__notifications-dropdown {
      right: 101px;
    position: relative;    
}

/*положение левых кнопок*/
.wds-global-navigation__links {
      left: 80px;
    position: relative; 
    
}
/*положение кнопки создание вики*/
.wds-global-navigation__start-a-wiki  {
      right: 101px;
    position: relative; 
}
/*положение поиска*/
.wds-global-navigation__search  {
     right: 120px;
    position: relative; 
}

/*ширина поиска в широком окне*/
.wds-global-navigation__search-container {
    width: 60%;   /*ЗДЕСЬ можно поиграться со значениями ширины*/
}
/*отступ от левых кнопок*/
.wds-global-navigation__dropdown-controls {
    margin: 0px 0px 0px 90px;
}


Дополнения

Также если хотите иметь менюшки и ссылки как на изображении, вам потребуется скрипт GlobalNavButtons, и ссылки. Выкладываю пример того как сделано у меня:

TBOI Стиль шапки 6

Пользовательское меню

Добавить в личный JS - Special:MyPage/global.js


/*Импорт скрипта*/
importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:GlobalNavButtons.js',
    ]
});
 
 
/*Менюшки*/
 
window.globalNavButtons = [

  {
    text: 'Вики',
    url: '',
    isMain: true,
    whoIsMain: false,
    shortName: '1'    /*привязка вкладки к выпадающим ссылкам*/
  },
 
 
        {
    text: 'Forest',    /*Отображаемое имя*/
    url: 'https://the-forest.fandom.com/ru/',  /*Ваша ссылка*/
    isMain: false,
    whoIsMain: '1', /*id для определения нужной вкладки*/
    shortName: ''
  },
 
     {
    text: 'HK',
    url: 'https://hollowknight.fandom.com/ru/',
    isMain: false,
    whoIsMain: '1',
    shortName: ''
  },
 
           {
    text: 'Etg',
    url: 'https://enter-the-gungeon.fandom.com/ru/',
    isMain: false,
    whoIsMain: '1',
    shortName: ''
  },
              {
    text: 'Messenger',
    url: 'http://ru.the-messenger.wikia.com/ru/',
    isMain: false,
    whoIsMain: '1',
    shortName: ''
  },
 
 
 
 
  {
    text: 'В.С',
    url: '',
    isMain: true,
    whoIsMain: false,
    shortName: '2'
  },
{
    text: 'Основная',
    url: 'https://ru.community.wikia.com',
    isMain: false,
    whoIsMain: '2',
    shortName: ''
  },
   {
    text: 'Тех. Обновы',
    url: 'http://ru.community.wikia.com/wiki/Главная_тема:Технические_обновления_ФЭНДОМА',
    isMain: false,
    whoIsMain: '2',
    shortName: ''
  },
        {
    text: 'Викии Вики',
    url: 'http://ru.wikies.wikia.com',
    isMain: false,
    whoIsMain: '2',
    shortName: ''
  },
        {
    text: 'Правка ссылки изоб.',
    url: 'http://ru.siegenax.wikia.com/wiki/Участник:Kopcap94/IP',
    isMain: false,
    whoIsMain: '2',
    shortName: ''
  },
 
 
 
];
 
 
/*Менюшки окончены*/
 

И добавить по желанию код в личный CSS - Special:MyPage/global.css

/*Код для личных js кнопок*/

.wds-global-navigation__link {
	font-size: 14px;   /*размер кнопок*/
}

.wds-global-navigation__link-group .wds-dropdown__toggle {
 color: #ffffff; /*цвет*/
}

Не забудьте включить личный js в настройках профиля, для тех кто им никогда не пользовался.

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.