Sticky Examples for individual styles

    • Examples for individual styles


      the following two examples demonstrate individual styling of members-only spoiler BBCodes with CSS.
      On the one hand, the "Members Only" spoiler, which is not accessible for guests and search engine robots, but for all registered members.
      On the other hand, the "Premium Only" spoiler, which reveals its contents only to members with paid subscriptions (however, does not offer paid subscriptions ;) ).
      If you have any questions regarding the styling of your own members-only spoiler BBCodes or you need any help, do not hesitate to contact me :)

      Members Only
      You’re not authorized to see the contents of “Members Only”.

      Premium Only
      You’re not authorized to see the contents of “Premium Only”.

      The members-only spoiler BBCodes have the following HTML structure:

      HTML Source Code

      1. <div class="membersOnlySpoiler[uc_bbcode]">
      2. <div class="container containerPadding spoilerBox">
      3. <header class="jsOnly">
      4. <a class="button jsSpoilerToggle">[Title]</a>
      5. </header>
      6. <div style="display: none" >
      7. Inhalt
      8. </div>
      9. </div>
      10. </div>

      The placeholder [uc_bbcode] is replaced by the uppercase BBCode. For example, in case of the [premium][/premium] BBCode the CSS class is membersOnlySpoilerPremium.
      The [Title] is replaced with the title of the BBCode, e.g. Premium Only. The title can be entered in the different installed languages when the BBCode is created in the ACP.