Dark Frontier Re-color

Nova includes a new and robust way of skinning the entire system without ever touching the core of the application. If you have questions about how to build a theme for Nova, how to modify a theme or you just want to show off your work, this is the place to do it!

solen.mkv Tue Jul 28, 2015 1:32 am

Dark Frontier Re-color

Hello.

I'm extremely new to Nova and I love the skins, some excellent work here. However I'm trying to see if I could make some slight modifications to the Dark Frontier skin. Instead of a green, how/where do I edit to change the color to a red and the body text to white?

I have a player who has difficulty with vision so I'm seeking a high contrast, yet sleek and modern interface that will give a subtle Klingon appeal. If someone else has other alternatives I'm open to suggestions! Over time I'd like to further tailor the site by adding custom banners and things, but that is down the road.

Thank you for your time and any offers of suggestions here.

-Solen

Posts: 4


AgentPhoenix Tue Jul 28, 2015 6:56 am

Re: Dark Frontier Re-color

Just be careful about using black and red together for people with vision difficulty. Specifically, people who are color blind can sometimes have a hard time distinguishing between the two colors (based on the severity of their color blindness).
User avatar

Posts: 7577


solen.mkv Tue Jul 28, 2015 12:29 pm

Re: Dark Frontier Re-color

Agreed. I began looking at alternative options as well. I was more thinking the lines of red, but the text for white. This person vision issue relates to focus primarily. Colors register, but the better the sizing or the contrast the easier to read.

The Yorktown Blue is really clean and I think could work, but it's Federation Blue. Blind Klingon love is needed ;)

I'm going to keep working to help them out as I try to learn how to mod things in the skin. You are quite correct that black/red can be a challenge at best.

AgentPhoenix wrote:Just be careful about using black and red together for people with vision difficulty. Specifically, people who are color blind can sometimes have a hard time distinguishing between the two colors (based on the severity of their color blindness).

Posts: 4


Williams Tue Jul 28, 2015 4:39 pm

Re: Dark Frontier Re-color

To modify the colours, you'll need to go and make some small edits to the skin.css files for the skins.

For changing the colour of the main text, you should be able to edit the 'color: ' parameter under the 'body {' section.

For the DarkFrontier skin, this is the section to change the colour of the body text (it's right at the top of the skin.css file):

Code: Select all
body {
    background: rgba(0, 0, 0, 0) url("../images/stars_back_main.gif") repeat scroll 0 0;
    color: #7ca07c;
    font: 75%/1.5 "lucida grande",verdana,arial,sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}


To make the font pure white, change 'color' from #7ca07c to #fff. If you want to change the body colour on most skins you'll find that in the same place.

To change the green to red you're going to have to do a bit more searching. The main section at the top can be changed by editing the following section:

Code: Select all
#upper-body {
    background: #10280c url("../images/upper-body-bg.png") no-repeat scroll 0 0;
    border-radius: 5px 5px 0 0;
    height: 130px;
    margin-bottom: -10px;
    position: relative;
}


Here you need to change the 'background' hex colour value. However there are other sections throughout the skin that also use a green colour that you'll need to find. Doing a quick skim through the file, the following sections would need to be edited (there may be more):

Code: Select all
.content {
    border-color: #10280c -moz-use-text-color;
}


Also in the jquery.ui.tabs.css (the bit that controls the tabs for the latest news/posts/logs and so on):

Code: Select all
.ui-tabs-nav a {
    background: #567456 none repeat scroll 0 0;
    border-color: #10280c #10280c -moz-use-text-color;
    color: #7ca07c;
}


Code: Select all
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav .ui-tabs-selected a:hover {
    background: #10280c url("../images/gradient-soft-30.png") repeat-x scroll left center;
    border-color: #10280c #10280c -moz-use-text-color;
}


Code: Select all
.ui-tabs-nav a:hover, .ui-tabs-nav a:active {
    background: #19371a none repeat scroll 0 0;
    border-left: 1px solid #10280c;
    border-right: 1px solid #10280c;
    border-top: 1px solid #10280c;
    color: #7ca07c;
}


Code: Select all
.ui-tabs-panel {
    border-top: 3px solid #10280c;
}


That's not a conclusive list, but should hit the majority of the green areas. You'll have to make those changes on the skin files for all sections (main, login, admin and wiki), since they each use separate files.

If you're not sure what part of the CSS code you need to modify, I recommend using something like Firebug, where you can right-click and 'inspect element' - that will show you on the right hand side what CSS rules it is pulling in, from what file, and under which section you need to look. You should be able to use that to figure out what blue sections you would need to change on the Yorktown Blue skin to make it red.


A good resource for figuring out what hex codes to use for colours (the code with a # at the start) is http://www.w3schools.com/tags/ref_colorpicker.asp - just pick the colour you want, and it should display the hex codes to you to help you make it happen.
Matt aka
Krace / Williams

USS HighlanderMy Xtras Profile
ImageImage

Posts: 288



Return to Skinning

Who is online

Users browsing this forum: No registered users and 1 guest

cron