Docs

[BlackWaves]

Hello Themeco-Team,

Im currently building my website and Im not completetly sure about the main brand color I want to use (like Amazon with it`s orange). Is there a way to change the color for all elements (Accordions, icon lists, navbar, etc.) at once via global script? Like I give everything an attribute for example called “mycolor” and give it the value #fff. When I change it to #adadad, because tomorrow I like #adadad more ;), the color of all the elements with the color-tag “mycolor” change from #fff to #adadad.

I hope you can understand what I´m trying to achieve 🙂

Thank you very much in advance!

[Rupok]

Hi there,

Thanks for writing in! It could be possible with some custom CSS. So you will just need to change some colors from Customizers CSS. Note that most of the colors (buttons, links etc.) can be chosen from Customizer as well.

Cheers!

[BlackWaves]

Hey Themeco,

thank you for your fast reply! I knew I was able to change them from the customizer, but your CSS hint helped me figure out how to change them globally without touching every site.
To help other people with a similar issue, I want just want to show the code I collected from different other topics on the forum and inserted in the global CSS.
The forum is really great and I’m so happy with the X-Theme. Thank you guys. You’re awesome!

/*Navbar*/
.x-navbar {
background-color: green;
}

/*Feature Box Icons*/
.x-feature-box-graphic i {
    background: green !important;
}

/*Accordions*/
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: green !important;
}
.x-accordion-heading .x-accordion-toggle {
background-color: green !important;
}

/*Color icon in front of headline*/
.x-accordion-heading .x-accordion-toggle:before,
.x-accordion-heading .x-accordion-toggle:hover:before,
.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: #fff;
}

[BlackWaves]

Hey!

I’ve modified it a bit more to make it even easier (stole the code from somewhere else 😉 ). Now I can change the color globally at one point. I hope this helps the community!

/*Global color*/

:root{
    --main-color: #green;  /* <-- HERE YOU CAN CHANGE THE COLOR GLOBALLY FOR EVERTHING DEFINED UNDERNEATH!*/
}

/*Navbar*/
.x-navbar {
background-color: var(--main-color);
}

/*Feature Box Icons*/
.x-feature-box-graphic i {
    background: var(--main-color) !important;
}

/*Accordions*/
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: var(--main-color) !important;
}
.x-accordion-heading .x-accordion-toggle {
background-color: var(--main-color) !important;
}

/*Color icon in front of headline*/
.x-accordion-heading .x-accordion-toggle:before,
.x-accordion-heading .x-accordion-toggle:hover:before,
.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: #fff;
}

[Christian]

Thanks for sharing.

[Author]

Posts