Imports TopGlobalNav by SuperDragonXD1 (https://dev.fandom.com/wiki/User:SuperDragonXD1)), moves side rail to bottom, makes the global navigation less noticeable by using wiki's theme colors. Also removes some of the ads.
Custom appearence for Fandom wikis by ayaaop
Details
Authorayaaop
LicenseNo License
Categoryfandom
Created
Updated
Size8.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
The page is expanded by default and cannot be changed. The button that changes the width has been hidden as it fricks up the stylesheet (and I'm too lazy 2 fix it)
Source code
/* ==UserStyle==
@name Custom appearence for Fandom wikis
@version 20221114.17.04
@namespace userstyles.world/user/ayaaop
@description Imports TopGlobalNav by SuperDragonXD1 (https://dev.fandom.com/wiki/User:SuperDragonXD1)), moves side rail to left, makes the global navigation less noticeable by using wiki's theme colors. Also removes some of the ads.
@author ayaaop
@license (unknown, sorry)
==/UserStyle== */
@-moz-document domain("fandom.com") {
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:TopGlobalNav.css&only=styles";
.global-navigation .wds-dropdown {
--wds-dropdown-background-color: var(--theme-page-background-color--secondary);
--wds-dropdown-border-color: var(--theme-border-color);
--wds-dropdown-text-color: var(--theme-page-text-color);
--wds-dropdown-linked-item-color: var(--theme-link-color);
--wds-dropdown-linked-item-background-color: rgba(var(--theme-link-color--rgb), .1);
}
.global-navigation .wds-button {
--wds-primary-button-background-color: var(--theme-accent-color);
--wds-primary-button-background-color--hover: var(--theme-accent-color--hover);
--wds-primary-button-label-color: var(--theme-accent-label-color);
--wds-secondary-button-label-color: var(--theme-page-text-color);
--wds-secondary-button-label-color--hover: var(--theme-page-text-color--hover);
}
html body.skin-fandomdesktop {
position: initial!important
}
body .resizable-container {
max-width: 100%;
/* i don't want to bother optimising stuff, too lazy */
width: 95%;
}
.oo-ui-windowManager-modal-active {
overflow: hidden;
position: static;
}
.fandom-community-header__community-name {
display: block;
width: 100%;
}
.global-navigation {
height: 45px !important;
position: fixed;
font-size: 11px;
z-index: 700;
box-shadow: none;
border-bottom: 1px solid var(--theme-border-color);
}
.global-navigation__bottom,
.global-navigation__top,
.global-navigation,
.fandom-sticky-header {
background-color: var(--theme-page-background-color)
}
.global-navigation__icon,
.global-navigation__icon.has-border {
border-color: var(--theme-border-color)
}
.global-navigation__icon.has-background {
background-color: var(--theme-page-background-color--secondary)
}
.global-navigation__icon.has-background,
.global-navigation__icon.has-background:active,
.global-navigation__icon,
.global-navigation__icon:active,
.global-navigation__icon:visited,
.global-navigation__icon.has-border,
.global-navigation__icon.has-background:visited,
.global-navigation__bottom .wds-dropdown__toggle > .global-navigation__icon {
color: var(--theme-link-color);
}
.global-navigation__icon.has-background:focus,
.global-navigation__icon.has-background:hover,
.global-navigation__icon:focus,
.global-navigation__icon:hover,
.global-navigation__icon.has-border:hover,
.global-navigation__bottom .wds-dropdown__toggle > .global-navigation__icon:hover {
color: var(--theme-link-color--hover);
}
.global-navigation__icon:hover,
.global-navigation__icon:hover.has-border,
.global-navigation__link:hover .global-navigation__icon.has-border,
.global-navigation__link:hover .global-navigation__icon,
.wds-dropdown:hover .global-navigation__icon {
background-color: rgba(var(--theme-link-color--rgb), .2);
border-color: rgba(var(--theme-page-dynamic-color-1--rgb), .18);
}
.ad-slot,
.gpt-ad,
.mcf-en,
#mixed-content-footer,
.top-ads-container,
#rail-boxad-wrapper,
#WikiaAdInContentPlaceHolder,
.bottom-ads-container,
.global-footer__content,
#WikiaBar,
#highlight__main-container,
.page-side-tools .page-side-tool.content-size-toggle,
.right-rail-toggle {
display: none!important;
}
.sticky-modules-wrapper {
top: 50px;
}
.main-container,
.action-edit .main-container,
.action-submit .main-container,
.ve-active .main-container {
margin-top: 45px;
}
.global-navigation__links .global-navigation__label,
.render-wiki-recommendations,
.render-wiki-recommendations-right-rail,
.global-navigation__beta-badge {
display: none;
}
.global-navigation .global-navigation__bottom,
.global-navigation .global-navigation__top {
padding: 0;
align-items: center;
}
.global-navigation .global-navigation__top a.global-navigation__logo {
background: url(/resources-ucp/v2/dist/svg/wds-brand-fandom-logomark.svg) no-repeat center, var(--fandom-global-nav-background-color);
width: 45px;
padding: 5px;
height: 45px;
background-size: 20px;
border-right: 1px solid var(--fandom-border-color);
border-bottom: 1px solid var(--theme-border-color);
}
.global-navigation .global-navigation__top a.global-navigation__search.global-navigation__icon {
margin: 0 1em;
}
:root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header,
.wikiEditor-ui .wikiEditor-ui-toolbar {
padding: 0;
}
.global-navigation .notifications {
margin-bottom: 0;
}
.global-navigation .global-navigation__bottom > .wds-dropdown.is-attached-to-bottom .wds-dropdown__content {
right: 0;
}
.global-navigation .global-navigation__bottom .notifications .wds-dropdown .wds-dropdown__content {
top: 45px!important
}
html:not(.ve-activated) .page.has-right-rail {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.sticky-modules-wrapper,
.right-rail-wrapper {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
}
.right-rail-wrapper {
width: max-content;
}
html:not(.ve-activated) .page.has-right-rail .page__right-rail {
-webkit-transition: width .5s;
transition: width .5s;
width: 100%
}
.fandom-community-header__background.fullScreen {
width: 100%
}
.has-right-rail .page__right-rail {
border-radius: 0 0 3px 3px;
border-top: 1px solid var(--theme-border-color);
padding: 24px;
}
.page .page__right-rail:not(.is-rail-hidden) {
overflow-x: auto!important;
scroll-snap-type: x mandatory;
}
html:not(.ve-activated) .page.has-right-rail .page__main {
border-radius: 3px 3px 0 0;
}
.page-side-tools,
.mw-notification-area,
.post-form-wrapper {
top: 50px;
}
.rail-module {
width: 300px;
border: 0;
margin-right: 20px;
margin-top: 0;
padding-bottom: 0;
height: fit-content;
scroll-snap-align: none center;
}
.rail-module:not(:last-of-type) {
border-right: 1px solid var(--theme-border-color)
}
.oo-ui-menuLayout-menu .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-scrollable.oo-ui-panelLayout-expanded.oo-ui-bookletLayout-outlinePanel {
overflow: hidden;
}
.fandom-sticky-header .wiki-tools .wds-button.wds-is-secondary {
--wds-secondary-button-label-color: var(--theme-page-text-color);
--wds-secondary-button-label-color--hover: var(--theme-page-text-color--hover);
}
.fandom-sticky-header {
top: -50px;
height: 45px;
padding-left: 0;
transition: transform .3s, -webkit-transform .3s;
box-shadow: none;
background: var(--theme-page-background-color);
width: calc(100% - 54px);
padding-top: 8px;
}
.fandom-sticky-header__logo {
background: var(--theme-page-background-color--secondary);
width: 45px;
padding: 5px;
height: 45px;
border-right: 1px solid var(--fandom-border-color);
display: flex;
justify-content: center;
align-items: center;
}
.fandom-sticky-header__sitename {
margin-left: 12px;
}
.fandom-sticky-header__logo img {
margin: 0;
object-fit: cover;
max-height: 31px;
width: 45px;
height: fit-content;
padding: 5px;
}
.fandom-sticky-header a {
--theme-sticky-nav-text-color: var(--theme-page-text-color);
color: var(--theme-page-text-color)
}
.fandom-sticky-header .wds-tabs__tab-label .wds-icon {
fill: var(--theme-page-text-color)
}
.fandom-sticky-header a:hover {
color: var(--theme-page-text-color--hover)
}
.global-footer__bottom > div {
padding: 8px 0;
}
.global-navigation .global-navigation__bottom .wds-dropdown__toggle:not(.notifications__toggle) {
position: fixed;
right: 0;
margin-top: 5px;
top: 0;
}
.global-navigation .global-navigation__bottom .wds-dropdown__toggle:not(.notifications__toggle) ~ .wds-dropdown__content {
margin-top: 19px;
z-index: 702;
}
.global-navigation .wds-dropdown__toggle.notifications__toggle {
margin-right: 45px;
}
.global-navigation .global-navigation__bottom > .wds-dropdown.is-attached-to-bottom::before,
.global-navigation .wds-dropdown.is-attached-to-bottom::after {
bottom: -1px;
left: 50%;
right: unset;
top: unset;
-webkit-transform: unset;
transform: unset;
border-right-color: transparent;
}
.app-wrapper {
margin-left: 0;
max-width: 100%;
}
div[class^="Map-module_interactiveMap"] {
background-color:var(--theme-body-background-color)
}
}