WoltLab "theme"

darwin · Jul 28th 2022

i'm terrible at this.

(not what the actual theme looks like, but for some reason vivaldi refused to screenshot properly)

CSS

.pageContainer {
    max-width: unset; /* remove the max width and make WoltLab actually readable */
}

body {
    background-image: url(https://www.wallpapers13.com/wp-content/uploads/2018/09/Dubai-City-night-photo-from-the-window-of-the-Grosvenor-Hotel-Emirates-Arabi-Uniti-HD-TV-Wallpaper-for-Desktop-Laptop-Tablet-And-Mobile-Phones-3840x2400-840x525.jpg); /* change background image */
    color: #ffffff; /* change color and make the text white*/
}

.backgroundBlurWrapper::after{
    background-image: url(https://www.wallpapers13.com/wp-content/uploads/2018/09/Dubai-City-night-photo-from-the-window-of-the-Grosvenor-Hotel-Emirates-Arabi-Uniti-HD-TV-Wallpaper-for-Desktop-Laptop-Tablet-And-Mobile-Phones-3840x2400-840x525.jpg); /* change background image */
    filter: blur(10px); /* add a slight blur */
}

.backgroundBlurWrapper::before {
    background-color: unset; /* remove background color */
}

.contentHeader, .boxHeadline {
    color: #ffffff; /* make text white */
}

.contentHeader .contentHeaderMetaData>li a, .contentHeader .contentHeaderMetaData>li a:hover, .contentHeader .contentHeaderMetaData>li .icon {
    color: #ffffff; /* make text white */
}

button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary {
    background-color: unset; /* remove background color so that the page doesn't look weird */
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

.mainMenu .boxMenu>li.active>a, .mainMenu .boxMenu>li:hover>a {
    background: unset; /* remove background color so that the page doesn't look weird */
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

.tabularBoxTitle>header {
    border-bottom: unset; /* remove the border */
}

.wbbCategory.wbbCollapsibleCategory>header>h2>a {
    background-color: unset; /* remove background color */
    background: rgb(0,40,50); /* gradients */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* more gradient stuff */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* even more gradient shit */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* gradient (duh) */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* why did i even make gradients this long */
}

.wbbCategory.wbbCollapsibleCategory>header>h2+small {
    background-color: unset; /* remove background color */
    max-height: 0px; /* make useless stuff as small as possible */
    max-width: 0px; /* make useless stuff as small as possible */
    filter: blur(10px); /* make useless stuff disappear (well, not really disappear, this is just a dirty workaround because I don't know how to make stuff actually disappear) */
}

#pageHeaderPanel {
    min-width: 0; /* remove useless stuff */
    border-bottom: unset; /* remove more useless stuff */
}

#main {
    background-color: unset; /* remove background (why are you even reading these comments?) */
}

.pageNavigation {
    filter: blur(10px); /* remove useless stuff */
    padding: 0px; /* remove empty space */
    max-height: 0px; /* remove empty space */
}

h1 {
    max-height: 0px; /* remove empty space */
    filter: blur(10px); /* add blur effect */
}

.boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
    background-color: unset; /* remove background */
    backdrop-filter: blur(10px); /* add blur effect */
}

.content>.section, .content>form, .sectionContainer {
    border: unset; /* removes the border around posts */
    background-color: unset; /* removes the background color */
    padding: unset; /* remove empty space */
    backdrop-filter: blur(10px); /* add blur effect */
}

.redactor-toolbar {
    background-color: unset; /* remove background color */
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
    background-color: unset;
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */   
}

.boxesFooter {
    background-color: unset;
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

Display More

Deauthorized · Jul 28th 2022

Literally the best theme I have ever seen

darwin · Jul 29th 2022

CSS: update

.pageContainer {
    max-width: unset; /* remove the max width and make WoltLab actually readable */
}

body {
    background-image: url(https://www.wallpapers13.com/wp-content/uploads/2018/09/Dubai-City-night-photo-from-the-window-of-the-Grosvenor-Hotel-Emirates-Arabi-Uniti-HD-TV-Wallpaper-for-Desktop-Laptop-Tablet-And-Mobile-Phones-3840x2400-840x525.jpg); /* change background image */
    color: #ffffff; /* change color and make the text white*/
}

.backgroundBlurWrapper::after{
    background-image: url(https://www.wallpapers13.com/wp-content/uploads/2018/09/Dubai-City-night-photo-from-the-window-of-the-Grosvenor-Hotel-Emirates-Arabi-Uniti-HD-TV-Wallpaper-for-Desktop-Laptop-Tablet-And-Mobile-Phones-3840x2400-840x525.jpg); /* change background image */
    filter: blur(10px); /* add a slight blur */
}

.backgroundBlurWrapper::before {
    background-color: unset; /* remove background color */
}

.contentHeader, .boxHeadline {
    color: #ffffff; /* make text white */
}

.contentHeader .contentHeaderMetaData>li a, .contentHeader .contentHeaderMetaData>li a:hover, .contentHeader .contentHeaderMetaData>li .icon {
    color: #ffffff; /* make text white */
}

button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary {
    background-color: unset; /* remove background color so that the page doesn't look weird */
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

.mainMenu .boxMenu>li.active>a, .mainMenu .boxMenu>li:hover>a {
    background: unset; /* remove background color so that the page doesn't look weird */
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

.tabularBoxTitle>header {
    border-bottom: unset; /* remove the border */
}

.wbbCategory.wbbCollapsibleCategory>header>h2>a {
    background-color: unset; /* remove background color */
    background: rgb(0,40,50); /* gradients */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* more gradient stuff */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* even more gradient shit */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* gradient (duh) */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* why did i even make gradients this long */
}

.wbbCategory.wbbCollapsibleCategory>header>h2+small {
    background-color: unset; /* remove background color */
    max-height: 0px; /* make useless stuff as small as possible */
    max-width: 0px; /* make useless stuff as small as possible */
    filter: blur(10px); /* make useless stuff disappear (well, not really disappear, this is just a dirty workaround because I don't know how to make stuff actually disappear) */
}

#pageHeaderPanel {
    min-width: 0; /* remove useless stuff */
    border-bottom: unset; /* remove stuff that can't be modified for some reason + looks weird */
}

#main {
    background-color: unset; /* remove background (why are you even reading these comments?) */
}

.pageNavigation {
    filter: blur(10px); /* remove useless stuff */
    padding: 0px; /* remove empty space */
    max-height: 0px; /* remove empty space */
}

.boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
    background-color: unset; /* remove background */
    backdrop-filter: blur(10px); /* add blur effect */
}

.content>.section, .content>form, .sectionContainer {
    border: unset; /* removes the border around posts */
    background-color: unset; /* removes the background color */
    padding: unset; /* remove empty space */
    backdrop-filter: blur(10px); /* add blur effect */
}

.redactor-toolbar {
    background-color: unset; /* remove background color */
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
    background-color: unset;
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */   
}

.boxesFooter {
    background-color: unset;
    background: rgb(0,40,50); /* add a gradient */
    background: -moz-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: -webkit-linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    background: linear-gradient(90deg, rgba(0,40,50,1) 0%, rgba(1,100,145,1) 50%, rgba(0,212,255,1) 100%); /* add a gradient */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002832",endColorstr="#00d4ff",GradientType=1); /* add a gradient */
}

.messageReduced .messageHeader {
    background-color: unset; /* remove background color */
    backdrop-filter: blur(10px); /* add blur */
}

.layoutBoundary {
    min-width: 0px;
    min-height: 0px;
}

.pageFooterCopyright {
    border-radius: unset;
    background-color: unset;
    padding: 0px;
    margin: 0px;
    filter: blur(100px);
}

.pageFooterCopyright>.layoutBoundary>div:not(:first-child) {
    margin-top: 0px;
    filter: blur(100px);
}

.backgroundBlurWrapper::after {
    filter: unset;
}

.boxesFooterBoxes {
    background-color: unset;
    backdrop-filter: blur(10px);
}fix

.boxesFooterBoxes .boxContainer {
    margin-left: unset;
    margin-right: unset;
    margin-bottom: unset;
    padding: 15px 0;
}

.boxesFooterBoxes .box {
    max-width: unset; /* fixes legend text, may cause issues on small monitors */
    min-width: 1800px; /* fixes legend text, may cause issues on small monitors */
}

.messageSidebar {
    background-color: unset;
}

.message {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
}

.backgroundBlurWrapper {
    filter: blur(10px); /* add blur (works!) */
}

Display More

- removed 2 lines under the page

- made a box transparent (you guys have eyes... right?)

- fixed legend text not scaling correctly with the increased width (might cause issues on smaller monitors, in which case set the min-width declaration's (you should know which min-width i'm talking about, there are only 3 of them) value to a lower value)

- fixed thread names not showing

- removed background under forum avatar

- added slight padding to posts section (apparently, websites look like shit without padding...)

- added blur (for the 100th time in a row)

WoltLab "theme"

Participate now!

Share

Similar Threads

Theme suggestion for the new forums

Woltlab Forum Themes

A few suggestions

WoltLab Forum Migration - Feedback