CSS Class issue

  • 1
  • Problem
  • Updated 1 year ago
  • Solved
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. 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Raymond,

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.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
That 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;
    }
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I'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;
    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;
    }
(Edited)
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Ah... thank you! This is why I try to stick to declaritive!
Thanks!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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,
.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;
    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;
    }
(Edited)
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
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!