Solved

change header color

Posted on 2014-07-22
6
352 Views
Last Modified: 2014-07-22
Hi - I need help figuring out where to change the color of my header. There are options within the Theme Options, but it does not change it. I know there was some customizing of the header, as the theme is by default a left sided menu, but mine was changed to be always at the top. I have tried some configuration within the responsive.css as well but maybe I'm missing the target spot. Want to change header from black to other colors (to test).

dev site link
0
Comment
Question by:Trevor Local
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40213481
.header-sidebar {
  background-color:red!important;
}

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40213482
Or change this

development10.crispyconnection.com/media="all"
.header-sidebar {
background: #000000 !important;
}

Open in new window

@import url("../crispy/style.css");
.header-sidebar {background: #000000 !important;}
#main-mobile-toggle.opened {	background-color: #000000;}
.mega-menu > ul > li > a, .mega-menu > ul > li > h5 {color:white;}
#main-mobile-toggle{color:white;}
#main-mobile-toggle .icon-bar { background-color: #FFFFFF;}
#recent_viewed_products .bx-wrapper{ margin:0px !important;}
@media screen and (max-width: 850px) { .annp_gpage{width:88% !important;}

Open in new window


What you want to do is make a child theme though. It will be easier to over ride.
0
 

Author Comment

by:Trevor Local
ID: 40213483
I do have a child theme.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40213496
In your child theme, style.css  http://development10.crispyconnection.com/wp-content/themes/crispy-child/style.css?ver=3.9.1  on line 13, you have that set to black.  (#000).

/*
Theme Name: Crispy Child 
Theme URI: http://newsmartwave.net/wordpress/trego
Template: crispy
Author: Eternalfriend
Author URI: http://newsmartwave.net
Description: Ultimate Responsive Woocommerce Theme
Version: 1.0
*/


@import url("../crispy/style.css");
.header-sidebar {background: #000000 !important;}
#main-mobile-toggle.opened {	background-color: #000000;}
.mega-menu > ul > li > a, .mega-menu > ul > li > h5 {color:white;}
#main-mobile-toggle{color:white;}
#main-mobile-toggle .icon-bar { background-color: #FFFFFF;}
#recent_viewed_products .bx-wrapper{ margin:0px !important;}
@media screen and (max-width: 850px) { .annp_gpage{width:88% !important;} }
@media only screen and (min-width: 850px) and (max-width: 970px) { .annp_gpage{width:78% !important;} }
@media only screen and (min-width: 971px) and (max-width: 1200px) { .annp_gpage{width:68% !important;} }
.fullscreen .site-main {position: relative;}
.page-template-page-home-php.fullscreen #colophon .site-info .copyrights{position:relative !important;}
.page-template-page-home-php.fullscreen #colophon .site-info{border-top: 1px solid #D5D5D5 !important;}
.share-icons a{font-family:  !important;}
@media only screen and (min-width: 1025px){.site-header form.searchform{display:block !important;}}
@media only screen and (max-width: 5000px) and (min-width: 768px){.site-header .search-form{top:0 !important;}}
@media only screen and (max-width: 320px){ form.searchform .form-search input.input-text{ width:125px !important; } }
.icon-facebook:before,.icon-twitter:before,.icon-linkedin:before{
	display:none;
}
/* annsys start 12-5-2014 */
	.header-topbox{
		top: 0px!important;
	}
@media screen and (min-width:768px) and (max-width:1024px) {
	.header-topbox{
		top: 45px !important;
	}
	.header-sidebar {
		top: 0px!important;
	}
}
/* end */
/* annsys start 15-5-2014 */
#payment{
width: 177px;
}
#payment table tbody tr td{
border-right: 1px solid #D5D5D5;
}
.button{
font-size:13px !important;
}

@media only screen and (max-width: 5000px) and (min-width: 768px){
.cart-box {
display: inline !important;
}
}
.header-topblock { position:absolute !important;background: none !important;}
.header-topbar { display:block; border:none !important;}
.header-topbar .quick-access { margin-top:0px !important;}
.header-topblock {top: 182px !important;}

.annsearch_form  .input-text{ padding:0px !important; }
.annsearch_form .btn-submit{ top: 3px !important;}
/* end */

@media only screen and (max-width : 767px) and (min-width:440px) {
	.header-topblock {
		top: 154px !important;
	}
	.header-topbar {top : 0px; }
}
@media only screen and (max-width : 439px) and (min-width:0px) {
	.header-topblock {
		position : relative !important;
		top: 16px !important;
	}
	.site-header .header-topbar {
		padding: 0 15% !important;
	}
}

Open in new window

0
 

Author Comment

by:Trevor Local
ID: 40213502
Got it -- thank you!!
0
 

Author Comment

by:Trevor Local
ID: 40213513
I've requested that this question be closed as follows:

Accepted answer: 0 points for Trevor Local's comment #a40213502

for the following reason:

Thank you!!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn how to dynamically set the form action using jQuery.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question