[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 199
  • Last Modified:

Trick for modifying background:url string

I have the following string called in a CSS file.

background:url(images/menu.gif) repeat-x 0% 0%;

Open in new window


I cannot modify this CSS as any changes I make here will get zapped when I run an update.  So I'd like to try to find a way to get rid of that string and instead, have the browser render a color.  

In the style sheet that I have the ability to modify, I've tried adding the following lines:

background-image: none; 
background-color: #008e9f;

Open in new window


This nets no noticeable changes.

I've also tried:

background-image: none !important;
background-color: #008e9f;

Open in new window


All this does is make the surrounding background and colors vanish.

Seems like I've done this before, but I just can't seem to figure out what I did.
0
Azra Lyndsey
Asked:
Azra Lyndsey
  • 6
  • 3
  • 2
  • +2
2 Solutions
 
käµfm³d 👽Commented:
In the style sheet that I have the ability to modify...
In what order are your stylesheets imported?
0
 
Azra LyndseyNerdAuthor Commented:
main-styles.css is the bottom layer.  Styles.css is importing main-styles.css.  Styles-css is empty and is the only one that I have the ability to customize.
0
 
Scott Fell, EE MVEDeveloperCommented:
If you can use jquery

  $('#my_selector').css('background-image', 'none');

Open in new window

http://jsbin.com/qiwexu/1/edit
<!DOCTYPE html>
<html>
<head>
<style>
  div{
    width:600px;
    height:800px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/a/a6/Stiegl-bier.jpg) repeat-x 0% 0%;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  $(function(){
  
    $('div').css('background-image', 'none');
  });
    </script>
  <meta charset="utf-8">
  
  <title>padas</title>
</head>
<body>
  <div></div>
</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Scott Fell, EE MVEDeveloperCommented:
I know where kaufmed is going on this one.  

If you have
STYLE.CSS
@import url('/css/main-styles.css');
/* PLACE YOUR CUSTOM CSS BELOW THE IMPORT */
.selector {
background-image: none; 
background-color: #008e9f;
}

Open in new window

0
 
Azra LyndseyNerdAuthor Commented:
@Scott:

The css that you noted is exactly what is being done now that isn't working.  

The jQuery is interesting.  Not sure I want to take that route just yet.  I'd rather solve the problem with CSS first if it can be done.
0
 
Scott Fell, EE MVEDeveloperCommented:
If your css looks similar and you are adding your new css to after you load the base css and that is still not working, there is some other force going on or you are targeting the wrong thing.

Probably the best thing to do is create a test page that does not contain sensitive data and post the link to a url we can see.  If you don't have a public url you can use at this time, create your test page, change all the references to any images and and external css  to full urls.  Then you can paste the code here
Code BlockOr to http://jsbin.com/nofuto/1/edit?html,output  Once you paste your code to the html area, the url will change probably to http://jsbin.com/nofuto/2/ automatically.  Just let us know the final url.

Once we can see  your code in action, we can make a more detailed recommendation.
0
 
GaryCommented:
I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
0
 
Azra LyndseyNerdAuthor Commented:
Hi, everybody.  Sorry for not getting back to you sooner on this post.  I had to abandon the project for a few weeks to focus on a few other things.  I'm back on this one now and still looking for help.

Here's style.css:

Modify Style.css only.  

Added: 

/*--
     Template: CherryFramework
     Version: 2.1
     MotoPress Version: 1.0
--*/
@import url("main-style.css");

/* ----------------------------------------
     Please, You may put custom css here
---------------------------------------- */

.motorpress-wrapper {
border: 1px solid red;
}


/*Menu-item modifications - this is to remove the blue coloring for the following classes and replace them with teal #008e9f*/

.header .nav__primary .sf-menu > li > a:hover, .header .nav__primary .sf-menu > li.sfHover> a, .header .nav__primary .sf-menu > li.current-menu-item > a, .header .nav__primary .sf-menu > li.current_page_item > a {
     background-image: none !important;
     background-color: #008e9f;
}

/*slider background modifications - this is to insert the teal coloring instead of the default blue*/

#slider-wrapper {
     background-image: none !important;
     background-color: #008e9f;

}
#slider-wrapper:before {
     background-image: none !important;
     background-color: #008e9f;
}
#slider-wrapper:after {
     background-image: none !important;
     background-color: #008e9f;
}
#slider-wrapper .container {
     background-image: none !important;
     background-color: #008e9f;
}

#footer-text {
border: 0px solid red;
width: 0%;
height: 1px;
}

.social_ico {
margin-top: 10px;
}

Open in new window


And here's main-style.css

