Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

Sign up now!

Tutorial CSS Re-theme for Runemate to fit forum theme

Joined
Nov 3, 2013
Messages
609
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
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;
}
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:
78Qutin.png

DOBBH3H.png

zwBCmZP.png

xIDQEid.png
 
Last edited:
Mod Automation
Joined
Jul 26, 2013
Messages
3,053
Additionally it fragments the user experience and makes it harder for us to build a brand.
 
Joined
Nov 3, 2013
Messages
609
Additionally it fragments the user experience and makes it harder for us to build a brand.
It comes down to fragmentation between users vs fragmentation between pages. So what is more important, having a cohesive site experience for the user, or having all user have the same experience? Now personally, I would go for the former since the user has to consciously decide to change the theme and the experience that you want them to have is initially shown.

Now, I don't really care if you change the site since I have my own personal fix, those are just my 2 cents. :)
 
Top