26th January 2020, 11:18 AM
I made a few modifications to the forum design to make it look more modern and clean. For a better view, right click the images and open them in a new tab. Scroll down to the bottom for the CSS code.
I also made an additional slate blue theme for myself because I'm dull and color overwhelms me
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
#navigation {
background: #0b0e10;
height: 80px;
padding-left: 40px;
padding-right: 40px;
border-bottom: 0px solid #424242;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
overflow: hidden;
min-width: 830px;
}
body {
background: #171d23;
background-size: cover;
background-attachment: fixed;
}
body {
font-family:'Quicksand', sans-serif;
background-size: cover;
background-attachment: fixed;
}
#categoryTitle {
padding: 15px;
background: #0099FF;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
border-radius: 3px 3px 0 0;
font-size: 16px;
font-weight: 700;
}
#content {
padding: 25px;
margin: 20px;
background: #101418;
word-break: break-word;
}
#categoryBox {
background: #181d23;
padding: 16px;
min-height: 50px;
border-radius: 0 0 3px 3px;
}
#playerImage img {
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#profilePictureSmall {
vertical-align: middle;
width: 30px;
border-radius: 100%;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#sidebarBox {
color: #ccc;
background: #181d23;
padding: 10px;
margin-bottom: 5px;
font-size: 15px;
border-radius: 0px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#category {
width: 45%;
min-width: 200px;
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-bottom: 10px;
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#content, #footer {
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.storyIndex {
display: inline-block;
vertical-align: top;
border-radius: 40px;
width: 60px;
height: 60px;
margin-right: 8px;
margin-bottom: 4px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#postHeader {
background: #0099FF;
padding: 18px;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
border-radius: 3px 3px 0 0;
}
#postBoxes {
background: #171d23;
border-radius: 0 0 3px 3px;
}
#postSignature {
border: 1px solid #192127;
background: #13191d;
padding: 20px;
border-radius: 3px;
}
#postSidebar {
vertical-align: top;
padding: 20px;
padding-left: 25px;
padding-right: 25px;
display: table-cell;
border-right: 1px solid #192127;
}
hr {
border: 0.5px solid #192127;
}
#postBody {
display: table-cell;
vertical-align: top;
padding: 10px;
margin-bottom: 20px;
width: 100%;
padding-left: 15px;
line-height: 22px;
border-radius: 0 0 0 3px;
}
#postPicture {
width: 120px;
border: none;
}
#postPicture img {
height: 120px;
border-radius: 0px;
border: 1px solid #192127;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#profilePicture #profileImg {
width: 100%;
max-height: inherit;
border-radius: 0px;
border: 1px solid #192127;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#postUserRepBox {
font-family:'Roboto', sans-serif;
color: white;
font-weight: 700;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
font-size: 13px;
border-radius: 5px;
padding: 7px;
width: 100px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#levelIcon {
width: 28px;
display: inline-block;
vertical-align: middle;
}
#box {
font-size: 16px;
color: #ccc;
background: #181d23;
padding: 15px;
margin-bottom: 10px;
word-break: break-word;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#userRepBox {
font-family:'Roboto', sans-serif;
color: white;
font-weight: 700;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
font-size: 14px;
border-radius: 5px;
width: 100%;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.34);
border: 1px solid rgba(0, 0, 0, 0.67);
}
#moodBody {
margin-left: 50px;
padding-top: 5px;
border-top: 0.5px solid #192127;
}
#footer {
padding: 10px;
padding-left: 30px;
margin: 20px;
background: #101418;
text-align: left;
color: #ccc;
}
.postRepBox {
font-family:'Roboto', sans-serif;
color: white;
font-weight: bold;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
font-size: 12px;
border-radius: 4px;
padding: 2px;
width: 45px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.67);
text-align: center;
}
#discussionMini {
display: inline-block;
vertical-align: top;
margin: 3px;
margin-right: 0px;
padding: 5px;
color: white;
background: #0099FF;
font-size: 14px;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
font-weight: 700;
}
.storyIndex.unviewed {
border: 2px solid #b400ff;
}
.storyIndex.featured {
border: 2px solid #ffcc00;
}
#bubble {
font-size: 16px;
color: #ccc;
background: #181d23;
padding: 15px;
margin-bottom: 10px;
word-break: break-word;
}
.bbcode_bubble {
font-size: 16px;
color: #ccc;
background: #181d23;
padding: 15px;
margin-bottom: 10px;
word-break: break-word;
}
.wikiSidebar {
width: 30%;
float: right;
min-width: 300px;
display: inline-block;
vertical-align: top;
background: #181d23;
padding: 15px;
}
.bbcode_img {
max-width: 700px;
padding: 4px;
border: 1px solid #192127;
margin-top: 15px;
margin-bottom: 15px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.wikiContents {
line-height: 20px;
font-size: 15px;
padding: 10px;
border: 1px solid #192127;
width: 340px;
margin-right: 15px;
margin-bottom: 15px;
}
.bbcode_td {
background: #171d23;
padding: 6px;
min-width: 100px;
font-size: 14px;
}
#editProfileImage {
display: inline-block;
vertical-align: top;
margin-right: 30px;
width: 100px;
background: #0a0e0f;
padding: 10px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
border: 1px solid #192127;
}
#tf {
outline: none;
background: none;
color: white;
border: none;
font-size: inherit;
border-bottom: 1px solid #192127;
font-family: inherit;
padding: 5px;
padding-bottom: 10px;
margin-bottom: 15px;
width: 350px;
min-width: 10%;
max-width: 100%;
text-align: inherit;
border-radius: 0px;
}
.bbcode_quote {
margin-bottom: 10px;
padding: 20px;
background: #1e252b;
border-left: 0.5px solid #008dff;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#imageIcon {
display: inline-block;
margin-right: 10px;
vertical-align: top;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#buttonLink:hover {
padding-bottom: 5px;
border-bottom: 0.5px solid #008dff;
}
#bl:hover {
padding-bottom: 5px;
border-bottom: 0.5px solid #008dff;
}
.richText {
min-width: 400px;
min-height: 40px;
height: 120px;
width: 100%;
resize: vertical;
outline: none;
background: none;
color: white;
border: none;
font-size: inherit;
border-bottom: 0.5px solid #192127;
font-family: inherit;
padding: 5px;
padding-bottom: 10px;
margin-bottom: 10px;
text-align: inherit;
border-radius: 0px;
}
.richText:focus {
padding-bottom: 10px;
border-bottom: 0.5px solid #008dff;
}
select {
border: none;
border-bottom: 0.5px solid #192127;
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
padding: 8px;
color: white;
min-width: 350px;
outline: none;
font-family: inherit;
font-size: inherit;
background: url('/images/selectArrow.png') no-repeat right;
cursor: hand;
}
.unreadNotification {
border-left: 0.5px solid #eb0000;
background: #181d23;
margin-bottom: 10px;
}
.month {
background: #181d23;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
padding: 10px;
width: 280px;
min-height: 200px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#thisMonth {
border-top: 0.5px solid #006bff;
}
.day {
padding: 5px;
width: 20px;
display: inline-block;
vertical-align: top;
margin: 2px;
text-align: center;
border: 0.5px solid #192127;
}
#today {
color: #eb0000;
border: 0.5px solid #eb0000;
}
#chatBox {
background: #181d23;
width: 100%;
height: 560px;
}
#userBox {
background: #181d23;
width: 100%;
margin-top: 10px;
min-height: 100px;
}
#queueBox {
background: #181d23;
width: 100%;
margin-top: 10px;
font-size: 14px;
min-height: 100px;
}
#lcdContainer {
background: #181d23;
width: 100%;
height: 100%;
}
#navigation {
background: #0b0e10;
height: 80px;
padding-left: 40px;
padding-right: 40px;
border-bottom: 0px solid #424242;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
overflow: hidden;
min-width: 830px;
}
body {
background: #171d23;
background-size: cover;
background-attachment: fixed;
}
body {
font-family:'Quicksand', sans-serif;
background-size: cover;
background-attachment: fixed;
}
#categoryTitle {
padding: 15px;
background: #0099FF;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
border-radius: 3px 3px 0 0;
font-size: 16px;
font-weight: 700;
}
#content {
padding: 25px;
margin: 20px;
background: #101418;
word-break: break-word;
}
#categoryBox {
background: #181d23;
padding: 16px;
min-height: 50px;
border-radius: 0 0 3px 3px;
}
#playerImage img {
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#profilePictureSmall {
vertical-align: middle;
width: 30px;
border-radius: 100%;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#sidebarBox {
color: #ccc;
background: #181d23;
padding: 10px;
margin-bottom: 5px;
font-size: 15px;
border-radius: 0px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#category {
width: 45%;
min-width: 200px;
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-bottom: 10px;
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#content, #footer {
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.storyIndex {
display: inline-block;
vertical-align: top;
border-radius: 40px;
width: 60px;
height: 60px;
margin-right: 8px;
margin-bottom: 4px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#postHeader {
background: #0099FF;
padding: 18px;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
border-radius: 3px 3px 0 0;
}
#postBoxes {
background: #171d23;
border-radius: 0 0 3px 3px;
}
#postSignature {
border: 1px solid #192127;
background: #13191d;
padding: 20px;
border-radius: 3px;
}
#postSidebar {
vertical-align: top;
padding: 20px;
padding-left: 25px;
padding-right: 25px;
display: table-cell;
border-right: 1px solid #192127;
}
hr {
border: 0.5px solid #192127;
}
#postBody {
display: table-cell;
vertical-align: top;
padding: 10px;
margin-bottom: 20px;
width: 100%;
padding-left: 15px;
line-height: 22px;
border-radius: 0 0 0 3px;
}
#postPicture {
width: 120px;
border: none;
}
#postPicture img {
height: 120px;
border-radius: 0px;
border: 1px solid #192127;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#profilePicture #profileImg {
width: 100%;
max-height: inherit;
border-radius: 0px;
border: 1px solid #192127;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#postUserRepBox {
font-family:'Roboto', sans-serif;
color: white;
font-weight: 700;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
font-size: 13px;
border-radius: 5px;
padding: 7px;
width: 100px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#levelIcon {
width: 28px;
display: inline-block;
vertical-align: middle;
}
#box {
font-size: 16px;
color: #ccc;
background: #181d23;
padding: 15px;
margin-bottom: 10px;
word-break: break-word;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#userRepBox {
font-family:'Roboto', sans-serif;
color: white;
font-weight: 700;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
font-size: 14px;
border-radius: 5px;
width: 100%;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.34);
border: 1px solid rgba(0, 0, 0, 0.67);
}
#moodBody {
margin-left: 50px;
padding-top: 5px;
border-top: 0.5px solid #192127;
}
#footer {
padding: 10px;
padding-left: 30px;
margin: 20px;
background: #101418;
text-align: left;
color: #ccc;
}
.postRepBox {
font-family:'Roboto', sans-serif;
color: white;
font-weight: bold;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
font-size: 12px;
border-radius: 4px;
padding: 2px;
width: 45px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.67);
text-align: center;
}
#discussionMini {
display: inline-block;
vertical-align: top;
margin: 3px;
margin-right: 0px;
padding: 5px;
color: white;
background: #0099FF;
font-size: 14px;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
font-weight: 700;
}
.storyIndex.unviewed {
border: 2px solid #b400ff;
}
.storyIndex.featured {
border: 2px solid #ffcc00;
}
#bubble {
font-size: 16px;
color: #ccc;
background: #181d23;
padding: 15px;
margin-bottom: 10px;
word-break: break-word;
}
.bbcode_bubble {
font-size: 16px;
color: #ccc;
background: #181d23;
padding: 15px;
margin-bottom: 10px;
word-break: break-word;
}
.wikiSidebar {
width: 30%;
float: right;
min-width: 300px;
display: inline-block;
vertical-align: top;
background: #181d23;
padding: 15px;
}
.bbcode_img {
max-width: 700px;
padding: 4px;
border: 1px solid #192127;
margin-top: 15px;
margin-bottom: 15px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.wikiContents {
line-height: 20px;
font-size: 15px;
padding: 10px;
border: 1px solid #192127;
width: 340px;
margin-right: 15px;
margin-bottom: 15px;
}
.bbcode_td {
background: #171d23;
padding: 6px;
min-width: 100px;
font-size: 14px;
}
#editProfileImage {
display: inline-block;
vertical-align: top;
margin-right: 30px;
width: 100px;
background: #0a0e0f;
padding: 10px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
border: 1px solid #192127;
}
#tf {
outline: none;
background: none;
color: white;
border: none;
font-size: inherit;
border-bottom: 1px solid #192127;
font-family: inherit;
padding: 5px;
padding-bottom: 10px;
margin-bottom: 15px;
width: 350px;
min-width: 10%;
max-width: 100%;
text-align: inherit;
border-radius: 0px;
}
.bbcode_quote {
margin-bottom: 10px;
padding: 20px;
background: #1e252b;
border-left: 0.5px solid #008dff;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#imageIcon {
display: inline-block;
margin-right: 10px;
vertical-align: top;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#buttonLink:hover {
padding-bottom: 5px;
border-bottom: 0.5px solid #008dff;
}
#bl:hover {
padding-bottom: 5px;
border-bottom: 0.5px solid #008dff;
}
.richText {
min-width: 400px;
min-height: 40px;
height: 120px;
width: 100%;
resize: vertical;
outline: none;
background: none;
color: white;
border: none;
font-size: inherit;
border-bottom: 0.5px solid #192127;
font-family: inherit;
padding: 5px;
padding-bottom: 10px;
margin-bottom: 10px;
text-align: inherit;
border-radius: 0px;
}
.richText:focus {
padding-bottom: 10px;
border-bottom: 0.5px solid #008dff;
}
select {
border: none;
border-bottom: 0.5px solid #192127;
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
padding: 8px;
color: white;
min-width: 350px;
outline: none;
font-family: inherit;
font-size: inherit;
background: url('/images/selectArrow.png') no-repeat right;
cursor: hand;
}
.unreadNotification {
border-left: 0.5px solid #eb0000;
background: #181d23;
margin-bottom: 10px;
}
.month {
background: #181d23;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.15);
padding: 10px;
width: 280px;
min-height: 200px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#thisMonth {
border-top: 0.5px solid #006bff;
}
.day {
padding: 5px;
width: 20px;
display: inline-block;
vertical-align: top;
margin: 2px;
text-align: center;
border: 0.5px solid #192127;
}
#today {
color: #eb0000;
border: 0.5px solid #eb0000;
}
#chatBox {
background: #181d23;
width: 100%;
height: 560px;
}
#userBox {
background: #181d23;
width: 100%;
margin-top: 10px;
min-height: 100px;
}
#queueBox {
background: #181d23;
width: 100%;
margin-top: 10px;
font-size: 14px;
min-height: 100px;
}
#lcdContainer {
background: #181d23;
width: 100%;
height: 100%;
}
I also made an additional slate blue theme for myself because I'm dull and color overwhelms me
Still Mink
Member
1,163 posts
2,853
Seen 15th August 2023
Still Mink
Member
1,163 posts
2,853
Seen 15th August 2023