@import url("../CherryFramework/style.css");
@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(//fonts.googleapis.com/css?family=Archivo+Narrow:700);
body { background:#cbc7d4 url(images/body.jpg) repeat 50% 0%; }
@media (max-width: 767px) {
	body { padding:0; }
}
.main-holder input[type="text"], .main-holder input[type="email"], .main-holder textarea {
	background:none;
	min-height:41px;
	margin:0;
	padding:11px 14px !important;
	border:1px solid #e4e4e4;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	resize:none;
	font-family:'Ubuntu', sans-serif;
	font-size:12px;
	font-weight:400;
	color:#7d7d7d;
}
html.ie8 .main-holder input[type="text"], html.ie8 .main-holder input[type="email"], html.ie8 .main-holder textarea { min-height:17px; }
.main-holder input[type="submit"], .main-holder input[type="reset"] {
	background:url(images/button.gif) repeat-x 0% 0%;
	height:42px;
	overflow:hidden;
	margin:0 10px 0 0;
	padding:0 21px 0 21px;
	line-height:42px;
	font-family:'Ubuntu', sans-serif;
	font-size:13px;
	font-weight:400;
	border:none;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	text-decoration:none;
	color:#fff;
}
.main-holder input[type="submit"]:focus, .main-holder input[type="reset"]:focus {
	background:url(images/button.gif) repeat-x 0% 0%;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
.main-holder input[type="submit"]:hover, .main-holder input[type="reset"]:hover {
	background-position:0% -42px;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
.search-form input[type="text"] { min-height:42px; }
@media (min-width: 768px) and (max-width: 979px) {
	.search-form input[type="text"] { width:180px; }
}
html.ie8 .search-form input[type="text"] { width:200px; }
@media (max-width: 480px) {
	.search-form input[type="text"] { width:180px; }
}
h1 {
	letter-spacing:-1px;
	text-transform:uppercase;
}
h1 a {
	text-decoration:none;
	color:#474747;
}
h1 a:hover {
	text-decoration:none;
	color:#008e9f;
}
h2 {
	margin-bottom:27px;
	letter-spacing:-1px;
	text-transform:uppercase;
}
h2 a {
	text-decoration:none;
	color:#474747;
}
h2 a:hover {
	text-decoration:none;
	color:#008e9f;
}
h2 em {
	display:block;
	margin:0 0 -15px 0;
	font-style:normal;
}
h3 {
	margin-bottom:8px;
	letter-spacing:-1px;
	text-transform:uppercase;
}
h3 a {
	text-decoration:none;
	color:#474747;
}
h3 a:hover {
	text-decoration:none;
	color:#008e9f;
}
h4 {
	margin-bottom:28px;
	text-transform:uppercase;
}
h4 a {
	text-decoration:none;
	color:#fff;
}
h4 a:hover {
	text-decoration:none;
	color:#242424;
}
h5 {
	letter-spacing:-1px;
	text-transform:uppercase;
}
h5 a {
	text-decoration:none;
	color:#474747;
}
h5 a:hover {
	text-decoration:none;
	color:#008e9f;
}
h6 { text-transform:uppercase; }
p { margin:0 0 18px 0; }
img.alignnone {
	background:#fff;
	padding:5px;
	border:1px solid #ebebeb;
}
@media (min-width: 979px) and (max-width: 1200px) {
	img.alignnone { max-width:96%; }
}
html.ie8 img.alignnone { max-width:96%; }
@media (min-width: 768px) and (max-width: 979px) {
	img.alignnone { max-width:96%; }
}
@media (max-width: 480px) {
	img.alignnone { max-width:96%; }
}
img.alignleft {
	background:#fff;
	margin:0 30px 10px 0;
	padding:5px;
	border:1px solid #ebebeb;
}
@media (min-width: 979px) and (max-width: 1200px) {
	img.alignleft { max-width:96%; }
}
html.ie8 img.alignleft { max-width:96%; }
@media (min-width: 768px) and (max-width: 979px) {
	img.alignleft { max-width:96%; }
}
@media (max-width: 480px) {
	img.alignleft { max-width:96%; }
}
img.alignright {
	background:#fff;
	margin:0 0 10px 30px;
	padding:5px;
	border:1px solid #ebebeb;
}
@media (min-width: 979px) and (max-width: 1200px) {
	img.alignright { max-width:96%; }
}
html.ie8 img.alignright { max-width:96%; }
@media (min-width: 768px) and (max-width: 979px) {
	img.alignright { max-width:96%; }
}
@media (max-width: 480px) {
	img.alignright { max-width:96%; }
}
.header {
	background:#fff url(images/header.gif) repeat-x 50% 100%;
	margin:0;
	padding:25px 0 37px 0;
	border:none;
}
@media (max-width: 767px) {
	.header {
		padding:25px 20px 37px 20px;
		text-align:center;
	}
}
.header .logo { margin:0; }
@media (min-width: 979px) and (max-width: 1200px) {
	.header .logo { width:auto; }
}
html.ie8 .header .logo { width:auto; }
@media (min-width: 768px) and (max-width: 979px) {
	.header .logo { width:auto; }
}
@media (max-width: 767px) {
	.header .logo {
		display:inline-block;
		float:none;
		width:auto;
		vertical-align:top;
	}
}
.header .logo img {
	float:left;
	margin:0;
}
@media (min-width: 979px) and (max-width: 1200px) {
	.header .logo img { float:none; }
}
html.ie8 .header .logo img { float:none; }
@media (min-width: 768px) and (max-width: 979px) {
	.header .logo img { float:none; }
}
@media (max-width: 767px) {
	.header .logo img { float:none; }
}
.header .logo .logo_h__txt {
	float:left;
	margin:38px 2px 0 0;
	padding:0;
	letter-spacing:-2px;
	text-transform:uppercase;
}
.header .logo .logo_h__txt a { text-decoration:none; }
.header .logo .logo_h__txt a:hover { color:#2f2f2f; }
.header .logo p {
	background:url(images/logo_line.gif) no-repeat 0% 0%;
	float:left;
	margin:46px 0 0 10px;
	padding:0 0 0 8px;
	line-height:34px;
	font-size:11px;
	color:#b2b3b3;
}
@media (min-width: 979px) and (max-width: 1200px) {
	.header .logo p {
		background:none;
		float:none;
		width:100%;
		overflow:hidden;
		margin:0;
		padding:0;
		line-height:18px;
		text-align:center;
	}
}
html.ie8 .header .logo p {
	background:none;
	float:none;
	width:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	line-height:18px;
	text-align:center;
}
@media (min-width: 768px) and (max-width: 979px) {
	.header .logo p {
		background:none;
		float:none;
		width:100%;
		overflow:hidden;
		margin:0;
		padding:0;
		line-height:18px;
		text-align:center;
	}
}
@media (max-width: 767px) {
	.header .logo p {
		background:none;
		float:none;
		width:100%;
		overflow:hidden;
		margin:0;
		padding:0;
		line-height:18px;
		text-align:center;
	}
}
.header .nav__primary { margin:48px 9px 0 0; }
@media (min-width: 979px) and (max-width: 1200px) {
	.header .nav__primary { margin-right:0; }
}
html.ie8 .header .nav__primary { margin-right:0; }
@media (min-width: 768px) and (max-width: 979px) {
	.header .nav__primary { margin-right:0; }
}
@media (max-width: 767px) {
	.header .nav__primary { margin:20px 0 0 0; }
}
.header .nav__primary .sf-menu ul {
	background:#303030;
	width:116px;
	padding:31px 0 15px 0;
}
.header .nav__primary .sf-menu > li {
	background:none;
	margin:0 0 0 8px;
}
@media (min-width: 768px) and (max-width: 979px) {
	.header .nav__primary .sf-menu > li { margin:0 0 0 1px; }
}
.header .nav__primary .sf-menu > li > a {
	background:url(images/menu.gif) repeat-x 0% -100px;
	padding:6px 12px 8px 12px;
	border:none;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	text-transform:uppercase;
	text-decoration:none;
}
.header .nav__primary .sf-menu > li li {
	background:none;
	margin:0 0 16px 0;
	text-align:left;
}
.header .nav__primary .sf-menu > li li a {
	padding:0 10px;
	border:none;
	line-height:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	color:#8e8e8e;
}
.header .nav__primary .sf-menu > li li .sf-sub-indicator { display:none; }
.header .nav__primary .sf-menu > li li li a { color:#fff; }
.header .nav__primary .sf-sub-indicator {
	background:url(images/arrows-ffffff.gif) no-repeat 0% 0%;
	width:7px;
	height:4px;
	margin:0 -3px 0 0;
	top:25px;
	right:50%;
}
.header .nav__primary .sf-menu li:hover ul, .header .nav__primary .sf-menu li.sfHover ul {
	margin:0 0 0 -58px;
	top:36px;
	left:50%;
}
.header .nav__primary ul.sf-menu li li:hover ul, .header .nav__primary ul.sf-menu li li.sfHover ul {
	background:#008e9f;
	margin:0;
	top:-31px;
	left:116px;
}
.header .nav__primary .sf-menu > li > a:hover, .header .nav__primary .sf-menu > li.sfHover> a, .header .nav__primary .sf-menu > li.current-menu-item > a, .header .nav__primary .sf-menu > li.current_page_item > a {
	background:url(images/menu.gif) repeat-x 0% 0%;
	color:#fff;
}
.header .nav__primary .sf-menu > li > a:hover .sf-sub-indicator, .header .nav__primary .sf-menu > li.sfHover> a .sf-sub-indicator, .header .nav__primary .sf-menu > li.current-menu-item > a .sf-sub-indicator, .header .nav__primary .sf-menu > li.current_page_item > a .sf-sub-indicator { display:none; }
.header .nav__primary .sf-menu li li > a:hover, .header .nav__primary .sf-menu li li.sfHover > a, .header .nav__primary .sf-menu li li.current-menu-item > a, .header .nav__primary .sf-menu li li.current_page_item > a {
	background:none;
	color:#fff;
}
.header .nav__primary .sf-menu li li li > a:hover, .header .nav__primary .sf-menu li li li.sfHover > a, .header .nav__primary .sf-menu li li li.current-menu-item > a, .header .nav__primary .sf-menu li li li.current_page_item > a {
	background:none;
	color:#000;
}
#slider-wrapper {
	background:url(images/slider.jpg) repeat 50% 0%;
	position:relative;
	overflow:visible;
	padding:20px 0 19px 0;
	border-bottom:10px solid #e1e1e1;
}
#slider-wrapper:before {
	background:url(images/slider.jpg) repeat 50% 0%;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	border-bottom:10px solid #e1e1e1;
	position:absolute;
	top:0;
	left:-100%;
	z-index:1;
	content:'';
}
#slider-wrapper:after {
	background:url(images/slider.jpg) repeat 50% 0%;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	border-bottom:10px solid #e1e1e1;
	position:absolute;
	top:0;
	right:-100%;
	z-index:1;
	content:'';
}
#slider-wrapper .container {
	position:relative;
	margin:0 0 0 -5px;
	border:4px solid rgba(255,255,255,0.1);
	z-index:2;
}
html.ie8 #slider-wrapper .container { border:4px solid #7eb4d7; }
#slider-wrapper .camera_wrap { margin:0 !important; }
@media (max-width: 480px) {
	#slider-wrapper .camera_wrap { height:101px !important; }
}
#slider-wrapper .camera_caption {
	width:530px;
	height:1px;
	position:absolute;
	top:130px;
	left:48px;
}
@media (min-width: 979px) and (max-width: 1200px) {
	#slider-wrapper .camera_caption { top:80px; }
}
html.ie8 #slider-wrapper .camera_caption { top:80px; }
@media (min-width: 768px) and (max-width: 979px) {
	#slider-wrapper .camera_caption {
		width:400px;
		top:30px;
	}
}
@media (max-width: 767px) {
	#slider-wrapper .camera_caption {
		width:250px;
		top:10px;
		left:30px;
	}
}
#slider-wrapper .camera_caption div {
	background:none;
	padding:0;
}
#slider-wrapper .camera_caption strong {
	display:block;
	margin:0 0 -12px 0;
	letter-spacing:-4px;
	line-height:90px;
	font-family:'Ubuntu', sans-serif;
	font-size:90px;
	font-weight:700;
	text-shadow:1px 1px 0 rgba(0,0,0,0.2);
	text-transform:uppercase;
	color:#fff;
}
@media (min-width: 768px) and (max-width: 979px) {
	#slider-wrapper .camera_caption strong {
		margin:0 0 -8px 0;
		line-height:70px;
		font-size:70px;
	}
}
@media (max-width: 767px) {
	#slider-wrapper .camera_caption strong {
		margin:0;
		letter-spacing:-1px;
		line-height:30px;
		font-size:30px;
	}
}
#slider-wrapper .camera_caption em {
	display:block;
	margin:0 0 9px 0;
	letter-spacing:-2px;
	line-height:36px;
	font-family:'Ubuntu', sans-serif;
	font-size:36px;
	font-weight:700;
	font-style:normal;
	text-shadow:1px 1px 0 rgba(0,0,0,0.2);
	text-transform:uppercase;
	color:#fff;
}
@media (min-width: 768px) and (max-width: 979px) {
	#slider-wrapper .camera_caption em {
		line-height:30px;
		font-size:30px;
	}
}
@media (max-width: 767px) {
	#slider-wrapper .camera_caption em {
		line-height:20px;
		font-size:20px;
	}
}
#slider-wrapper .camera_caption p {
	line-height:18px;
	font-family:'Ubuntu', sans-serif;
	font-size:13px;
	font-weight:700;
	font-style:normal;
	text-shadow:1px 1px 0 rgba(0,0,0,0.2);
	text-transform:uppercase;
	color:#fff;
}
@media (max-width: 767px) {
	#slider-wrapper .camera_caption p {
		line-height:14px;
		font-size:10px;
	}
}
@media (max-width: 480px) {
	#slider-wrapper .camera_caption p { display:none; }
}
#slider-wrapper .camera_pag {
	position:absolute;
	left:48px;
	bottom:35px;
}
@media (max-width: 767px) {
	#slider-wrapper .camera_pag {
		left:30px;
		bottom:10px;
	}
}
#slider-wrapper .camera_pag ul li {
	background:url(images/pagination.png) no-repeat 0% 0%;
	display:inline-block;
	width:14px;
	height:14px;
	max-height:14px;
	margin:0 4px 0 0;
	vertical-align:top;
}
#slider-wrapper .camera_pag ul li.cameracurrent { background-position:0% -14px; }
#slider-wrapper .camera_pag ul li:hover { background-position:0% -14px; }
#slider-wrapper .camera_pag ul li span { display:none; }
#slider-wrapper .camera_thumbs {
	position:absolute;
	right:48px;
	top:29px;
}
#slider-wrapper .camera_thumbs .camera_thumbs_cont {
	background:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
