How do I change color of header, buttons, menu bar, etc using Custom CSS Plugin?

Hello @lsm89

What ever is the theme your using, when you want to use any custom CSS plugin, you have to :
1- Target the element you want to change
2- Add rules for this element

So you have to write CSS !
Do you know CSS ?
If not, I recommend you to learn CSS

SYA ??

Follow below Steps:

1. Login As Admin and click on customize form front-end.
Screenshot->

2. Go to Theme Options -> Theme General Options and put below css code into Custom css Box

.header_section{
background-color:#000080;
}
.navigation_menu{
border-top-color : #000080;
}
.navbar-default .navbar-nav  .active  a, .navbar-default .navbar-nav  .active a:hover, .navbar-default .navbar-nav .active a:focus, .dropdown-menu .active a {
background-color:#000080;
}
.carousel-list li{
background-color:#000080;
}
.enigma_blog_read_btn {
background-color:#000080;
background-image: linear-gradient(to bottom, #000080 50%, #fff 50%);
border-color:#000080;
}
.enigma_blog_read_btn:hover{
color:#000080;
}
.enigma_heading_title h3{
border-bottom-color:#000080;
}
.enigma_service_iocn {
    border-color: #000080;
    background-color: #000080;
    background-image: linear-gradient(to bottom, #000080 50%, #fff 50%);
}
.enigma_service_area:hover .enigma_service_iocn i{
color:#000080;
}
a{
color:#000080;
}
a:hover, a:focus{
color:#00005b;
}
.enigma_callout_area{
background-color:#000080;
}
.enigma_blog_thumb_wrapper h2 a{
color:#000080;
}
.enigma_blog_thumb_wrapper h2 a:hover {
color:#00005b;
}
.enigma_blog_thumb_date li i{
color:#000080;
}
.enigma_blog_thumb_wrapper{
border-bottom-color:#000080;
}
.enigma_carousel-prev, .enigma_carousel-next{
border-color:#000080;
color:#000080;
}
.enigma_carousel-prev i, .enigma_carousel-next i{
color:#000080;
}
.enigma_carousel-prev:hover, .enigma_carousel-next:hover{
background-color:#000080;
}
.enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a{
background-color:#000080;
color:#fff;
}
.enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a:hover{
border-color:#000080;
background-color:#fff;
color:#000080;
}
.enigma_footer_area{
background-color:#000080;
color:#fff;
}
.navbar-default .navbar-nav  .open  a, .navbar-default .navbar-nav  .open  a:hover, .navbar-default .navbar-nav  .open  a:focus{
background-color:#000080;
}
.navbar-default .navbar-nav  li  a:hover, .navbar-default .navbar-nav  li  a:focus{
background-color:#000080;
}
.dropdown-menu  li  a:hover, .dropdown-menu  li  a:focus{
background-color:#ffffff !important;
}
.breadcrumb li a{
color:#000080 !important;
}
.enigma_sidebar_widget_title{
background-color:#000080;
}
.enigma_sidebar_widget{
border-color:#000080;
}
.enigma_fuul_blog_detail_padding h2 a, .enigma_fuul_blog_detail_padding h2{
color:#000080;
}
.enigma_fuul_blog_detail_padding h2 a:hover{
color:#00005b;
}
.enigma_post_date{
background-color:#000080;
}
.enigma_tags a:hover, .enigma_cats a:hover{
background-color:#000080;
}
.enigma_tags a, .enigma_cats a{
background-image:linear-gradient(to bottom, #edf0f2 50%, #000080 50%);
}
.enigma_blog_comment:hover i, .enigma_blog_comment:hover h6{
color:#000080;

}

Let me know incase of any query/concern.

Hello,

Firstly make a child theme from HERE.

Then dequeue your default.css and enqueue new CSS with your changing color code #000080 and change this new CSS name navi blue.css

• This reply was modified 8 years ago by weblizar_support.
• This reply was modified 8 years ago by weblizar_support.