Hidden 2 yrs ago Post by KoL
Raw
OP
Avatar of KoL

KoL Knight of Lorelei

Member Seen 27 days ago

Let me preface that, normally, I don't post in this kind of thread so, I may or may not reply in a timely manner to anything coming from this.

With that said, I took a look at this thread with some compiled suggestions for the future of the Guild (which will likely never get implemented if we are being realistic). Which reminded me that I was working on a stylesheet for guild the other day (the kind you can load on a browser extension like Stylish and change the site's CSS style). It kinda shows that, if someone wanted to, the Guild's design wouldn't be unsalvageable.

Bear in mind that this is in a very, very alpha stage and only really works on main posting threads. The guild's HTML is a mess with a lot of hardcoded values that really didn't need to be there, but simply changing the site to a more modern color palette like Nord and removing some of abundant the sharp angles, can make it so much easier on the eyes.

If anyone else wants to take a look at how it's the CSS is down bellow, just load it on your favorite stylesheet editing extension and navigate to an RP thread, and yo should see how even a few simple changes can make the site more user friendly in terms of looks (and customizable to the user's taste at that).

body {
background-color: #2E3440;
color: #D8DEE9;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: justify;
}

.forum-tabs>li.active>a, .forum-tabs>li.active>a:focus, .forum-tabs>li.active>a:hover, .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .topic-tabs>li.active>a, .topic-tabs>li.active>a:focus, .topic-tabs>li.active>a:hover {
border: 0;
}

.topic-tabs>li.active>a, .topic-tabs>li.active>a:focus, .topic-tabs>li.active>a:hover, .topic-tabs>li>a, .topic-tabs>li>a:focus, .topic-tabs>li>a:hover {
padding-bottom: 20px;
}

.nav-tabs>li>a {
margin-right: 5px;
line-height: 1.5;
border-radius: 10px;
padding-bottom: 20px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
background-color: #3B4252;
color: #D8DEE9;
font-weight: 500;
}

.bb-h1 {
font-family: sans-serif;
margin-top: 0;
}

.bb-h2 {
font-family: sans-serif;
margin-top: 0;
}

.bb-h3 {
font-family: sans-serif;
margin-top: 0;
}

.panel {
border: 0 !important;
background-color: #2E3440;
}

.panel-heading {
border-radius: 15px 15px 0 0 !important;
background-color: #3B4252 !important;
border: 0 !important;
margin-top: 5px !important;
}

.panel-body {
background-color: #3B4252 !important;
padding: 0;
}

.panel-footer {
border-radius: 0 0 15px 15px !important;
background-color: #3B4252 !important;
border: 0 !important;
margin-bottom: 10px !important;
}

.well {
background-color: #2E3440 !important;
border: 0;
box-shadow: 0 0 0 0;
}
Hidden 2 yrs ago Post by KoL
Raw
OP
Avatar of KoL

KoL Knight of Lorelei

Member Seen 27 days ago

PS: By the way. If anyone feels like it, just change and improve it to your own tastes. If you can post the result back here, it would be even better, so we can improve the guild's look and feel little by little.
Hidden 2 yrs ago Post by CamiCat
Raw
Avatar of CamiCat

CamiCat Mad

Member Seen 8 mos ago

Here's one similar enough to the base colour palette suited towards my monitor, one can always make edits if they desire. I'll be making edits and changes in the future, but this CSS gives me hemmerhoids




For those of you not looking to make edits but still want one that fits your screen, here you go:




↑ Top
© 2007-2024
BBCode Cheatsheet