Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-03-23
6
Medium Priority
?
237 Views
Last Modified: 2012-03-28
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
0
Comment
Question by:Rowby Goren
[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
  • 2
6 Comments
 
LVL 7

Assisted Solution

by:micropc1
micropc1 earned 1000 total points
ID: 37759944
Maybe I'm misunderstanding what you're wanting to do, but have you tried just updating the CSS in the referenced stylesheet at http://rickythealien.com/components/com_odudecard/include/default.css?

/*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, #f9f9f9), color-stop(1, #e9e9e9) );
      background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
      background-color:#f9f9f9;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px 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, #e9e9e9), color-stop(1, #f9f9f9) );
      background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
      background-color:#e9e9e9;
}.ODude:active {
      position:relative;
      top:1px;
}
/*-----*/
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 37763498
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

0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 37765418
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
}
0
Industry Leaders: 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 9

Author Comment

by:Rowby Goren
ID: 37771303
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
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 1000 total points
ID: 37771461
Checked it in Firefox and IE and the text is appearing as red. Although in IE you do have a blue button-like background - nowhere to be seen in Firefox.

For a full set of pseudo links, you may want to set the colour for all 4 states.

.doodie-postcontent a.ODude:link {color:#FF0000;}      /* unvisited link */
.doodie-postcontent a.ODude:visited {color:#FF0000;}  /* visited link */
.doodie-postcontent a.ODude:hover {color:#FF0000;}  /* mouse over link */
.doodie-postcontent a.ODude:active {color:#FF0000;}  /* selected link */

For them to work properly, the order is important.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 37776646
Thanks for the solution!
0

Featured Post

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

705 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