Forum Discussion

SPrieto's avatar
SPrieto
Expert
11 years ago

Customizing a css tag not available in Studio

All,

 

How can I change the default color of the spoiler tag on our community? I have been searching thru the css files available to me in Studio and I cannot find where that parameter is set.

 

CSS Class = lia-spoiler-container-editor

 

I want to test a few colors on stage if at all possible before deploying to prod. I am interested in seeing how the Spoiler tag looks with one of these three colors:

  • #FFFFFF
  • #FFFFCC
  • #EBF1DD

 

Should I be adding a class definition in our global.css file or should I be making a change to the Community desktop & mobile skin? Is there a best practice I should be following?

 

Spoiler Tag sample:

Show more
This is spoiler tag text, I want to change the default community spoiler tag color to something else. Using a different color will help with the visibility of tables embedded in a spoiler 

 

  • MoniqueL's avatar
    MoniqueL
    11 years ago

    Along with what said, you should try writing css so that it's specific to that particular link vs changing the color of links throughout the community. You'll need to write something like;

     

    #lia-body .lia-content .lia-spoiler-container  a.lia-spoiler-link {color:#FFFFCC;}

     Hope that helps

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

    Along with what said, you should try writing css so that it's specific to that particular link vs changing the color of links throughout the community. You'll need to write something like;

     

    #lia-body .lia-content .lia-spoiler-container  a.lia-spoiler-link {color:#FFFFCC;}

     Hope that helps

      • SPrieto's avatar
        SPrieto
        Expert
        11 years ago

        This is the code we ended up using on our community:

         

        #lia-body .lia-content .lia-spoiler-container {background-color:#FFFFCC;}

         

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago

    Hi SPrieto - Ideally, you should change the color in the Desktop version so as to keep the mobile version seperate, if you make changes in global css, it will be inherited in Mobile as well.