Redesigns Wikia.com/Fandom.com and moves community menu to the left side. Removes all panels you don't need. Configurable hiding of panels, menu depth and page size. Unique feature: doesn't break website when logged in.
/* ==UserStyle==
@name Fandom.com – Clean Enhanced Nav [Ath]
@namespace athari
@version 1.1.1
@description Redesigns Wikia.com/Fandom.com and moves community menu to the left side. Removes all panels you don't need. Configurable hiding of panels, menu depth and page size. Unique feature: doesn't break website when logged in.
@author Athari (https://github.com/Athari)
@homepageURL https://github.com/Athari/AthariUserCSS
@supportURL https://github.com/Athari/AthariUserCSS/issues
@license MIT
@preprocessor default
@var number ath-sidebar-width "Sidebar width" [250, 150, 500, 10, 'px']
@var number ath-max-content-width "Max content width" [1000, 800, 10000, 10, 'px']
@var checkbox ath-center-content "Center content" 1
@var range ath-expand-menu "Expand menu level (1-6 subitems)" [2, 1, 4, 1]
@var checkbox ath-show-left-sidebar "Show left explore sidebar" 0
@var checkbox ath-show-right-sidebar "Show right sidebar (when not logged in)" 1
@var checkbox ath-show-top-bar "Show top toolbar" 0
@var checkbox ath-show-bottom-bar "Show bottom social bar" 0
==/UserStyle== */
@-moz-document domain("fandom.com") {
:root {
color-scheme: dark light;
--ath-top-margin: 110px;
}
.fandom-sticky-header#community-navigation {
position: static !important;
width: auto !important;
min-width: 0 !important;
margin: 10px 0 auto 0 !important;
padding: 0 !important;
height: auto !important;
display: grid !important;
grid-template-columns: 1fr;
grid-template-rows: auto;
align-items: flex-start !important;
gap: 10px !important;
background: none !important;
border: none !important;
transform: none !important;
.fandom-sticky-header__logo {
grid-area: 1 / 1;
img {
margin: 0;
width: auto !important;
max-width: var(--ath-sidebar-width);
height: auto !important;
max-height: 300px;
}
}
.fandom-sticky-header__sitename {
grid-area: 2 / 1;
max-width: var(--ath-sidebar-width);
margin: 0;
}
.community-navigation__fandom-heart {
grid-area: 3 / 1;
width: 40px;
}
.search-container {
grid-area: 3 / 1;
margin: 0 0 0 50px;
width: auto;
min-width: 0;
.search-app__wrapper {
width: auto;
margin: 0;
}
.search-app__button {
display: none;
}
.search-app__suggestions-box {
z-index: 500;
}
}
.sign-in {
grid-area: 4 / 1;
margin: 0 auto 0 0;
.sign-in__dropdown-content {
inset-inline: 0 auto;
z-index: 500;
}
}
.wiki-tools {
grid-area: 4 / 1;
}
.global-action__user {
grid-area: 4 / 1;
margin: 0 auto 0 0;
}
.global-action-notifications {
grid-area: 4 / 1;
margin: 0 auto 0 40px;
}
.fandom-community-header__local-navigation {
grid-area: 5 / 1;
margin: 0;
> .wds-tabs {
display: flex;
flex-flow: column;
align-items: stretch;
::before, ::after {
display: none;
}
.wds-dropdown:not(.explore-menu) {
display: flex;
flex-flow: column;
align-items: stretch;
margin: 5px 0;
padding: 8px 0;
background: var(--wds-dropdown-background-color);
color: var(--wds-dropdown-linked-item-color);
border-color: var(--wds-dropdown-border-color);
border-radius: 10px;
.wds-tabs__tab-label {
display: flex;
height: auto;
max-width: none;
a {
flex: 1;
padding: 10px 10px;
text-decoration: none;
&:hover {
background: var(--wds-dropdown-linked-item-background-color);
color: var(--wds-dropdown-linked-item-color);
}
}
.wds-dropdown__toggle-chevron {
display: none !important;
}
}
.wds-dropdown__content {
position: static;
width: auto;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
display: block;
transform: none;
border: none;
border-radius: 10px;
> li {
padding: 0 0 0 20px;
}
}
.wds-dropdown-level-nested__content {
min-width: min(var(--ath-sidebar-width), 150px);
}
@container style(--ath-expand-menu: 2) or style(--ath-expand-menu: 3) or style(--ath-expand-menu: 4) {
.wds-dropdown-level-nested__toggle[data-tracking="custom-level-2"]:not(:has(+ div > ul > li:nth-child(7))) {
svg {
display: none;
}
}
[data-tracking="custom-level-2"] + .wds-dropdown-level-nested__content:not(:has(> ul > li:nth-child(7))) {
position: static;
width: auto;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
display: block;
transform: none;
border: none;
border-radius: 10px;
}
}
@container style(--ath-expand-menu: 3) or style(--ath-expand-menu: 4) {
.wds-dropdown-level-nested__toggle[data-tracking="custom-level-3"]:not(:has(+ div > ul > li:nth-child(7))) {
svg {
display: none;
}
}
[data-tracking="custom-level-3"] + .wds-dropdown-level-nested__content:not(:has(> ul > li:nth-child(7))) {
position: static;
width: auto;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
display: block;
transform: none;
border: none;
border-radius: 10px;
}
}
@container style(--ath-expand-menu: 4) {
.wds-dropdown-level-nested__toggle[data-tracking="custom-level-4"]:not(:has(+ div > ul > li:nth-child(7))) {
svg {
display: none;
}
}
[data-tracking="custom-level-4"] + .wds-dropdown-level-nested__content:not(:has(> ul > li:nth-child(7))) {
position: static;
width: auto;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
display: block;
transform: none;
border: none;
border-radius: 10px;
}
}
}
.wds-dropdown.explore-menu {
.wds-dropdown__content {
inset-inline: 0 auto;
transform: none;
z-index: 500;
}
}
.wds-tabs__tab {
margin: 0 10px;
}
}
}
}
body {
display: grid !important;
grid-template-areas:
"r1a sidebar main rail r1b"
"r2a footer footer rail r2b";
grid-template-columns: minmax(20px, 1fr) var(--ath-sidebar-width) var(--ath-max-content-width) auto minmax(20px, 1fr);
grid-template-rows: 1fr auto;
@container style(--ath-center-content: 1) {
grid-template-areas:
"r1a sidebar main rail r1b"
"r2a footer footer footer r2b";
grid-template-columns: minmax(20px, 1fr) var(--ath-sidebar-width) var(--ath-max-content-width) var(--ath-sidebar-width) minmax(20px, 1fr);
}
.community-navigation#community-navigation {
grid-area: sidebar;
}
.main-container {
display: contents;
> :not(:is(.fandom-community-header__background, .resizable-container, .global-footer)) {
display: none !important;
}
.fandom-community-header__background {
grid-area: 1 / 1 / 1 / span all;
}
.resizable-container {
display: contents !important;
> :not(.page, .community-header-wrapper) {
display: none !important;
}
.community-header-wrapper { /* sticky disabled unless this is out ofscreen */
position: absolute;
top: -999999px;
}
.page {
display: contents !important;
.page__main {
grid-area: main;
margin: var(--ath-top-margin) 0px auto 30px;
border-radius: 10px;
}
.page__right-rail {
grid-area: rail;
align-self: flex-start !important;
position: relative !important;
margin: var(--ath-top-margin) 0px 0px 30px;
width: var(--ath-sidebar-width) !important;
max-width: var(--ath-sidebar-width) !important;
height: auto !important;
min-height: 0 !important;
border-radius: 10px !important;
#WikiaAdInContentPlaceHolder,
.render-new-wiki-recommendations,
.rail-module,
.right-rail-wrapper {
display: block !important;
width: auto !important;
height: auto !important;
}
.alice-carousel__stage {
flex-wrap: wrap !important;
gap: 10px;
}
.alice-carousel__arrow {
display: none !important;
}
.alice-carousel__stage-item,
.slider-item {
padding: 0 !important;
width: auto !important;
}
}
.page__right-rail.is-rail-hidden {
width: 0 !important;
.right-rail-toggle {
position: relative !important;
left: -57px !important;
}
}
}
}
.global-footer {
grid-area: footer;
}
}
}
html.is-content-expanded body {
grid-template-columns: 20px var(--ath-sidebar-width) 1fr 20px;
}
.notifications-placeholder {
z-index: 1000;
}
@container style(--ath-show-left-sidebar: 0) {
.global-explore-navigation#global-explore-navigation {
display: none !important;
}
}
@container style(--ath-show-right-sidebar: 0) {
.page__right-rail:not(:has(.right-rail-toggle)) {
display: none !important;
}
}
@container style(--ath-show-top-bar: 0) {
body:not(:has(.global-action-notifications)) {
.global-top-navigation#global-top-navigation {
display: none !important;
}
}
body:has(.global-action-notifications) {
.global-top-navigation#global-top-navigation {
position: absolute !important;
height: 0;
> a {
height: 0;
}
.search-container {
display: none;
}
.global-top-navigation__action-wrapper {
margin-top: -45px !important;
}
.navigation-tab,
#notifications__content {
top: 0 !important;
height: 100% !important;
}
}
}
.fandom-community-header__background {
transform: none !important;
}
.global-explore-navigation {
top: 0px !important;
}
}
@container style(--ath-show-bottom-bar: 0) {
#WikiaBar {
display: none !important;
}
}
#rail-boxad-wrapper,
.gpt-ad {
display: none;
}
}