I have two button sets on my page. Each has one button. I want one button to have a blue background so I created an inline css class named “BlueButtonClass”. I want the other button to have a transparent background so I did the same and named it “TransparentButtonClass”. Each one works great, however, I can’t use both classes on the same page. Which ever Inline CSS is last in the list trumps any CSS class before it, so even if I assign “BlueButtonClass” to one button and “TransparentButtonClass” to the other button, they both have the same background color which is the color of the class that is the last in the CSS list.
Question
CSS Class issue
+17
+18Raymond,
You just need ONE css resource with the css for both buttons in it. If you paste in your css for both buttons I can show you what it should look like.
+17That would be awesome! Here you go. These are not full CSS styles, just hacks that override some of the theme styles to give me the look I need. There is probably so superfluous stuff in their too…
Thanks!
Button Style 1:
.TransparentButtonClass.ui-button, .ui-widget-content .ui-button.ui-state-default, .ui-button.ui-state-active, .ui-widget-content .ui-button.ui-state-default.ui-state-active, .ui-button.ui-state-hover, .ui-widget-content .ui-button.ui-state-default.ui-state-hover, .ui-button.ui-state-focus, .ui-widget-content .ui-button.ui-state-default.ui-state-focus {
background: transparent;
font-family: Georgia,serif;
font-size: 12px;
font-weight: 600;
color: black;
border: none;
/* border-bottom: 3px solid #0097a7; /
box-shadow: 0px 0 rgba(0,0,0,0.2);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding: 0px;
}
Button Style 2:
.BlueButtonClass.ui-button, .ui-widget-content .ui-button.ui-state-default, .ui-button.ui-state-active, .ui-widget-content .ui-button.ui-state-default.ui-state-active, .ui-button.ui-state-hover, .ui-widget-content .ui-button.ui-state-default.ui-state-hover, .ui-button.ui-state-focus, .ui-widget-content .ui-button.ui-state-default.ui-state-focus {
background: #1f497d;
font-weight: 400;
color: white;
border: none;
/ border-bottom: 3px solid #0097a7; */
box-shadow: 0px 0 rgba(0,0,0,0.2);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding: 0px;
}
+18I’ll just hit the first one, as an example.
Looks like your css is only using your class on the first class set, not all the subsequent ones that are comma delimited. Everywhere you see .ui-button, you should repace that with .TransparentButtonClass.ui-button, like so:
.TransparentButtonClass.ui-button, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default, .TransparentButtonClass.ui-button.ui-state-active, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-active, .TransparentButtonClass.ui-button.ui-state-hover, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-hover, .TransparentButtonClass.ui-button.ui-state-focus, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-focus {
background: transparent;<br /> font-family: Georgia,serif;<br /> font-size: 12px;<br /> font-weight: 600;<br /> color: black;<br /> border: none;<br /> /* border-bottom: 3px solid #0097a7; */<br /> box-shadow: 0px 0 rgba(0,0,0,0.2);<br /> -webkit-border-radius: 7px;<br /> -moz-border-radius: 7px;<br /> border-radius: 7px;<br /> padding: 0px;<br /> }
If you want to assign the class to the button set instead of the button, you want to add the same set of rules again, but with a space between .TransparentButtonClass and .ui-button
+18Like so:
<br />.TransparentButtonClass .ui-button, .ui-widget-content .TransparentButtonClass .ui-button.ui-state-default, .TransparentButtonClass .ui-button.ui-state-active, .ui-widget-content .TransparentButtonClass .ui-button.ui-state-default.ui-state-active, .TransparentButtonClass .ui-button.ui-state-hover, .ui-widget-content .TransparentButtonClass .ui-button.ui-state-default.ui-state-hover, .TransparentButtonClass .ui-button.ui-state-focus, .ui-widget-content .TransparentButtonClass .ui-button.ui-state-default.ui-state-focus,<br />.TransparentButtonClass.ui-button, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default, .TransparentButtonClass.ui-button.ui-state-active, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-active, .TransparentButtonClass.ui-button.ui-state-hover, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-hover, .TransparentButtonClass.ui-button.ui-state-focus, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-focus { background: transparent;<br /> font-family: Georgia,serif;<br /> font-size: 12px;<br /> font-weight: 600;<br /> color: black;<br /> border: none;<br /> /* border-bottom: 3px solid #0097a7; */<br /> box-shadow: 0px 0 rgba(0,0,0,0.2);<br /> -webkit-border-radius: 7px;<br /> -moz-border-radius: 7px;<br /> border-radius: 7px;<br /> padding: 0px;<br /> }
Well that explains a lot of my frustration with CSS! I don’t have to use CSS much thanks to themes and component properties, but when I do, I have gotten mixed results… I know now why thanks to your responses.
Thanks!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.