erlichman
asked 9 years ago

Hello people!

How to change the color of:

  1. top menu (black to my persoal color)
  2. top menu font mouse over (red/orange do my personal color)
  3. back ground footer (black to may personal color)
  4. buttons and details highlight (red/orange to my personal color)

3 Answers
DominicStaff
answered 9 years ago

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>
erlichman
replied 9 years ago

i try make it but nothing change

erlichman
answered 9 years ago

Thanks for the answer, but i can’t change this color in the picture (orange to my personal color)

DominicStaff
answered 9 years ago

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.

Powered by DW Question & Answer Pro