Hello people!
How to change the color of:
- top menu (black to my persoal color)
- top menu font mouse over (red/orange do my personal color)
- back ground footer (black to may personal color)
- buttons and details highlight (red/orange to my personal color)
3 Answers
To change color on your site, you can log in to Dashboard > Theme > Customize > General Settings > add the following code to the “Header Script”
1. Top menu
<style>
.desktop .top-news {
background: #...;
}
</style>
2. Top menu font mouse over.
If you want to change the categories color, you can add the following code to the “Header Script”.
<style>
/* business */
.navbar .nav > .color-green a:hover, .navbar .nav > .color-green a:active, .navbar .nav > .color-green a:focus {
color : #...;
}
.navbar .nav > .color-green .sub-menu .active > a {
color: #... !important;
}
/* entertainment*/
.navbar .nav > .color-violet a:hover, .navbar .nav > .color-violet a:active, .navbar .nav > .color-violet a:focus {
color: #...;
}
.navbar .nav > .color-violet .sub-menu .active > a {
color: #... !important;
}
/* Hi-tech*/
.navbar .nav > .color-blue a:hover, .navbar .nav > .color-blue a:active, .navbar .nav > .color-blue a:focus {
color: #...;
}
.navbar .nav > .color-blue .sub-menu .active > a {
color: #... !important;
}
/* Game*/
.navbar .nav > .color-yellow a:hover, .navbar .nav > .color-yellow a:active, .navbar .nav > .color-yellow a:focus {
color: #...;
}
.navbar .nav > .color-yellow .sub-menu .active > a {
color: #... !important;
}
/* Politic*/
.navbar .nav > .color-cyan a:hover, .navbar .nav > .color-cyan a:active, .navbar .nav > .color-cyan a:focus {
color: #...;
}
.navbar .nav > .color-cyan .sub-menu .active > a {
color: #... !important;
}
/* Sport*/
.navbar .nav > .color-orange a:hover, .navbar .nav > .color-orange a:active, .navbar .nav > .color-orange a:focus {
color: #...;
}
.navbar .nav > .color-orange .sub-menu .active > a {
color: #... !important;
}
/* Features*/
.navbar .nav li a:hover, .navbar .nav li a:active, .navbar .nav li a:focus {
color: #...;
}
/*Slider*/
.news-slider .carousel .carousel-inner .entry-category {
background: #...;
}
.news-slider .carousel-list .other-entry li.active {
border-left-color: #...;
}
</style>
3. Back ground footer.
<style>
#colophon.dark .container {
background: #...;
}
</style>
4. Buttons and details highlight.
<style>
.btn-danger {
background: #...;
border-color: #...;
}
.btn-danger:hover {
background: #...!important;
border-color: #... !important;
}
#colophon.dark a {
color: #...;
}
#colophon.dark a:hover {
color: #...;
}
</style>
i try make it but nothing change
Thanks for the answer, but i can’t change this color in the picture (orange to my personal color)
To resolve this issue, you can add the following code to the “Header Script”
<style>
.news-slider .carousel .carousel-inner .entry-category {
background: #...!important;
}
.news-slider .carousel-list .other-entry li.active {
border-left-color: #...!important;
}
.nav-tabs > .active > a:before, .nav-tabs > .active > a:hover:before {
border-top-color: #...!important;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
background: #...!important;
}
</style>
Or please send me your site for further checking.
Please login or Register to submit your answer