- Joined
- Nov 3, 2013
- Messages
- 609
- Thread Author
- #1
I prefer the dark theme quark on the forums, and there was a disconnect with the rest of the site, so I figured I that I would write a couple css changes to make the rest of the site work better with it.
What you need: css injector extension for your desired browser. (I used the Styler extension on Chrome).
Then simply add the following CSS to Runemate.com
Update (12/15/2014):
1. Buttons have been cleaned up a bit
2. Changed a couple of text colors to look less green.
3. Better support features sections.
4. Better support for the footer.
5. Bot Store no longer has grey text on grey backgrounds meaning it is actually readable.
6. Better support for the donate page.
7. Altered the ribbons on the bot store page
My mac is refusing to take a screen shot right now, but in my opinion this looks a lot better than the actual site when used in conjunction with quark. I'm still working on proper text coloring and a few other colors on the bot store page, and I'll post those changes when I make.
Edit: I found the screenshots:
What you need: css injector extension for your desired browser. (I used the Styler extension on Chrome).
Then simply add the following CSS to Runemate.com
body{
color: #A3A3A3
}
span.bot-description{
color: #A3A3A3;
}
.bg-one, .bg-one-fixed{
background-image: none;
background-color: #181818;
background-repeat: repeat-y;
}
.main-nav a{
color: #A3A3A3;
}
.main-nav a:hover{
color: white;
}
.green-button{
color: #17687C;
background-color: #101010;
border-bottom: none;
}
.green-button:hover{
color: #E8E8E8;
background-color: #303030;
}
.main-nav .selected-nav{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #17687C;
}
.main-nav .selected-nav:hover{
background-color: #303030;
box-shadow: 0 1px 0 #101010;
color: #27788C;
}
.main-nav .get-started-btn{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #17687C;
}
.main-nav .get-started-btn:hover{
background-color: #303030;
box-shadow: 0 1px 0 #101010;
color: #27788C;
}
#adj{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #27788C;
//color: rgb(253,196,79);
}
#rm{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #27788C;
//color: rgb(121,209,176);
}
h2.intro-header{
color: #A3A3A3;
}
footer, .item-vanity, .bg-two, .features{
background-image: none;
background-color: #181818;
}
.features p{
color: #27788C;
}
.item-data, .ribbon{
background-color: #181818;
color: #17687C;
}
.ribbon{
background-color: #101010;
color: #17687C;
}
.item-vanity .header{
color: #27788C;
}
color: #A3A3A3
}
span.bot-description{
color: #A3A3A3;
}
.bg-one, .bg-one-fixed{
background-image: none;
background-color: #181818;
background-repeat: repeat-y;
}
.main-nav a{
color: #A3A3A3;
}
.main-nav a:hover{
color: white;
}
.green-button{
color: #17687C;
background-color: #101010;
border-bottom: none;
}
.green-button:hover{
color: #E8E8E8;
background-color: #303030;
}
.main-nav .selected-nav{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #17687C;
}
.main-nav .selected-nav:hover{
background-color: #303030;
box-shadow: 0 1px 0 #101010;
color: #27788C;
}
.main-nav .get-started-btn{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #17687C;
}
.main-nav .get-started-btn:hover{
background-color: #303030;
box-shadow: 0 1px 0 #101010;
color: #27788C;
}
#adj{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #27788C;
//color: rgb(253,196,79);
}
#rm{
background-color: #101010;
box-shadow: 0 1px 0 #101010;
color: #27788C;
//color: rgb(121,209,176);
}
h2.intro-header{
color: #A3A3A3;
}
footer, .item-vanity, .bg-two, .features{
background-image: none;
background-color: #181818;
}
.features p{
color: #27788C;
}
.item-data, .ribbon{
background-color: #181818;
color: #17687C;
}
.ribbon{
background-color: #101010;
color: #17687C;
}
.item-vanity .header{
color: #27788C;
}
1. Buttons have been cleaned up a bit
2. Changed a couple of text colors to look less green.
3. Better support features sections.
4. Better support for the footer.
5. Bot Store no longer has grey text on grey backgrounds meaning it is actually readable.
6. Better support for the donate page.
7. Altered the ribbons on the bot store page
My mac is refusing to take a screen shot right now, but in my opinion this looks a lot better than the actual site when used in conjunction with quark. I'm still working on proper text coloring and a few other colors on the bot store page, and I'll post those changes when I make.
Edit: I found the screenshots:




Last edited: