1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Custom BBCode Inline Spoiler

Discussion in 'Styling and Customization Questions' started by Divvens, Jan 19, 2015.

  1. Divvens

    Divvens Well-Known Member

    So I have an implementation of a 'inline spoiler' BBCode similar to that of reddit (working example - http://orojackson.com/threads/inline-spoiler-added.6649/) and my users brought up a valid issue, if someone changes the TEXT color via BBCode then the inline spoiler doesn't work.

    I tried adding !important in the CSS Rules to ensure that the font color of the inline spoiler (without hovering) is forced to be black, always. But that doesn't seem to work.

    I currently stopped parsing BBCodes inside the inline spoiler BBCode, but that isn't the optimal solution I was looking for as having just plain BBCode tags being displayed isn't really nice.

    Is there any way I can FORCE text color to be black when (without hover) even if the user selects a different color via the rich text editor? Or is there any method where I can stop ONLY the color bbcodes from working/taking over the color of the inline spoiler black font color?
  2. cclaerhout

    cclaerhout Well-Known Member

    I haven't tested but it should work:
    Html code:
    <span class="myInlineSpoiler">Spoiler <span style="color:red">test</span></span>
    Css code:
    .myInlineSpoiler * {
      color: black !important;
    => the inline style should be overriden.
  3. Divvens

    Divvens Well-Known Member

    Works, but hover text doesn't turn white I guess due to the !important tag :p
  4. Divvens

    Divvens Well-Known Member

    Seem to have sorted it out with the following CSS:
    .MiniSpoiler {color: #000000 !important; background-color: #000000; cursor: pointer;}
    .MiniSpoiler:hover {color:#ffffff !important;}
    .MiniSpoiler span {color: #000000 !important;}
    .MiniSpoiler span:hover {color: #ffffff !important;}
  5. cclaerhout

    cclaerhout Well-Known Member

    .myInlineSpoiler:hover, .myInlineSpoiler:hover * {
       color: #fff !important;
    Divvens likes this.

Share This Page