How did they customize the article background like this? it looks super cool
How did they customize the article background like this? it looks super cool
Hello! It's specificities change the background for FandomDesktop on CSS, that's why we should change this:
/* Background (FandomDesktop) --> Credits to TWICE Wiki
Note: Do not use the Header background cause it will be overlaped by the background
There's eight element on this code: Gradient background & Font, Border and box shadow, To make the background visible, Background, Remove the Header background (something like that), Make the right rail background transparent, Table of Contents Background Color, Article Table Background */
/* == Gradient background & Font == */
/* === Light Theme (Default) === */
@media screen and (min-width: 1025px) {
body.theme-fandomdesktop-light {
background: linear-gradient(#ff6b0199, #FFFFFF99, #ff6b0199) fixed;
font-family:'Montserrat', 'Gothic A1', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', sans-serif !important;
}
}
/* === Dark Theme === */
@media screen and (min-width: 1025px) {
body.theme-fandomdesktop-dark {
background: linear-gradient(#191919,var(--theme-link-color--hover) ) fixed;
font-family:'Montserrat', 'Gothic A1', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', sans-serif !important;
}
}
/* == Border and box shadow == */
.resizable-container .page {
background: #fff4;
position: relative;
-moz-box-shadow:0 0 30px var(--theme-accent-color);
-webkit-box-shadow:0 0 30px var(--theme-accent-color);
border: 2px solid var(--theme-link-color);
box-shadow:0 0 30px var(--theme-accent-color);
border-top: 2px solid var(--theme-link-color);
}
/* == To make the background visible == */
.page__main {
background-color: transparent;
border-radius: 3px;
min-height: 480px;
padding: 24px 36px;
position: relative;
}
/* == Background == */
/* === Light Theme (Default) */
.theme-fandomdesktop-light .resizable-container .page::before {
opacity: 0.2;
background: transparent url("/wiki/Special:FilePath/WikiaPageBackgroundLight.jpg") center top fixed;
background-size: 1300px;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;z-index: -1;
}
/* === Dark Theme === */
.theme-fandomdesktop-dark .resizable-container .page::before {
opacity: 0.2;
background: transparent url("/wiki/Special:FilePath/WikiaPageBackgroundDark.jpg") center top fixed;
background-size: 1300px;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
/* == Remove the Header background (something like that) == */
.fandom-community-header__background {
background: var(--theme-body-background-image) no-repeat;
height: 160px;
position: fixed;
top: 0;
width: 100%;
z-index: -2;
opacity: 0;
}
/* == Make the right rail background transparent == */
.page__right-rail {
background-color: transparent;
}
/* == Table of Contents Background Color == */
.page-content #toc {
background: var(--theme-page-background-color);
}
/* == Article Table Background == */
.article-table .wikitable {
background: var(--theme-page-background-color);
}
/* == Transparent Rail Module Background == */
.rail-module {
background-color: transparent;
border-bottom: transparent;
}
What do you think?