Forum Discussion

StephenB's avatar
StephenB
Executive
8 years ago

CSS for changing Kudo button once actioned (clicked)

Hi,

 

I'm looking to change the colour of our Like (Kudo) button once it has been clicked as a form of visual confirmation.

 

Does anyone know what css should be added to our _style.scss skin for this? I'm pretty sure it needs to be built off of the following, but I'm stumped.

#lia-body .lia-content .lia-button-image-kudos.lia-button-image-kudos-horizontal.lia-button-image-kudos-enabled.lia-button

 

Thanks in advance for any tips!

  • StephenB's avatar
    StephenB
    8 years ago

    Finally figured it out. You can simply add the following css to the skin:

     

    #lia-body .lia-content .lia-button-image-kudos.lia-button-image-kudos-horizontal.lia-button-image-kudos-enabled.lia-button.lia-button-image-kudos-kudoed {
    background-color: #desired hex color;
    color: #desired hex color;
    }

  • Payal's avatar
    Payal
    Director
    8 years ago
    StephenB - You can use the following class to change the color of Kudo Button :

    #lia-body .lia-content .lia-message-idea .lia-component-kudos-widget-button-version-2 .lia-button-image-kudos-kudoed .lia-button-image-kudos-give
    • StephenB's avatar
      StephenB
      Executive
      8 years ago

      Thanks Payal! I tried this but unfortunately it didn't help. Is the class you wrote down for the kudos button on an Ideas board?

      • StephenB's avatar
        StephenB
        Executive
        8 years ago

        Finally figured it out. You can simply add the following css to the skin:

         

        #lia-body .lia-content .lia-button-image-kudos.lia-button-image-kudos-horizontal.lia-button-image-kudos-enabled.lia-button.lia-button-image-kudos-kudoed {
        background-color: #desired hex color;
        color: #desired hex color;
        }