A complete dark-themed overhaul of the vBulletin forums on bbq-brethren.com.
BBQ Brethren - Dark Ember Theme by cow
Details
Authorcow
LicenseNo License
Categorybbq-brethren.com
Created
Updated
Size204 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Icons are mainly derived from the open source Material Design Icons, and customized to fit with the theme. Some specialty icons are derived from the open source Noto Emoji project.
This theme is currently a work-in-progress. The code is a bit of a mess and work still needs to be done to variable-ize some of the stylesheet properties.
Old vBulletin software is a nightmare to theme. There is still much work to do.
Check back regularly for updates related to code clean-up and theming improvements.
====================================
CURRENT VERSION: 0.5 (first release)
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 10/9/2022, 10:50:15 AM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Dark theme overhaul for bbq-brethren.com
@author cow
==/UserStyle== */
@-moz-document domain("www.bbq-brethren.com"),
domain("bbq-brethren.com") {
/*
RESOURCES:
Material Design Icons - https://materialdesignicons.com/
Noto Emoji - https://github.com/adobe-fonts/noto-emoji-svg
*/
html,
body,
.page {
color: rgb(200, 200, 200);
}
a {
color: rgb(255, 187, 0) !important;
}
/*
██████╗ █████╗ ██████╗██╗ ██╗ ██████╗ ██████╗ ██████╗ ██╗ ██╗███╗ ██╗██████╗
██╔══██╗██╔══██╗██╔════╝██║ ██╔╝██╔════╝ ██╔══██╗██╔═══██╗██║ ██║████╗ ██║██╔══██╗
██████╔╝███████║██║ █████╔╝ ██║ ███╗██████╔╝██║ ██║██║ ██║██╔██╗ ██║██║ ██║
██╔══██╗██╔══██║██║ ██╔═██╗ ██║ ██║██╔══██╗██║ ██║██║ ██║██║╚██╗██║██║ ██║
██████╔╝██║ ██║╚██████╗██║ ██╗╚██████╔╝██║ ██║╚██████╔╝╚██████╔╝██║ ╚████║██████╔╝
╚═════╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝
*/
html,
body {
background-color: black;
background-color: transparent;
}
body {
background: url('https://i.ibb.co/cCFZcMW/bbq-bg1.png'), black;
background-repeat: repeat-x;
}
.page {
background: none;
}
/*
██╗ ██████╗ ██████╗ ██████╗
██║ ██╔═══██╗██╔════╝ ██╔═══██╗
██║ ██║ ██║██║ ███╗██║ ██║
██║ ██║ ██║██║ ██║██║ ██║
███████╗╚██████╔╝╚██████╔╝╚██████╔╝
╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝
*/
body > table:first-of-type {
background: unset;
}
body > table:first-of-type > tbody > tr > td {
text-align: center;
}
a[href*="brisket.mp4"] {
display: none;
}
img[src*="logov5"] {
content: url('https://i.ibb.co/wwYf3Fs/bbq-logo.png');
filter: drop-shadow(0px 0px 10px #f50);
}
/* HEADERS n' STUFF */
.tcat,
#forumtools,
#forumsearch,
.vbmenu_control,
.thead,
.tfoot,
.gsc-control-cse {
background: unset;
border: unset;
border-spacing: 0;
background-color: rgb(40, 40, 40);
padding: 12px !important;
}
.tborder {
border: unset;
border-spacing: 0;
background: unset;
padding: 0 !important;
}
/* POPUP MENUS */
.vbmenu_popup {
border: solid 1px black;
clip: unset !important;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
.vbmenu_popup table {
border-spacing: 0;
border: unset;
min-width: 200px;
}
.vbmenu_popup table .thead {
background-color: black;
}
.vbmenu_popup .vbmenu_option {
background-color: rgb(30, 30, 30);
padding: 12px;
border-left: solid 2px transparent;
}
.vbmenu_popup .vbmenu_hilite {
background-color: black;
padding: 12px;
border-left: solid 2px orange;
}
/*
████████╗██╗ ██╗██████╗ ███████╗ █████╗ ██████╗ ██╗ ██╗███████╗████████╗
╚══██╔══╝██║ ██║██╔══██╗██╔════╝██╔══██╗██╔══██╗ ██║ ██║██╔════╝╚══██╔══╝
██║ ███████║██████╔╝█████╗ ███████║██║ ██║ ██║ ██║███████╗ ██║
██║ ██╔══██║██╔══██╗██╔══╝ ██╔══██║██║ ██║ ██║ ██║╚════██║ ██║
██║ ██║ ██║██║ ██║███████╗██║ ██║██████╔╝ ███████╗██║███████║ ██║
╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚═╝╚══════╝ ╚═╝
*/
#threadslist {
border-spacing: 0;
}
td[colspan="7"].thead {
/* Stylize thread row separator after stickies */
background-color: rgba(0, 0, 0, 0.4) !important;
box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.4) inset;
}
#threadslist,
#threadslist > tbody,
#threadslist > tbody > tr,
#threadslist > tbody > tr > td,
.panelsurround,
.panel,
.alt1,
.alt2,
.alt1Active {
background: unset;
background-color: rgb(30, 30, 30);
color: rgb(200, 200, 200);
}
.panel {
color: rgb(200, 200, 200);
border: unset;
}
.alt1,
.alt2,
.alt1Active {
padding: 12px;
}
#threadslist > tbody > tr > td {
border-bottom: solid 1px rgb(40, 40, 40);
}
#threadslist > tbody > tr > td,
.alt1 > strong {
/* Non-link text; Sticky, etc */
color: rgb(255, 187, 0);
padding: 12px;
}
#threadslist > tbody > tr > td a {
color: rgb(200, 200, 200) !important;
text-decoration: none;
}
#threadslist > tbody > tr > td > div.smallfont,
td.alt1Active > div.smallfont {
color: rgb(100, 100, 100);
}
/* Individual thread view */
#posts table[id^="post"] {
margin-top: 20px;
box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.4);
}
#posts table[id^="post"] td {
border: unset !important;
}
div[id^="post_thanks"] > div:first-of-type {
padding-top: 0 !important;
}
#posts table[id^="post"] hr {
background-color: unset !important;
height: 0;
border: 0;
/*border-top: solid 1px rgb(255,255,255,0.1);*/
border: unset;
}
td[id^="td_post"] > div:first-of-type {
display: none;
}
div[id^="post_message"] + div {
margin-top: 20px;
}
/*
███████╗███████╗ █████╗ ██████╗ ██████╗██╗ ██╗ ██████╗ ██████╗ ██╗ ██╗
██╔════╝██╔════╝██╔══██╗██╔══██╗██╔════╝██║ ██║ ██╔══██╗██╔═══██╗╚██╗██╔╝
███████╗█████╗ ███████║██████╔╝██║ ███████║ ██████╔╝██║ ██║ ╚███╔╝
╚════██║██╔══╝ ██╔══██║██╔══██╗██║ ██╔══██║ ██╔══██╗██║ ██║ ██╔██╗
███████║███████╗██║ ██║██║ ██║╚██████╗██║ ██║ ██████╔╝╚██████╔╝██╔╝ ██╗
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝
*/
div[id$="gcse_0"] {
/* Center and reduce width */
margin: auto;
max-width: 800px;
}
.gsc-control-wrapper-cse::before {
/* Add title to search box */
display: block;
padding-bottom: 12px;
content: "Forum Search";
color: rgb(255, 187, 0);
font-weight: bold;
}
.gsc-input,
.gssb_c {
filter: invert(100%);
color: rgb(40, 40, 40);
}
form.gsc-search-box {
margin-bottom: 0;
}
.gsc-search-button-v2 {
background-color: black;
border: none;
}
.gsc-search-button-v2:hover {
background-color: rgb(255, 187, 0);
}
/*
███████╗ ██████╗ ██████╗ ████████╗███████╗██████╗
██╔════╝██╔═══██╗██╔═══██╗╚══██╔══╝██╔════╝██╔══██╗
█████╗ ██║ ██║██║ ██║ ██║ █████╗ ██████╔╝
██╔══╝ ██║ ██║██║ ██║ ██║ ██╔══╝ ██╔══██╗
██║ ╚██████╔╝╚██████╔╝ ██║ ███████╗██║ ██║
╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
*/
#cse {
/* Hide blue text above search box line 1 */
display: none;
}
#cse + strong {
/* Hide blue text above search box line 2 */
display: none;
}
div.page > div:nth-of-type(2) > table > tbody > tr[valign="bottom"] > td:last-of-type {
/* Hide useless forum jump dropdown */
display: none;
border: solid 1px #0f0;
}
div.page > div:nth-of-type(2) > table > tbody > tr[valign=bottom] > td:first-of-type > table {
/* Center forum rule/permission box */
margin: auto;
margin-top: 20px;
}
form[action="index.php"] > table > tbody > tr > td:first-of-type {
/* Hide style switcher since it's not needed with this theme */
display: none;
}
form[action="index.php"] > table > tbody > tr > td:last-of-type {
/* Clean up footer bar and center links */
background-color: unset;
text-align: center;
}
/*
███████╗ ██████╗ ██████╗ ███╗ ███╗███████╗
██╔════╝██╔═══██╗██╔══██╗████╗ ████║██╔════╝
█████╗ ██║ ██║██████╔╝██╔████╔██║███████╗
██╔══╝ ██║ ██║██╔══██╗██║╚██╔╝██║╚════██║
██║ ╚██████╔╝██║ ██║██║ ╚═╝ ██║███████║
╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝
*/
fieldset {
border: solid 1px rgb(40, 40, 40);
padding: 12px;
border-radius: 6px;
}
fieldset legend {
color: rgb(200, 200, 200);
}
input[class="button"],
input[type=file]::file-selector-button,
select {
background: unset;
border: unset;
background: rgb(255, 187, 0);
padding: 6px;
border-radius: 4px;
font-weight: unset !important;
}
input[class="bginput"] {
border: unset;
background-color: white;
color: black;
padding: 6px;
border-radius: 4px;
margin: 6px 0 6px 0;
}
/* Attachments */
form[action^="newattachment.php"] {
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
width: 600px;
max-width: 100%;
}
table[style="border:2px groove"],
table[style="border:2px groove"] td {
border: unset !important;
height: 20px;
margin: 6px 0 6px 0;
}
table[style="border:2px groove"] {
border-radius: 6px !important;
}
table[style="border:2px groove"] td[bgcolor="red"] {
background-color: rgb(255, 187, 0);
}
table[style="border:2px groove"] td[bgcolor="green"] {
background-color: black;
}
input[type="file"] {
background-color: unset !important;
color: rgb(200, 200, 200) !important;
}
/*
██╗ ██████╗ ██████╗ ███╗ ██╗███████╗██╗
██║██╔════╝██╔═══██╗████╗ ██║██╔════╝██║
██║██║ ██║ ██║██╔██╗ ██║███████╗██║
██║██║ ██║ ██║██║╚██╗██║╚════██║╚═╝
██║╚██████╗╚██████╔╝██║ ╚████║███████║██╗
╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝╚══════╝╚═╝
What a colossal pain in the ass.
*/
/* USER SELECTED THREAD ICONS */
img[src*="icon1."] {
content: url("data:image/svg+xml,%3Csvg width='15.999999' height='16.000002' viewBox='0 0 4.233333 4.2333338' id='svg5' inkscape:export-filename='thread_hot.svg' inkscape:export-xdpi='1086.91' inkscape:export-ydpi='1086.91' sodipodi:docname='bbq_stuff.svg' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/20...