Link to home
Start Free TrialLog in
Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on

Modifying class, in a cascading way, for one element of page

Hello

Please look at this page:

http://rickythealien.com/  (development site)

There are two buttons near the bottom of the page.   Both have the word "Birthday" in them.

I want to make the color of the buttons white and the text also white.  I only want the css change to affect these types (class?)  of buttons.  

I tried this code and it did not work.  (Initially just to turn the font into white text.  The next step would be to turn the button also into white, which I have not attempted yet.)

.doodie-postcontent a:link a.ODude {
    color: #ffffff;
    text-decoration: underline;
    font-size: 18px;
}}

Open in new window



Thanks!

Rowby
SOLUTION
Avatar of Chris Ashcraft
Chris Ashcraft
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

Hi

Sorry for the huge delay in responding.  

Yes, you are correct the modifications should be made in the default.css in the url you indicated.

I was able to modify the default.css to get rid of the button area, but I am still seeing the black font text.

Attached is the code I have so far.  So what is left is to modify the default.css to make the BUTTON text white no matter if it is active, hovered, etc.   Always white and no underline.

Thanks!

.bar {
	color: #0072BC;
	background-color: #DDEEFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #BBDDFF;

}


.red {
	border: 1px solid blue;
}


.errorMessage {
	color: red;
	margin-left: 10px;
	font-size: 0.8em;
}


#card {
	BORDER-RIGHT: #ccc 1px solid;
	PADDING-RIGHT: 3px;
	BORDER-TOP: #ccc 1px solid;
	DISPLAY: inline;
	PADDING-LEFT: 3px;
	BACKGROUND: #F5F5F5;
	FLOAT: left;
	PADDING-BOTTOM: 3px;
	MARGIN: 1px 1px 1px 1px;
	BORDER-LEFT: #ccc 1px solid;
	PADDING-TOP: 3px;
	BORDER-BOTTOM: #ccc 1px solid;
	LIST-STYLE-TYPE: none;
	padding: 3px;
	width: 230px;

}
#card2 {
	BORDER-RIGHT: #ccc 1px solid;
	BORDER-TOP: #ccc 1px solid;
	BACKGROUND: #f5f5f5;
	MARGIN: 1px;
	BORDER-LEFT: #ccc 1px solid;
	BORDER-BOTTOM: #ccc 1px solid;
	LIST-STYLE-TYPE: none;
	padding: 3px;
}
#card A {
	COLOR: #333;
	TEXT-DECORATION: none
}
#card A:hover {
	COLOR: #0000C0;
}

.odude_round_corner {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #cbcbcb;
	background: none repeat scroll 0% 0%;
	-moz-background-clip: -moz-initial;
	-moz-background-origin: -moz-initial;
	-moz-background-inline-policy: -moz-initial;
	padding: 5px 10px 0;
	clear:both;
}
.odude_form_heading{
	overflow:hidden;
	margin:0 0 10px 0;
}
.odude_form_heading h3 {
	color: #555;
	height: 20px;
	margin: 2px 0 2px 0;
	border-bottom: 1px solid #c2c2c2;
	font-size: 14px;
	text-transform:uppercase;
}

.odude_form_heading h4 {
	color: #555;
	height: 15px;
	margin: 2px 0 0 0;
	border-bottom: 1px solid #c2c2c2;
	font-size: 10px;
	text-transform:uppercase;
}

.odude_profile_details_heading {
	float: left;
	width: 35%;
}
.odude_profile_details_ans {
	float: left;
	width: 65%;
}

.odude_hr {
	color: #555;
	height: 10px;
	margin: 2px 0 0 0;
	border-bottom: 1px solid #c2c2c2;

}

#tnt_pagination {
	display:block;
	text-align:left;
	height:22px;
	line-height:21px;
	clear:both;
	padding-top:3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
}
#tnt_pagination a:link, #tnt_pagination a:visited {
	padding:7px;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #EBEBEB;
	margin-left:3px;
	text-decoration:none;
	background-color:#F5F5F5;
	color:;
	width:22px;
	font-weight:normal;
}
#tnt_pagination a:hover {
	background-color:#DDEEFF;
	border:1px solid #BBDDFF;
	color:#0072BC;
}
#tnt_pagination .active_tnt_link {
	padding:7px;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #BBDDFF;
	margin-left:10px;
	text-decoration:none;
	background-color:#DDEEFF;
	color:#0072BC;
	cursor:default;
}
#tnt_pagination .disabled_tnt_pagination {
	padding:7px;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #EBEBEB;
	margin-left:10px;
	text-decoration:none;
	background-color:#F5F5F5;
	color:#D7D7D7;
	cursor:default;
}


-->

table.fancy {
  margin: 1em 1em 1em 0;
  background: #FFFFFF;
  border-collapse: collapse;
}
table.fancy tr:hover {
   background: #DDEEFF !important;
}
table.fancy th, table.fancy td {
  border: 0px silver solid;
  padding: 0.2em;
}
table.fancy th {
  background: gainsboro;
  text-align: left;
}
table.fancy caption {
  margin-left: inherit;
  margin-right: inherit;
}
-->
a.css_button_example {

	clear:both;

	display:block;

 float:left;

	padding:5px;

	margin:0 10px 10px 0;

	background:#ffffff;

	border:0px solid #999999;

	text-decoration:none;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size:11px;

	line-height:16px;

	text-align:center;

	color:#FFFFFF;

}

a.css_button_example:hover {

	color:#FFFFFF;

	background:#ffffff;

}
 /*Button*/

.ODude {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #effffff) );
	background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffffff', endColorstr='#ffffff');
	background-color:#ffffff;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:0px solid #dcdcdc;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:12px;
	font-weight:normal;
	padding:3px 14px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;

}


.ODude:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) );
	background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='ffffff', endColorstr='#ffffff');
	background-color:#ffffff;
}.ODude:active {
	position:relative;
	top:1px;
}
/*-----*/

Open in new window

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
The only things I can see on your page are two Links that say Birthday towards the bottom of the page. Can't see any buttons.

The colour of your links is styled in template.css, line 74.

To override this add a rule for your class of link to templates.css

.doodie-postcontent a.ODude:link {
    color: #FF0000; //set the links to red
}
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

Interesting.

I added the new code to the end of template.css  and it is showing up in firebug that it should be red. But it is showing up as black in the html.

I see in firebug that in....

http://rickythealien.com/components/com_odudecard/include/default.css  (line 248)  

....that a hover is set for black.

Could this be causing the black to "override" the red??

Rowby
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

Thanks for the solution!