Forum Discussion

StephenB's avatar
StephenB
Executive
9 years ago
Solved

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
    9 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;
    }

3 Replies

Sort By
  • Payal's avatar
    Payal
    Director
    9 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
    9 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
    9 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;
    }