CSS Class issue

edited October 2019 in Problems
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. 

Comments

  • Matt SonesMatt Sones Member ✭✭
    edited August 2017
    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.
  • edited October 2019
    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;
        }




  • Matt SonesMatt Sones Member ✭✭
    edited August 2017
    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 October 2019
    Ah... thank you! This is why I try to stick to declaritive! Thanks!
  • Matt SonesMatt Sones Member ✭✭
    edited August 2017
    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
  • Matt SonesMatt Sones Member ✭✭
    edited August 2017
    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 October 2019
    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!
Sign In or Register to comment.