Changing color of theme header, footer and rest of the site.
-
Hi !
I have installed free version of enigma theme. I want to change the colors of header, footer and rest of the site. I am having a little clue of changing the color of header and footer but I am unable to change the color of the font. Please help.Thanks in advance.
-
In your default.css, find and replace #31A3DD with the color you want then change the rgba of;
.carousel-list li { background: rgba(49, 162, 221, 0.8); }
Try this;
#wrapper{ background: #ffffff; } /* header contact info section ***/ .header_section{ background-color:#00cc99; color:#fff; } /** navbar menus ***/ .navigation_menu{ background-color: #fff; border-top:2px solid #00cc99; } .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: #00cc99; } .collapse ul.nav li.current-menu-parent .dropdown-toggle, .collapse ul.nav li.current-menu-item .dropdown-toggle, .navbar-default .navbar-collapse ul.nav li.current-menu-parent .dropdown-toggle,.navbar-default .navbar-collapse ul.nav li.current-menu-item .dropdown-toggle .collapse ul.nav li.current_page_ancestor .dropdown-toggle,.collapse ul.nav li.current_page_ancestor .dropdown-toggle, .navbar-default .navbar-collapse ul.nav li.current_page_ancestor .dropdown-toggle,.navbar-default .navbar-collapse ul.nav li.current_page_ancestor .dropdown-toggle { background-color: #00cc99; box-shadow: 3px 3px 0 rgba(201, 201, 201, 1); color: #fff !important; border-radius:0px; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #00cc99; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #00cc99; } .dropdown-menu { background-color: rgba(49, 162, 221, 0.9); } /** headings titles css ***/ .enigma_heading_title h3 { border-bottom: 4px solid #00cc99; color: #3b3b3b; } .enigma_heading_title2 h3 { border-bottom: 2px solid #00cc99; color: #3b3b3b; } /** slider css ***/ .carousel-list li { background:rgba(0, 204, 153, 0.8); } /** service section css ***/ .enigma_service_iocn{ border: 4px solid #00cc99; background-color:#00cc99; background-size: 100% 200%; background-image: linear-gradient(to bottom, #00cc99 50%, #fff 50%); } .enigma_service_area:hover .enigma_service_iocn i { color:#00cc99; } .enigma_service_area:hover .enigma_service_iocn{background-color:#ffffff;} .enigma_service_iocn_2 i{ background: #fff; border: 4px solid #00cc99; } .enigma_service_iocn_2 i{ color: #00cc99; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%); } /****************portfolio css ******************************************************** ********************************************************************************/ .enigma_home_portfolio_showcase .enigma_home_portfolio_showcase_icons a { background-color: #00cc99; border:2px solid #00cc99; color:#fff; } .enigma_home_portfolio_showcase .enigma_home_portfolio_showcase_icons a:hover{ background-color: #ffffff; border:2px solid #00cc99; color:#00cc99; } .enigma_home_portfolio_caption { border-left:1px solid #ccc; border-bottom:4px solid #00cc99; border-right:1px solid #ccc; } .enigma_home_portfolio_caption:hover{ background: #00cc99; } .enigma_home_portfolio_caption:hover h3 a ,.enigma_home_portfolio_caption:hover small{ color: #ffffff; } .img-wrapper:hover .enigma_home_portfolio_caption{ background: #00cc99; border-left:1px solid #00cc99; border-bottom:4px solid #00cc99; border-right:1px solid #00cc99; } .img-wrapper:hover .enigma_home_portfolio_caption h3 a,.img-wrapper:hover .enigma_home_portfolio_caption small{ color: #ffffff; } .enigma_proejct_button a { background-color: #f8504b; color: #FFFFFF; border: 2px solid #00cc99; transition: all 0.4s ease 0s; } .enigma_proejct_button a:hover { background-color: #ffffff; color: #00cc99; border: 2px solid #00cc99; text-decoration:none; } .enigma_carousel-prev, .enigma_carousel-next { background-color: #fff; border: 2px solid #00cc99; } .enigma_carousel-prev:hover, .enigma_carousel-next:hover { background-color: #00cc99; color:#fff; } .enigma_carousel-prev:hover i, .enigma_carousel-next:hover i{ color:#fff; } .enigma_carousel-prev i, .enigma_carousel-next i { color: #00cc99; } /*** project detail ***/ .enigma_portfolio_detail_pagi li a { color: #404040; border:2px solid #00cc99; text-align:center; background-size: 100% 200%; background-image: linear-gradient(to bottom, #00cc99 50%, #ffffff 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .enigma_portfolio_detail_pagi li a:hover { color: #404040; border:2px solid #00cc99; background-position: 0 -100%; } .enigma_portfolio_detail_pagi li a span{ color:#fff; line-height:35px; } .enigma_portfolio_detail_pagi li a:hover span{ color:00cc99; } .enigma-project-detail-sidebar p small { color:#777777; } .enigma-project-detail-sidebar .launch-enigma-project a { color: #ffffff; border: 2px solid #00cc99; background-size: 100% 200%; background-image: linear-gradient(to bottom, #00cc99 50%, #ffffff 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .enigma-project-detail-sidebar .launch-enigma-project a:hover { background-color: #ffffff; color: #00cc99; border: 2px solid #00cc99; background-position: 0 -100%; } /** gallery css **/ .enigma_gallery_showcase .enigma_gallery_showcase_icons a { background-color: #00cc99; border:2px solid #00cc99; color:#fff; } .enigma_gallery_showcase .enigma_gallery_showcase_icons a:hover{ background-color: #ffffff; border:2px solid #00cc99; color:#00cc99; } /**************** blog css ******************************************************** ********************************************************************************/ /** blog thumbnail css **/ .enigma_blog_thumb_wrapper{ background:#fff; border-bottom: 5px solid #00cc99; box-shadow: 0 0 6px rgba(0,0,0,.7); } .enigma_blog_thumb_wrapper h2 a{ color:#00cc99; transition: all 0.4s ease 0s; } .enigma_blog_thumb_wrapper h2:hover a{ color:#00cc99; } .enigma_blog_thumb_date li i{ color: #00cc99; } .enigma_tags a ,.enigma_cats a{ background-size: 100% 200%; background-color:#edf0f2; background-image: linear-gradient(to bottom, #edf0f2 50%, #00cc99 50%); } .enigma_tags a:hover , .enigma_cats a:hover{ color:#fff; background-position: 0 -100%; background-color:#00cc99; } .enigma_tags a i ,.enigma_cats a i{ color:#00cc99; } .enigma_tags a:hover i ,.enigma_cats a:hover i{ color:#fff; } .enigma_blog_thumb_wrapper span a i{ color: #00cc99; } .enigma_blog_thumb_wrapper span a { color:#555; }.enigma_blog_thumb_footer{ padding-top:20px; padding-bottom:10px; border-top:3px solid #f5f5f5; } .enigma_blog_read_btn{ border: 2px solid #00cc99; background-size: 100% 200%; background-color:#00cc99; background-image: linear-gradient(to bottom, #00cc99 50%, #fff 50%); } .enigma_blog_read_btn i { margin-right:5px; } .enigma_blog_read_btn:hover{ background-position: 0 -100%; background-color:#ffffff; color: #00cc99; } .enigma_blog_read_btn a{color:#ffffff;} .enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a { background-color: #00cc99; color: #fff; -webkit-transition: all .25s ease-in; -moz-transition: all .25s ease-in; -o-transition: all .25s ease-in; transition: all .25s ease-in; } .enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a:hover{ background-color: #ffffff; border: 2px solid #00cc99; color: #00cc99; } /********* Blog Full width css ********/ .enigma_post_date { background: #00cc99; color: #ffffff; } .enigma_blog_comment:hover i, .enigma_blog_comment:hover h6{ color:#00cc99; } .enigma_fuul_blog_detail_padding h2 a ,.enigma_fuul_blog_detail_padding h2{ color:#00cc99; } .enigma_fuul_blog_detail_padding h2 a:hover{ color:#00cc99; } /*** blog sidebar css **/ .enigma_recent_widget_post h3 a { color:#00cc99; } .enigma_sidebar_widget { border-left: 3px solid #00cc99; border-right: 3px solid #00cc99; border-bottom: 3px solid #00cc99; background-color:#ffffff; } .enigma_sidebar_widget_title{ background:#00cc99; } .enigma_sidebar_link p a:hover , .enigma_sidebar_widget ul li a:hover { color: #00cc99; } .enigma_widget_tags a , .tagcloud a { background-size: 100% 200%; background-color:#edf0f2; background-image: linear-gradient(to bottom, #edf0f2 50%, #00cc99 50%); } .enigma_widget_tags a:hover , .tagcloud a:hover { border: 1px solid #00cc99; background-color:#00cc99; background-position: 0 -100%; color: #ffffff; } /** blog detail **/ .enigma_author_detail_wrapper{ background: #00cc99; padding:15px; margin-bottom:40px; } .enigma_author_detail_wrapper{ border-left:2px solid #00cc99; } /** blog form input css **/ .reply a { color: #00cc99; } .enigma_con_input_control:focus, .enigma_con_textarea_control:focus, .enigma_contact_input_control:focus, .enigma_contact_textarea_control:focus { border-color: #00cc99; -webkit-box-shadow: inset 0 0px 0px #00cc99, 0 0 5px #00cc99; box-shadow: inset 0 0px 0px #00cc99, 0 0 5px #00cc99; } .enigma_send_button , #enigma_send_button{ border-color: #00cc99; color: #6a6a6a; background-color:#ffffff; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .enigma_send_button:hover ,#enigma_send_button:hover{ background-position: 0 -100%; border: 2px solid #00cc99; color: #ffffff; background-color:#00cc99; } .enigma_blog_pagination { background-color: #FFFFFF; } .enigma_blog_pagi a { border: 1px solid #dbdbdb !important; background-color: #ffffff; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; color: #777777; } .enigma_blog_pagi a:hover, .enigma_blog_pagi a.active { background-position: 0 -100%; color: #ffffff; } /****** Testimonial css ******************************************* ****************************************************************/ .enigma_testimonial_area i{ color:#00cc99; } .enigma_testimonial_area img{ border: 10px solid #00cc99; } .pager a{ background: #fff; border: 2px solid #00cc99; } .pager a.selected{ background: #00cc99; border: 2px solid #00cc99; } /**** Client Css ************************************************* ****************************************************************/ .enigma_client_wrapper:hover { border: 4px solid #00cc99; } .enigma_client_prev, .enigma_client_next { background-color: #fff; border: 2px solid #00cc99; } .enigma_client_prev:hover, .enigma_client_next:hover { background-color: #00cc99; color:#fff; } .enigma_client_prev:hover i, .enigma_client_next:hover i{ color:#fff; } .enigma_carousel-prev i, .enigma_carousel-next i { color: #00cc99; } /**** About us page Css ************************************************* ****************************************************************/ .enigma_team_showcase .enigma_team_showcase_icons a { background-color: #00cc99; border:2px solid #00cc99; color:#fff; } .enigma_team_showcase .enigma_team_showcase_icons a:hover{ background-color: #ffffff; border:2px solid #00cc99; color:#00cc99; } .enigma_team_caption:hover{ background: #00cc99; } .enigma_team_caption:hover h3 a ,.enigma_team_caption:hover small{ color: #ffffff; } .enigma_team_wrapper:hover .enigma_team_caption{ background: #00cc99; } .enigma_team_wrapper:hover .enigma_team_caption h3 ,.enigma_team_wrapper:hover .enigma_team_caption small{ color: #ffffff; } /***** Call Out Section ***************************************************************** ***************************************************************************************/ .enigma_callout_area { background-color: #00cc99; } /***** Footer Area Css ***************************************************************** ***************************************************************************************/ .enigma_footer_area{ background: #00cc99; border-top: 0px solid #6B6B6B; } /***** Contact Info Css ***************************************************************** ***************************************************************************************/ .enigma_contact_info li .desc { color: #00cc99; } /***** Shortcode Css ***************************************************************** ***************************************************************************************/ /*Dropcaps Styles*/ .enigma_dropcape_square span { background-color: #00cc99; color: #FFFFFF; } .enigma_dropcape_simple span { color: #00cc99; } .enigma_dropcape_circle span { background-color: #00cc99; color: #FFFFFF; } /*** breadcum style css **/ .breadcrumb li a { color: #00cc99 !important; } /** progress bar or nav button css */ .progress-bar { background-color: #00cc99 !important; } .btn-search{ background:#00cc99 !important; } .nav-pills > li > a{ border: 3px solid #00cc99 !important; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%) !important; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-image: linear-gradient(to bottom, #00cc99 50%, #00cc99 50%) !important; background-color:#00cc99; } .nav-stacked > li > a { border: 3px solid #00cc99 !important; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%) !important; } .nav-stacked > li.active > a, .nav-stacked > li.active > a:hover, .nav-stacked > li.active > a:focus { background-image: linear-gradient(to bottom, #00cc99 50%, #00cc99 50%) !important; background-color:#00cc99; } .navbar-toggle { background-color: #00cc99 !important; border: 1px solid #00cc99 !important; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #00cc99 !important; } .enigma_blockquote_section blockquote { border-left: 5px solid #00cc99 ; } #wp-calendar caption { background-color: #00cc99; color: #ffffff; padding: 10px; } #wp-calendar thead tr th { text-align: center; } table th { border: 1px solid #dddddd; padding: 8px; line-height: 20px; text-align: center; vertical-align: top; } table td { border: 1px solid #dddddd; padding: 8px; line-height: 20px; text-align: center; vertical-align: top; } table td { border: 1px solid #dddddd; padding: 8px; line-height: 20px; text-align: center; vertical-align: top; } #wp-calendar tbody tr td { text-align: center; } .enigma_footer_widget_column ul li a ,.enigma_footer_widget_column ul#recentcomments li {color: #f2f2f2;} .enigma_footer_widget_column ul li a:hover{color: #00cc99;} .enigma_callout_area a:hover{background-color:#393c40;} ul .social li .facebook a:hover ,ul .social li .twitter a:hover,ul .social li .linkedin a:hover ,ul .social li .youtube a:hover {background-color:#34495e;} .enigma_blog_pagi a:hover, .enigma_blog_pagi a.active { background-color: #00cc99; color: white; }
Hi guys
very new to this as in today! however I have a half designed website ud=sing the enigma theme (free version) I need to change the colour of the header to white so I can put my logo on it (white is blue) or to move the header down and put a white header above it
could you please help!!
thanks
EmmaHi Emma,
Try adding this code to your css stylesheet (Appearance –> Editor –> style.css).header_section.hd_cover { background-color: #fff !important; }
Goodluck!
i used the code about to change the color of my Enigma site, but it seems as though the left and right arrows that are showing in the home blog section are still the original blue color.
is there CSS to change them?
Thanks.
- The topic ‘Changing color of theme header, footer and rest of the site.’ is closed to new replies.