Change the color of Integrity 'dark'

[landrenic]

Greetings!

I have Integrity running with a Child theme. It is set to ‘dark’. Where / how can I select what that ‘dark’ color is supposed to be? I’ve set colors in the ‘Templates’ area under ‘Launch’, but it had no effect on the header on the pages. I need to change the header from black to a different ‘dark’ color.

Thank you in advance.

[jade]

Hi there,

The Design color in the theme options will set the site colors to a predefined value set in a CSS file which you can find in

/wp-content/themes/x/framework/css/dist/site/stacks/integrity-dark.css

This file is minified but you can get it unminified here.

You can then override the CSS using your own custom CSS.

Hope this gives you an idea.

[landrenic]

Well, it gives me an idea. But honestly, I’m not sure which code in here references the background color of the header area and the footer area. I’ve tried a few things to no avail, so I’d be appreciative if you could give me which bit and I can run with it from there. I’m assuming I put this in the ‘additional css’ area? Thanks in advance.

[ruenel]

Hello There,

Thank you for the clarifications. If you just want to change the background colors of some parts of the theme with Dark Integrity stack, for example for the header, simply add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
    border-color: transparent;
    background-color: #00a580;
}

Please change #00a580 to something dark color that will suit for your site.

Hope this helps.

[landrenic]

Works like magic! Thanks for that.

There are a few other areas where I need to make color adjustments. Some of this can be solved if I switch to the ‘light’ rather than ‘dark’ theme option. However, I still need to change:
background color of the sub navigation of the main menu
background color of the footer area
background color and text color of the footer widget area

If you could let me know what code I need to change for that, it would be most helpful. My experiments thus far have netted me nothing but frustration.

Just thought: It’s a bit frustrating to have to make these modifications at a css level, rather than as part of the typical customization for the theme…I’m sure there’s a reason for it, but as a person trying to customize a site quickly, it’s not particularly friendly. Having the option of ‘light’ or ‘dark’ with no way to change those particular colors without knowing coding is rather intimidating! I’m not a super coder, I can get by when pointed in the right direction, but having to try and figure out what needs to change where is quite time consuming. I’ve spent hours trying to ‘fix’ this site for my client when it really should have taken me minutes. I hope in some way this can be addressed in the future! In the meantime … thank you for your assistance and patience with my questions.

[christopher]

Hi there,

The Integrity stack is coded to have those 2 Dark/Light mode. It will be helpful to have options for each color changes but it is impractical from our point of view to populate too many options for the performance reasons.

Having a multipurpose theme is a great starter for website development but even the most sophisticated, complicated and full of options theme will fail you in some place. So I strongly suggest that you strengthen your CSS skills anyway to get around simple tasks which themes do not give you enough customization options. I suggest that you start with the Google Chrome Developer toolbar to find out proper selectors for your CSS code:

We certainly inform our development team regarding your input for sure.

Here is the code for your request:

.desktop .sub-menu {
    background-color: #ff00ff;
}

.x-colophon.top, .x-colophon.bottom {
    background-color: #ff00ff;
    border: none;
}

.x-colophon.top .x-column .widget {
    background-color: #ff00ff;
    color: #00ff00
}

Thank you.

[landrenic]

I really appreciate your help. I do try using these tools … sometimes I figure it out, sometimes I get nowhere. You have saved me a lot of time. Truly appreciate your assistance!

[nabeel]

Glad we could help

Cheers!