26th January 2020
59 views

Modern Forum Revamp

Made by Luke in Inventions

Master
5,463 posts
9,577
Seen 11th January 2023
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.




























@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%;
}

I also made an additional slate blue theme for myself because I'm dull and color overwhelms me

9

+1 by sparrow, zelda, Brit, isaac and 5 others

Banned
1,602 posts
9
Seen 10th November 2024
26th January 2020, 11:33 AM

kinda like this better than the original forums
3

+1 by Luke, isaac and Jake01

i’m rigby, shut up
Member
348 posts
637
Seen 31st August 2023
26th January 2020, 02:58 PM

Yes we need this design
3

+1 by Luke, Jake01 and Narcissa
rigby
professional slay

Rap Diablo
Master
3,463 posts
2,848
Seen 30th September 2022
26th January 2020, 05:37 PM

this is pretty epic not gonna lie
2

+1 by Luke and Narcissa

Still Mink
Member
1,163 posts
2,853
Seen 15th August 2023
26th January 2020, 09:00 PM

The only thing I really notice is a change in font.
1

+1 by Narcissa

Still Mink
Member
1,163 posts
2,853
Seen 15th August 2023
26th January 2020, 09:00 PM

The only thing I really notice is a change in font.
0

im not religious
Member
538 posts
1,193
Seen 5th October 2024
17th February 2020, 02:12 PM

I like the grey in the design, but other than that, I can’t seem to see a difference. But that may just be me. ha
1

+1 by Elite

Login or join the forums to reply.