Forum Discussion

adsk_cmgrs's avatar
adsk_cmgrs
Director
11 years ago

Change the Accepted Solution Button Color

Hello everyone.

 

I know (or believe at least) that the button color styling for our community is buried somewhere in our CSS, just don't have the slightest idea where. Does anyone know if there is an easy override for changing the color of an individual button such as "Accept as a Solution"? Any insight that you have would be much appreciated!

  • NicoB's avatar
    NicoB
    11 years ago

    No worries adsk_cmgrs 

    Everyone is a beginner at some point :)

     

    The CSS you should define should look something like this:

     

    #lia-content .lia-component-accepted-solutions-actions-mark-message-as-accepted-solution-secondary-button
{
  color:#95c45a
}

     Note the "." before the long CSS class.

    You should use the "#" when you want to reference an element's ID (unique for the whole HTML page).

    When you want to change one or more elements sharing the same CSS class you can reference it with the "." 

     

    I hope this helps..

    Thanks,

    Nico

  • dementad's avatar
    dementad
    11 years ago

    Have you looked at the element with a debugger to see where the CSS is coming from? Chrome has a nice built-in one. Just right click on the button and "Inspect element."

7 Replies

Sort By
  • NicoB's avatar
    NicoB
    Lithium Alumni (Retired)
    11 years ago
    Hi,
    there's a class attched to the Accepted solution button:
    lia-component-accepted-solutions-actions-mark-message-as-accepted-solution-secondary-button

    Maybe you could override this class?
  • adsk_cmgrs's avatar
    adsk_cmgrs
    Director
    11 years ago

    I'm just starting to get my feet wet with CSS / would it just look something like this:

     

    #lia-component-accepted-solutions-actions-mark-message-as-accepted-solution-secondary-button
    { color:#95c45a}

     

    Apologies again for my lack of knowledge here.

  • NicoB's avatar
    NicoB
    Lithium Alumni (Retired)
    11 years ago

    No worries adsk_cmgrs 

    Everyone is a beginner at some point :)

     

    The CSS you should define should look something like this:

     

    #lia-content .lia-component-accepted-solutions-actions-mark-message-as-accepted-solution-secondary-button
{
  color:#95c45a
}

     Note the "." before the long CSS class.

    You should use the "#" when you want to reference an element's ID (unique for the whole HTML page).

    When you want to change one or more elements sharing the same CSS class you can reference it with the "." 

     

    I hope this helps..

    Thanks,

    Nico

  • SeanA's avatar
    SeanA
    Lithium Alumni (Retired)
    11 years ago

    CSS is a skill that applies well beyond just Lithium; you can work quite a bit of magic with it.

     

    If you find that you will be doing a fair amount of CSS changes, I would highly recommend one of the many books on the subject (CSS3 The Missing Manual worked well for me when I was coming up to speed on it). 

  • adsk_cmgrs's avatar
    adsk_cmgrs
    Director
    11 years ago

    Thanks for the replies! Unfortunately that did not do the trick... Lithium PS had done some work on our site a few months ago to standardize the color of our buttons. Any chance that there is some sort of a master override enabled? If so, any idea of what to look for and/or how to get around it?

  • dementad's avatar
    dementad
    Genius
    11 years ago

    Have you looked at the element with a debugger to see where the CSS is coming from? Chrome has a nice built-in one. Just right click on the button and "Inspect element."

  • adsk_cmgrs's avatar
    adsk_cmgrs
    Director
    11 years ago

    I had not but that was definitely what I needed to do to find the proper CSS pieces (1 was controlling the standard color, and another the button mouse over, both of which were the same).

     

    Much appreciated!