Forum Discussion

lilim's avatar
lilim
Boss
10 years ago

Update CSS for Accepted Solution info header

Hi everyone,

 

I'm working on implementing the new accepted solutions info header, and I have to update the CSS for it to remove the background color and change the text color.

 

Before:

 

BeforeCSSChanges.png

 

After:

 

 

AfterCSSChanges.png

Updated CSS below:

 

/* Accepted Solution info header */
#lia-body .lia-content .lia-component-solution-info:after { clear:both; content:"."; display:block; font-size:0; height:0; line-height:0; visibility:hidden; }
#lia-body .lia-content .lia-component-solution-info { color:#333333;
    margin-bottom:10px; padding:10px; }
#lia-body .lia-content .lia-component-solution-info .solution-header-left { float:left; font-size:14px; font-weight:bold; color:#397739; text-transform:uppercase; }
#lia-body .lia-content .lia-component-solution-info .solution-header-left .solution-icon { padding:5px; }
#lia-body .lia-content .lia-component-solution-info .solution-accepter { float:right; font-size:11px; }
#lia-body .lia-content .lia-component-solution-info .solution-accepter a { font-weight:bold; }

However, I'm having trouble with where to update the CSS in Studio.  I already tried the following locations, but it did not work when I pasted the above into the editor.

 

Community Style > CSS > Our Current Skin > Skin CSS
and
Community Style > CSS > Our Skin > desktop > Skin CSS

 

Any help is appreciated. Thank you! :cathappy:

  • RobertT's avatar
    RobertT
    10 years ago

    Hi lilim

     

    Have you tried setting

     

    background-color: transparent !important;

    let me know if that helps.

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    10 years ago
    lilim - The second location is correct, however if it is not picking up the styling, try adding !important to the CSS properties, that would force the style to be implemented.
    • lilim's avatar
      lilim
      Boss
      10 years ago

      Thanks for the reply, Varun. I was able to get the CSS to work by adding the changes to the end of the desktop > Skin CSS. However, I had removed background-color completely, and realized this was not actually taking affect. And yet, if I changed background-color to another color from the default grey, then I saw the change take affect. We wanted to remove it because we have a gradient image for the solution header.

       

      I'll post back if we make any progress on this change.

      • RobertT's avatar
        RobertT
        Boss
        10 years ago

        Hi lilim

         

        Have you tried setting

         

        background-color: transparent !important;

        let me know if that helps.