#slider-wrapper .camera_thumbs .camera_thumbs_cont ul { padding:0; }
#slider-wrapper .camera_thumbs .camera_thumbs_cont ul li img { margin:0; }
#slider-wrapper .camera_next {
	margin:0;
	top:auto;
	right:48px;
	bottom:26px;
}
#slider-wrapper .camera_commands {
	margin:0;
	top:auto;
	right:89px;
	bottom:26px;
}
#slider-wrapper .camera_prev {
	margin:0;
	top:auto;
	right:130px;
	bottom:26px;
	left:auto;
}
.content-holder {
	background:#f9f9f9;
	width:100%;
	overflow:hidden;
	margin:0;
	padding:15px 0 16px 0;
}
@media (max-width: 767px) {
	.content-holder {
		width:auto;
		padding:15px 20px 16px 20px;
	}
}
body.home .content-holder { padding:0 0 16px 0; }
@media (max-width: 767px) {
	body.home .content-holder { padding:0 20px 16px 20px; }
}
.content-holder #content { padding-top:37px; }
#sidebar { padding-top:37px; }
#sidebar ul {
	margin:0;
	padding:0;
}
#sidebar ul li {
	background:url(images/marker.png) no-repeat 0% 19px;
	margin:0;
	padding:15px 0 16px 19px;
	list-style:none;
	line-height:18px;
	font-size:13px;
	font-weight:400;
	border-top:1px solid #ddd;
	color:#008e9f;
}
#sidebar ul li:before { display:none; }
#sidebar ul li:first-child { border:none; }
#sidebar ul li a {
	text-decoration:none;
	color:#008e9f;
}
#sidebar ul li a:hover {
	text-decoration:none;
	color:#4c4c4c;
}
#sidebar ul li ul {
	margin:15px 0 -16px 0;
	border-top:1px solid #ddd;
}
#sidebar ul.social li {
	background:none;
	padding-left:0;
	line-height:36px;
}
#sidebar ul.social li .social_ico { margin:0 10px 0 0; }
.box {
	background:#f5f5f5 url(images/box.gif) repeat-x 0% 100%;
	position:relative;
	margin:0 0 16px 0;
	padding:39px 0 52px 0;
}
.box:before {
	background:#f5f5f5 url(images/box.gif) repeat-x 0% 100%;
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0;
	left:-100%;
	content:'';
}
.box:after {
	background:#f5f5f5 url(images/box.gif) repeat-x 0% 100%;
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0;
	right:-100%;
	content:'';
}
.service-box {
	background:none;
	margin:0 0 75px 0;
	padding:0;
	border:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
@media (min-width: 768px) and (max-width: 979px) {
	.service-box { margin:0 0 35px 0; }
}
@media (max-width: 767px) {
	.service-box { margin:0 0 35px 0; }
}
.service-box:hover h2 { color:#008e9f; }
.service-box.extra { margin:0; }
@media (max-width: 767px) {
	.service-box.extra { margin:0 0 35px 0; }
}
.service-box .icon {
	float:left;
	margin:0 13px 0 0;
}
@media (min-width: 768px) and (max-width: 979px) {
	.service-box .icon {
		float:none;
		margin:0 0 13px 0;
	}
}
.service-box h2 {
	margin:0 0 -4px 0;
	padding:6px 0 0 0;
	letter-spacing:-1px;
	line-height:34px;
	font-family:'Ubuntu', sans-serif;
	font-size:24px;
	font-weight:700;
	text-transform:uppercase;
	color:#292929;
}
@media (min-width: 979px) and (max-width: 1200px) {
	.service-box h2 {
		padding:0;
		line-height:24px;
		font-size:18px;
	}
}
html.ie8 .service-box h2 {
	padding:0;
	line-height:24px;
	font-size:18px;
}
@media (min-width: 768px) and (max-width: 979px) {
	.service-box h2 {
		padding:0;
		line-height:24px;
		font-size:18px;
	}
}
@media (max-width: 767px) {
	.service-box h2 { padding:0; }
}
@media (max-width: 480px) {
	.service-box h2 {
		margin:0;
		padding:6px 0 0 0;
		line-height:16px;
		font-size:16px;
	}
}
.service-box .service-box_txt {
	margin:0;
	line-height:21px;
	font-size:13px;
	color:#767575;
}
@media (min-width: 979px) and (max-width: 1200px) {
	.service-box .service-box_txt {
		line-height:18px;
		font-size:12px;
	}
}
html.ie8 .service-box .service-box_txt {
	line-height:18px;
	font-size:12px;
}
@media (min-width: 768px) and (max-width: 979px) {
	.service-box .service-box_txt {
		line-height:18px;
		font-size:12px;
	}
}
@media (max-width: 480px) {
	.service-box .service-box_txt {
		line-height:18px;
		font-size:11px;
	}
}
.service-box .btn-align { text-align:left; }
.service-box .btn-align a {
	background:none;
	height:auto;
	margin:0;
	padding:0;
	border:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	line-height:18px;
	font-size:12px;
	font-weight:700;
	text-shadow:none;
	text-transform:uppercase;
	text-decoration:none;
	color:#474747;
}
.service-box .btn-align a:focus {
	background:none;
	color:#474747;
}
.service-box .btn-align a:hover {
	text-decoration:none;
	color:#008e9f;
}
.carousel-wrap { margin:0 0 30px 0; }
.carousel-wrap h2 {
	margin-bottom:29px;
	padding:0 0 25px 0;
	border-bottom:1px solid #eee;
}
.carousel-wrap ul li { color:#7d7d7d; }
.carousel-wrap ul li .framing {
	background:#fff;
	margin:0 0 19px 0;
	padding:5px;
	border:1px solid #ebebeb;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.carousel-wrap ul li .framing .featured-thumbnail { margin:0; }
.carousel-wrap ul li .framing h5 {
	background:#e6e6e6 url(images/title.gif) repeat-x 0% 0%;
	margin:0;
	padding:16px 18px 14px 18px;
	letter-spacing:normal;
	line-height:18px;
	font-family:'Ubuntu', sans-serif;
	font-size:12px;
	font-weight:400;
	text-transform:uppercase;
	color:#63a9cd;
}
.carousel-wrap ul li .framing h5 a {
	text-decoration:none;
	color:#63a9cd;
}
.carousel-wrap ul li .framing h5 a:hover {
	text-decoration:none;
	color:#292929;
}
.carousel-wrap ul li p.excerpt { margin:0 0 19px 0; }
.carousel-wrap span.es-nav-next {
	background:url(images/next.png) no-repeat 0% 0%;
	display:block;
	width:10px;
	height:15px;
	overflow:hidden;
	margin:0;
	padding:0;
	top:-73px;
	right:0px;
}
.carousel-wrap span.es-nav-next:hover { background-position:0% -15px; }
.carousel-wrap span.es-nav-prev {
	background:url(images/prev.png) no-repeat 0% 0%;
	display:block;
	width:10px;
	height:15px;
	overflow:hidden;
	margin:0;
	padding:0;
	top:-73px;
	right:22px;
}
.carousel-wrap span.es-nav-prev:hover { background-position:0% -15px; }
a.btn-primary {
	background:url(images/button.gif) repeat-x 0% 0%;
	display:inline-block;
	height:42px;
	overflow:hidden;
	margin:0;
	padding:0 21px 0 21px;
	line-height:42px;
	font-family:'Ubuntu', sans-serif;
	font-size:13px;
	font-weight:400;
	border:none;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	text-decoration:none;
	color:#fff;
}
a.btn-primary:focus {
	background:url(images/button.gif) repeat-x 0% 0%;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
a.btn-primary:hover {
	background-position:0% -42px;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
.info_box {
	background:#f1f3f4;
	overflow:hidden;
	padding:57px 50px 50px 49px;
	border:1px solid #e9e8e8;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.info_box img {
	background:none;
	float:right;
	margin:42px 0 0 81px;
	padding:0;
	border:none;
}
@media (min-width: 979px) and (max-width: 1200px) {
	.info_box img {
		width:50%;
		height:auto;
	}
}
html.ie8 .info_box img {
	width:50%;
	height:auto;
}
@media (min-width: 768px) and (max-width: 979px) {
	.info_box img {
		float:none;
		margin:0 0 42px 0;
	}
}
@media (max-width: 767px) {
	.info_box img {
		float:none;
		margin:0 0 42px 0;
	}
}
.info_box p { margin:0 0 15px 0; }
.info_box p:first-child { margin:0; }
.info_box strong {
	display:block;
	margin:0 0 4px 0;
	padding:0;
	letter-spacing:-1px;
	line-height:34px;
	font-family:'Ubuntu', sans-serif;
	font-size:30px;
	font-weight:700;
	text-transform:uppercase;
	color:#474747;
}
.info_box em {
	display:block;
	overflow:hidden;
	margin:0;
	padding:0 80px 0 0;
	line-height:24px;
	font-size:14px;
	font-weight:700;
	font-style:normal;
	text-transform:uppercase;
	color:#4a4a4a;
}
@media (min-width: 979px) and (max-width: 1200px) {
	.info_box em { padding:0; }
}
html.ie8 .info_box em { padding:0; }
@media (min-width: 768px) and (max-width: 979px) {
	.info_box em { padding:0; }
}
@media (max-width: 767px) {
	.info_box em { padding:0; }
}
@media (max-width: 480px) {
	.info_box em {
		line-height:20px;
		font-size:12px;
	}
}
div.list.custom-list {
	overflow:hidden;
	padding:1px 0 17px 0;
}
div.list.custom-list ul {
	margin:0;
	padding:0;
}
div.list.custom-list ul li {
	background:url(images/marker.png) no-repeat 0% 19px;
	margin:0;
	padding:15px 0 16px 19px;
	list-style:none;
	line-height:18px;
	font-size:13px;
	font-weight:400;
	border-top:1px solid #ddd;
	color:#008e9f;
}
div.list.custom-list ul li:before { display:none; }
div.list.custom-list ul li:first-child { border:none; }
div.list.custom-list ul li a {
	text-decoration:none;
	color:#008e9f;
}
div.list.custom-list ul li a:hover {
	text-decoration:none;
	color:#4c4c4c;
}
div.list.custom-list ul li ul {
	margin:15px 0 -16px 0;
	border-top:1px solid #ddd;
}
.sm_hr {
	background:#eee;
	height:1px;
	overflow:hidden;
	margin:37px 0 17px 0;
	padding:0;
	line-height:0;
	font-size:0;
}
ul.clients {
	margin:0 !important;
	padding:11px 0 0 0 !important;
}
@media (min-width: 979px) and (max-width: 1200px) {
	ul.clients { padding:0 0 0 0 !important; }
}
html.ie8 ul.clients { padding:0 0 0 0 !important; }
@media (min-width: 768px) and (max-width: 979px) {
	ul.clients { padding:0 0 0 0 !important; }
}
ul.clients li {
	display:inline-block;
	margin:0 0 0 38px;
	vertical-align:top;
}
@media (min-width: 979px) and (max-width: 1200px) {
	ul.clients li { margin:0 38px 5px 0 !important; }
}
html.ie8 ul.clients li { margin:0 38px 5px 0 !important; }
@media (min-width: 768px) and (max-width: 979px) {
	ul.clients li { margin:0 38px 5px 0 !important; }
}
@media (max-width: 767px) {
	ul.clients li { margin:0 38px 5px 0 !important; }
}
ul.clients li:first-child { margin:0; }
ul.clients li .thumbnail {
	background:none;
	margin:0;
	padding:0;
	border:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
ul.clients li h5 { display:none; }
.spacer { height:28px; }
ul.services li { margin-bottom:20px; }
@media (max-width: 767px) {
	ul.services li {
		width:100%;
		overflow:hidden;
	}
}
ul.services li .thumbnail { margin:0 0 10px 0; }
@media (max-width: 767px) {
	ul.services li .thumbnail {
		width:40%;
		margin:0 20px 10px 0;
	}
}
html.ie8 ul.services li .thumbnail img { max-width:inherit; }
@media (max-width: 767px) {
	ul.services li .clear { display:none; }
}
ul.services li h5 {
	margin-bottom:10px;
	line-height:18px;
	font-size:12px;
	text-transform:uppercase;
	color:#63a9cd;
}
ul.services li h5 a {
	text-decoration:none;
	color:#63a9cd;
}
ul.services li h5 a:hover {
	text-decoration:none;
	color:#474747;
}
ul.team { padding:4px 0 0 0; }
ul.team li {
	margin-bottom:14px;
	line-height:18px;
	font-size:12px;
	color:#7d7d7d;
}
@media (max-width: 767px) {
	ul.team li {
		width:100%;
		overflow:hidden;
	}
}
ul.team li .thumbnail { margin:0 0 18px 0; }
@media (max-width: 767px) {
	ul.team li .thumbnail { margin:0 20px 10px 0; }
}
html.ie8 ul.team li .thumbnail img { max-width:inherit; }
@media (max-width: 767px) {
	ul.team li .clear { display:none; }
}
ul.team li h5 {
	margin:0 0 10px 0;
	letter-spacing:normal;
	line-height:18px;
	font-size:12px;
	text-transform:uppercase;
	color:#63a9cd;
}
ul.team li h5 a {
	text-decoration:none;
	color:#63a9cd;
}
ul.team li h5 a:hover {
	text-decoration:none;
	color:#474747;
}
span.dropcap {
	background:none;
	float:left;
	width:auto;
	height:auto;
	margin:5px 17px 10px 0;
	padding:0 5px 0 0;
	letter-spacing:-3px;
	line-height:48px;
	font-family:'Ubuntu', sans-serif;
	font-size:48px;
	font-weight:700;
	color:#008e9f;
}
.testimonials { padding:0 0 0 7px; }
.testimonials .testi-item {
	background:url(images/quotes.png) no-repeat 0% 0%;
	margin:0 0 30px 0;
	padding:0 0 0 46px;
}
.testimonials .testi-item blockquote {
	background:none;
	margin:0;
	padding:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
.testimonials .testi-item blockquote:before, .testimonials .testi-item blockquote:after { display:none; }
.testimonials .testi-item blockquote a {
	text-decoration:none;
	color:#7d7d7d;
}
.testimonials .testi-item blockquote a:hover {
	text-decoration:none;
	color:#474747;
}
.testimonials .testi-item small.testi-meta {
	padding:10px 20px 0 0;
	line-height:18px;
	font-size:12px;
	text-align:right;
	text-transform:uppercase;
	color:#63a9cd;
}
.footer {
	background:url(images/footer.gif) repeat-x 50% 0%;
	margin:0;
	padding:35px 0 35px 0;
	border:none;
}
@media (max-width: 767px) {
	.footer { padding:35px 20px 35px 20px; }
}
@media (min-width: 768px) and (max-width: 979px) {
	.footer h4 { font-size:16px; }
}
.footer ul {
	margin:0;
	padding:0;
}
@media (max-width: 767px) {
	.footer ul { padding:0 0 20px 0; }
}
.footer ul li {
	background:url(images/marker.gif) no-repeat 0% 7px;
	margin:0 0 12px 0;
	padding:0 0 0 10px;
	list-style:none;
	line-height:18px;
	font-size:10px;
	text-transform:uppercase;
	color:#828890;
}
.footer ul li a {
	text-decoration:none;
	color:#828890;
}
.footer ul li a:hover {
	text-decoration:none;
	color:#242424;
}
.footer div.info {
	margin:0 0 19px 0;
	padding:9px 0 0 0;
	line-height:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#797979;
}
@media (min-width: 768px) and (max-width: 979px) {
	.footer div.info {
		line-height:16px;
		font-size:11px;
	}
}
.footer div.info strong {
	display:block;
	position:relative;
	margin:0 0 21px 0;
	padding:0 0 0 30px;
	font-weight:400;
}
@media (min-width: 768px) and (max-width: 979px) {
	.footer div.info strong { padding:25px 0 0 0; }
}
.footer div.info strong:before {
	background:url(images/icon_home.png) no-repeat 0% 0%;
	display:block;
	width:19px;
	height:16px;
	overflow:hidden;
	position:absolute;
	top:4px;
	left:0;
	content:'';
}
.footer div.info em {
	display:block;
	position:relative;
	padding:0 0 0 35px;
	font-style:normal;
}
@media (min-width: 768px) and (max-width: 979px) {
	.footer div.info em { padding:25px 0 0 0; }
}
.footer div.info em:before {
	background:url(images/icon_phone.png) no-repeat 0% 0%;
	display:block;
	width:20px;
	height:20px;
	overflow:hidden;
	position:absolute;
	top:2px;
	left:0;
	content:'';
}
.footer .footer-text {
	width:100%;
	overflow:hidden;
	margin:0 0 22px 0;
	line-height:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-transform:uppercase;
	color:#000;
}
@media (max-width: 767px) {
	.footer .footer-text { text-align:left; }
}
.footer .footer-text strong {
	display:block;
	line-height:18px;
	font-family:'Ubuntu', sans-serif;
	font-size:18px;
}
.footer .footer-text strong a {
	text-decoration:none;
	color:#000;
}
.footer .footer-text strong a:hover {
	text-decoration:none;
	color:#008e9f;
}
.footer .footer-text a {
	text-decoration:none;
	color:#008e9f;
}
.footer .footer-text a:hover {
	text-decoration:none;
	color:#272727;
}
.footer ul.social li {
	background:none;
	display:inline-block;
	margin:0 4px 0 0;
	padding:0;
	vertical-align:top;
}
.footer nav.footer-nav {
	width:100%;
	overflow:hidden;
	margin:0;
	padding:18px 0 0 0;
}
.footer nav.footer-nav ul { float:left; }
.footer nav.footer-nav ul li {
	background:none;
	margin:0 14px 0 0;
	padding:0;
}
.footer nav.footer-nav ul li.current-menu-item a {
	text-decoration:none;
	color:#242424;
}
.footer nav.footer-nav ul li a:hover {
	text-decoration:none;
	color:#242424;
}
#back-top-wrapper p#back-top { margin:0; }
#back-top-wrapper p#back-top a { width:42px; }
#back-top-wrapper p#back-top a:hover span { background-position:0% -42px; }
#back-top-wrapper p#back-top a span {
	background:url(images/up-arrow.png) no-repeat 0% 0%;
	width:42px;
	height:42px;
	overflow:hidden;
	margin:0;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
.thumbnail {
	background:#fff;
	padding:5px;
	border:1px solid #ebebeb;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.title-section h1 { margin-bottom:5px; }
.title-section ul {
	background:none;
	margin:0;
	padding:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
.title-section ul li {
	line-height:18px;
	font-size:12px;
	text-shadow:none;
	color:#7d7d7d;
}
.title-section ul li.active { color:#008e9f; }
.title-section ul li.divider {
	line-height:0;
	font-size:0;
}
.title-section ul li.divider:before {
	display:inline-block;
	margin:0 9px;
	vertical-align:top;
	line-height:18px;
	font-size:12px;
	color:#7d7d7d;
	content:'|';
}
.title-section ul li a {
	text-decoration:none;
	color:#7d7d7d;
}
.title-section ul li a:hover {
	text-decoration:none;
	color:#008e9f;
}
.post_meta {
	line-height:20px;
	font-size:12px;
	color:#7d7d7d;
}
.post_meta i { color:#008e9f; }
.post_meta a {
	text-decoration:none;
	color:#7d7d7d;
}
.post_meta a:hover {
	text-decoration:none;
	color:#008e9f;
}
.post-author {
	margin:0 0 60px 0;
	padding:30px;
	border:1px solid #e2e2e2;
}
.post-author h3 {
	margin:0 0 18px 0;
	letter-spacing:normal;
	line-height:18px;
	font-size:12px;
	text-transform:none;
	color:#7d7d7d;
}
.post-author h3 a {
	text-transform:capitalize;
	text-decoration:none;
	color:#7d7d7d;
}
.post-author h3 a:hover {
	text-decoration:none;
	color:#008e9f;
}
.post-author p.post-author_gravatar {
	background:none;
	margin:5px 20px 0 0;
}
.post-author p.post-author_gravatar img {
	background:none;
	padding:0;
	border:1px solid #e2e2e2;
}
.post-author .post-author_link p { margin:0; }
.post-author .post-author_link p a {
	text-transform:capitalize;
	text-decoration:none;
	color:#7d7d7d;
}
.post-author .post-author_link p a:hover {
	text-decoration:none;
	color:#008e9f;
}
.related-posts { margin:0 0 60px 0; }
.related-posts h3 { margin:0 0 20px 0; }
.related-posts ul li {
	line-height:18px;
	font-size:12px;
	text-transform:uppercase;
	color:#63a9cd;
}
.related-posts ul li a {
	text-decoration:none;
	color:#63a9cd;
}
.related-posts ul li a:hover {
	text-decoration:none;
	color:#474747;
}
ol.comment-list li .comment-body {
	background:none !important;
	border:1px solid #e2e2e2;
}
@media (max-width: 480px) {
	ol.comment-list li .comment-body .extra-wrap { overflow:visible; }
}
ol.comment-list li .comment-body span.author {
	line-height:18px;
	font-size:12px;
	font-weight:400;
	text-align:left;
	color:#7d7d7d;
}
@media (max-width: 480px) {
	ol.comment-list li .comment-body span.author { color:#474747; }
}
ol.comment-list li .comment-body .reply { margin:0 0 0 60px; }
ol.comment-list li .comment-body .reply a {
	line-height:20px;
	font-size:12px;
	text-decoration:none;
	color:#7d7d7d;
}
ol.comment-list li .comment-body .reply a:hover {
	text-decoration:none;
	color:#008e9f;
}
ol.comment-list li .comment-body .comment-meta {
	line-height:20px;
	font-size:12px;
	color:#008e9f;
}
.cancel-comment-reply { padding:0 0 10px 0; }
.wpcf7-form span.wpcf7-not-valid-tip { line-height:30px; }
.wpcf7-form .ajax-loader { margin:11px 0 0 0; }
.wpcf7-form .wpcf7-response-output {
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
#portfolio-grid li .thumbnail { margin:0 0 20px 0; }
.filter-wrapper { padding:0 0 15px 0; }
.type-portfolio .thumbnail.large { margin:0; }
ul.pager { margin-top:40px; }
ul.pager li a {
	background:url(images/button.gif) repeat-x 0% 0%;
	display:inline-block;
	height:42px;
	overflow:hidden;
	margin:0;
	padding:0 21px 0 21px;
	line-height:42px;
	font-family:'Ubuntu', sans-serif;
	font-size:13px;
	font-weight:400;
	border:none;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	text-decoration:none;
	color:#fff;
}
ul.pager li a:focus {
	background:url(images/button.gif) repeat-x 0% 0%;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
ul.pager li a:hover {
	background-position:0% -42px;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
.grid_gallery figure.gallery_item {
	background:none;
	padding:0;
	border:none;
}
@media (max-width: 767px) {
	.error404-holder { text-align:center; }
}
.error404-holder .error404-holder_num { color:#63a9cd; }
.error404-holder h4 {
	letter-spacing:normal;
	line-height:18px;
	font-size:12px;
	font-weight:400;
	color:#63a9cd;
}
article.clients .thumbnail { display:none; }
.clearfix { *zoom:1; }
.clearfix:before, .clearfix:after {
	display:table;
	content:"";
	line-height:0;
}
.clearfix:after { clear:both; }
.hide-text {
	font:0/0 a;
	color:transparent;
	text-shadow:none;
	background-color:transparent;
	border:0;
}
.input-block-level {
	display:block;
	width:100%;
	min-height:28px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

Open in new window


The default is for main-style.css to use a jpg image for the background image.  I just want to instruct the browser to insert a color, no image.  I can get the browser to stop showing the image in question, but I can't convince it to show the color I want.  What's wrong with my CSS here?
0
 
RobOwner (Aidellio)Commented:
Have you got a link to the page as Scott suggested?  

Given the amount of CSS it's near on impossible by reading it to know how an element is going to be rendered.

My approach would be to use the developer tools available in most major browsers and do the tweaks to see where the issue lies and what CSS is overriding what.
0
 
Azra LyndseyNerdAuthor Commented:
Makes sense, Rob.  That is a lot of CSS.  I'll see if I can narrow down what's going on and present it here.  I've made my way through the developer view in Chrome and Firefox, so I'm confident that I know what's happening, I just don't know how to fix the problem.
0
 
RobOwner (Aidellio)Commented:
There will be styles crossed it and some that aren't. It should show you next to the style what css file that style comes from.
0
 
Azra LyndseyNerdAuthor Commented:
I finally looked at this again tonight and had a face-palm moment.  I was missing the part of the CSS with the :before :after designations.  In the initial template, there's a massive overlap between them and the center element - so when I'd make the change that should work, it wasn't appearing because the other two elements were overlapping the main container.

I didn't realize that :before and :after are shown in combination with the parent selector in the browser.  So I'd highlight the lines that were generating my box, see that the entire box was fully accounted for and then try to change that one selector, instead of all three.

Thank you, everybody for helping me out here, unfortunately, I did a poor job of explaining the problem and just wasn't taking the time to observe the entire section of HTML and CSS that I was attempting to modify.

I have nominate the posts here that I found the most helpful in solving this problem for some points.
0
 
Azra LyndseyNerdAuthor Commented:
Thanks again, guys.  I do appreciate the help you gave.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now