Tutorial CSS Re-theme for Runemate to fit forum theme

Discussion in 'Tutorials & Resources' started by Exia, Dec 13, 2014.

  1. Exia

    Joined:
    Nov 3, 2013
    Messages:
    596
    Likes Received:
    242
    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:
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
     
    #1 Exia, Dec 13, 2014
    Last edited: Dec 16, 2014
  2. Baddest Man on Earth

    Joined:
    Nov 26, 2014
    Messages:
    610
    Likes Received:
    242
    That's probably why :p
     
  3. Exia

    Joined:
    Nov 3, 2013
    Messages:
    596
    Likes Received:
    242
    Nah man, it was taking them, I just thought I had puush installed, turns out they were all just on my desktop.
     
  4. Cloud

    Cloud The Developer

    Joined:
    Jul 28, 2013
    Messages:
    2,320
    Likes Received:
    744
  5. Exia

    Joined:
    Nov 3, 2013
    Messages:
    596
    Likes Received:
    242
    I talked to him, and sadly he said that it's probably not viable right now since it's more options to test new features against.
     
  6. Arbiter

    Arbiter Mod Automation

    Joined:
    Jul 26, 2013
    Messages:
    2,510
    Likes Received:
    1,035
    Additionally it fragments the user experience and makes it harder for us to build a brand.
     
  7. Exia

    Joined:
    Nov 3, 2013
    Messages:
    596
    Likes Received:
    242
    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. :)
     

Share This Page

Loading...