Tutorial CSS Re-theme for Runemate to fit forum theme

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

  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
    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. That's probably why :p
     
  3. Nah man, it was taking them, I just thought I had puush installed, turns out they were all just on my desktop.
     
  4. 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.
     
  5. Additionally it fragments the user experience and makes it harder for us to build a brand.
     
  6. 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...