Cathedris Themesong

Stormbril's CSS add-ons!

Interactive CSS for sale, and use in your own worlds

Welcome to my initial offering of CSS Add-ons!
  So, I have a confession. I might really, really enjoy tinkering around with CSS, exploring the limits of what you can do on World Anvil. I don't think Cathedris as a world would've existed without it! So I, along with help from some wonderful friends, have come to the realization that I might be able to offer some of this CSS tinkering as something purchasable!   The idea is simple. I've got a bunch of ideas for really interesting interactive CSS "set pieces", or add-ons. I will write the CSS, format the BBCode, and create the art and assets for each piece, and then display them here in this article. If you see one you like, you can buy it! I will give you the CSS, BBCode, and instructions on how to use it. After buying it, you have the right to use this bit of interactive CSS in as many articles and in as many different places as you so choose -- all I ask is that you show credit that it was designed by me.
 

Do you want to see more of what I can do?

Check out these articles below for examples of the interactive CSS I like to weave into my work. Maybe some of them will eventually become CSS Add-ons I offer here <3
    Questions? Concerns? Click here to see the FAQs for these CSS Add-ons

What is this?

These are fully complete "Add-Ons". I will send you the BBCode, CSS, and instructions on how to implement each add-on. You can then use it anywhere on your world, in any number of articles! I just ask you credit me with a link to this article.
 

Who can make use of these?

Because these are fairly complex, they require the use of containers. That means if you want to purchase and use one of my Add-ons, you must be at least a Grandmaster or higher on World Anvil.
 

How complicated are they?

Some of these are very complicated in their construction. However, the complexities are all just that, in the construction of them. In actual usage, you only have to copy and paste!
 

Are they hard to implement into my article?

Not at all. I will have comprehensive instructions on what portion to copy, and where to paste it. The BBCode will go in your article, and the CSS will go in your article-specific CSS section. I can help with every step along the way.
 

Initial Offerings:

  Combination Lock Spoilers
  • The fanciest, and most complicated CSS Add-on I've created yet. They are what they sound like -- spoilers that require you to input a code to open them.

  • "Simple" Spoilers
  • Essentially the same spoilers as the Combination Lock Spoilers, but with the Combination Lock removed. Still a fancy spoiler box, but much more lightweight.

  • Magic Mirrors
  • These mirrors are a content showcase tool with two parts. You can show off an image in the mirror, that when clicked, fades and becomes a small blurb of text.

  • Article Vend-o-matic (AKA The World Showcasener)
  • COMING SOON
  • Perfectly fitting for a cyberpunk, sci-fi, or any world where vending machines exist. Works to showcase the current world it's in, or your other worlds as well.

  • Important Notes

    1. Your world must have the "Visibility Toggler" turned off for all of these to work, as they will move the layouts around a bit. You can find that setting here: World Settings > Configuration > Display > Global Options > Visibility Toggle   2. Make sure you check the theme compatibility for whatever Add-on you're interested in!   3. These do not currently support BS5, though that will likely come after Summer Camp.   4. This is my first time doing this! Implementation might be slightly rocky. We will work together to get the Add-on working in your world before you have to pay anything <3   5. To buy any of these, just DM me on Discord -- Stormbril#0001. I might not be able to respond right away (my timezone is GMT-7), but I promise to get to the messages asap to help get you your Add-on :D  
    Enough of the preamble and explanation, let's get into the Add-ons already!

     

    Combination Lock Spoiler Boxes

    These are the first CSS Add-ons I will be providing for sale! They are fairly complex spoiler boxes that require you to input a code to be able to access the content within. Sure, you can use subscriber groups and subcontainers to hide your content from people as well, but I think this provides a very unique way of doing so! Maybe you give out a new code to your patreons every month, and they can use that code across your articles for access to hidden things. Maybe you hide puzzles and codes within an article, so that if someone reads carefully, they find the code and get access to the secrets. Who knows!   These Add-ons will have various levels of compatibility across base WorldAnvil themes, as well as custom themes. Please refer to each specific Add-on to see their compatibility.
    — Stormbril

    Fantasy style combination lock

    Demo Code = 2 3 4 5 6 7


    Warning
    Does not support images or spoilers within locked content.

    BS5 Support
    Coming Soon
    BBCode wordcount
    Roughly 800 words

    CSS line count
    Roughly 500 lines
    Price
    $20 CAD

    Bundle Options
    Combolock Bundle

    Here's your test content!

    This here is what you will have hidden from people. They need to use the proper code to get in and see what it is you have hidden! You can fit a variety of things within this fantasy locked spoiler.
    This is a quote!
    — This is a person
    Even more things can be hidden within!
     

    Specifications:

    This is a customizeable combination lock, built of brass and iron, and enhanced with old runes with security magic. You may set a custom 6 number combination for it to protect content behind enchanted stone that only opens when the right combination is input above!   If you purchase this combination lock, you also get the CSS and BBCode for a stand-alone, unlocked spoiler box, as seen lower on this page.
     

    Theme Compatibility

    The fantasy lock will work on most themes as a simple drop-in add-on! If you have a custom theme, or modified theme, compatibility is not guaranteed, but I can work with you to make it fit.
      There is, however, a list of themes that this lock does not work on sadly:
    Galaxy Anvil, Saltmarsh, Summercamp 2019, Worldember, Eldritch Horror, Cyberpunk 2020, Modern Spaceships, Wild Wild Steam, and Elven Forest are not compatible with the fantasy lock spoiler.
    To buy this, just DM me on Discord -- Stormbril#0001. I might not be able to respond right away (my timezone is GMT-7), but I promise to get to the messages asap to help get you your Add-on :D
       
     

    Sci-Fi style combination lock

    Demo Code = 1 2 3 4 5 6


    Warning
    Hits the nested containers limit, and thus cannot be placed within any other containers or columns

    BS5 Support
    Coming Soon

    BBCode wordcount
    Roughly 1200 words

    CSS line count
    Roughly 800 lines
    Price
    $20 CAD

    Bundle Options
    Combolock Bundle
     
    lockback.png
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    CONTENT UNLOCKED, SLIDE TO REVEAL
    This here is all the locked and hidden content you can hide within this cyber locked spoiler! However, this has sadly reached the nested container limit, and cannot feature any more containers or BBCode within it. That means no headers, no quotes, no alouds, no images, no spoilers. All that can be placed within here is basic, regular words.



    However, both BR and HRs can be used within. So with that, you are able to work in a tiny bit of formatting.
       

    Specifications:

    State of the art, top of the line, cream of the crop, only slightly used! This high tech lock comes complete with a one-tone, slightly cracked, LCD screen to display the numbers on. It has 12 lovely buttons to dial the lock's numbers both up AND down. Once the correct code is input, the securo-screen below will become operable, and you may access and view the hidden content!
      If you purchase this combination lock, you also get the CSS and BBCode for a stand-alone, unlocked spoiler box, as seen lower on this page.

    Theme Compatibility

    The Sci-Fi combination lock works on every single base theme that WorldAnvil provides. Compatibility with custome, user made, or modified themes is not guaranteed -- however I can work with you to adapt it if so. Certain themes react differently to the sci-fi lock, however.   Opulent, Galaxy Anvil, Saltmarsh, Summercamp 2019, Worldember, Eldritch Horror, Cyberpunk 2020, Modern Spaceships, Wild Wild Steam, and Elven Forest are compatibile, but have different coloured buttons. Area 51 needs a slight adjustment for the buttons to line up.

    To buy this, just DM me on Discord -- Stormbril#0001. I might not be able to respond right away (my timezone is GMT-7), but I promise to get to the messages asap to help get you your Add-on :D


     
    Cathedris breaker bar.png


     

    "Simple" Spoiler Boxes

    Maybe you really like the way the actual spoilered content looks with the combination locks, but you don't need anything that involved and complicated? Then these spoiler boxes are for you! I've stripped away the mechanics of the lock, and just left behind a cool button + spoiler that you can use wherever you like.   If you buy the combination lock, you get these simple stand-alone spoilers thrown in for free, but they can be purchased seperately for a cheaper price as well. <3

     

    Fantasy style "simple" spoiler



    BS5 Support
    Coming Soon

     
    BBCode wordcount
    Roughly 50 words

    CSS line count
    Roughly 90 lines
    Price
    $5 CAD

    Bundle Options
    Combolock Bundle, SimpleSpoils Bundle
    This, just like the fully locked version of itself, can fit a bunch of different things in it! Regular text like this, but also headers and quotes and alouds and all the fun things.

    Header 1

    Header 2

    Quote by a very quote-y person
    — The Quotinator

    alouds are good in here too!

    It unfortunately does not fit columns, either 2 or 3 wide, in here, as it goes beyond the nested container limit.
     

    Specifications:

    Who needs that rusty ol pile of gears and screws anyways! We don't need no combinations, just give us the fancy runic magic and enchanted stone, right?   This fancy spoiler box works just as that, a fancy spoiler box with much less bells and whistles, for a much lower price. Because of it's simplicity, this spoiler box can be dropped almost anywhere in your article and it should work out of the box.
     

    Theme Compatibility

    The fantasy lock will work on most themes as a simple drop-in add-on! If you have a custom theme, or modified theme, compatibility is not guaranteed, but I can work with you to make it fit.
      There is, however, a list of themes that this lock does not work on sadly:
    Galaxy Anvil, Saltmarsh, Summercamp 2019, Worldember, Eldritch Horror, Cyberpunk 2020, Modern Spaceships, Wild Wild Steam, and Elven Forest are not compatible with the fantasy spoiler.

    To buy this, just DM me on Discord -- Stormbril#0001. I might not be able to respond right away (my timezone is GMT-7), but I promise to get to the messages asap to help get you your Add-on :D

     

    Sci-Fi style "simple" spoiler



    BS5 Support
    Coming Soon

     
    BBCode wordcount
    Roughly 50 words

    CSS line count
    Roughly 200 lines
    Price
    $5 CAD

    Bundle Options
    Combolock Bundle, SimpleSpoils Bundle
    CONTENT UNLOCKED, SLIDE TO REVEAL
    Unlike the full locked and complex version of this that hits the nested container limit already, this basic unlocked one can fit a bunch of different things in it! Regular text like this, but also headers and quotes and alouds and all the fun things.

    Header 1

    Header 2

    Quote by a very quote-y person
    — The Quotinator

    alouds are good in here too!

    It unfortunately does not fit columns, either 2 or 3 wide, in here, as it goes beyond the nested container limit.
     

    Specifications:

    That silly console with all the numbers and buttons was bound to break anyways, right? Screw that, all we need is a simple user-interface for today's modern consumer. That's what this high-tech spoiler box is for! Simply swipe on the patented touch-panel, and the content will go from blurry, green, and unreadable, to... readable!   This simple spoiler screen is more compatible than its Locked counterpart, and thus is able to be placed in more locations, as it won't hit the nested container limit as soon.
     

    Theme Compatibility

    The Sci-Fi Spoiler works on every single base theme that WorldAnvil provides. Compatibility with custom, user made, or modified themes is not guaranteed -- however I can work with you to adapt it if so. Certain themes react differently to the sci-fi lock, however.   Opulent, Galaxy Anvil, Saltmarsh, Summercamp 2019, Worldember, Eldritch Horror, Cyberpunk 2020, Modern Spaceships, Wild Wild Steam, and Elven Forest are compatibile, but have different coloured buttons.

    To buy this, just DM me on Discord -- Stormbril#0001. I might not be able to respond right away (my timezone is GMT-7), but I promise to get to the messages asap to help get you your Add-on :D


     
    Cathedris breaker bar.png


     

    Magic Mirrors

    Do you have a character or item that you want to showcase? Maybe there's some secret lore or quotes about it that you want to hide for attentive readers to find? These interactive Magic Mirrors are perfect for that then! They allow you to input an image as the mirror image, that can be hovered over and clicked on to then reveal the secret content behind.   The setup and customization of the Magic Mirrors is fairly simple, and they are quite lightweight as well.

     
    Simple Mirror
    Growth Mirror
    Ornate Mirror
    Cyber Mirror
    Elegant Mirror
    Gothic Mirror

    'Simple Mirror' Example

    QUR-2TRANSPARENT.png

    'Simple Mirror' Example

      This is the simple mirror! It's a pretty basic standing mirror. You can put an image in it, and then fill this portion with text for your image! It can only handle a certain amount of text, so make sure you don't fill it too much.
    It also fits quotes.
     

    'Growth Mirror' Example

    Dimiti - Profile.png

    'Growth Mirror' Example

      This is the lovely, slightly overgrown, "Growth" mirror! It fits slightly less text than other magic mirrors.
    But has a unique shape.

    'Ornate Mirror' Example

    avartarian-transparent.png

    'Ornate Mirror' Example

      Do you want some lovely fancy borders on your magic mirror? This is the one for you. It, like the others, can handle quotes and alouds, but only a certain amount.
    This amount!
     

    'Cyber Mirror' Example

    QUR-2TRANSPARENT.png

    'Cyber Mirror' Example

      Is it a mirror? Is it a screen? It can be either!
    Did you know you can fit multiple things in here?
    Like a quote AND an aloud!

    'Elegant Mirror' Example

    Dimiti - Profile.png

    'Elegant Mirror' Example

      Similar in shape to the cyber mirror means this is one of the magic mirrors that can fit more words in it. However, this one has a simple elegance to it, should you prefer it!
    I've run out of example quotes.
     

    'Gothic Mirror' Example

    avartarian-transparent.png

    'Gothic Mirror' Example

      And finally, the gothic magic mirror! For when you need a bit of purple and gold in your life.
    Did you know HRs work in here too?
     

    Click the tabs above to preview the Mirrors!

    The mirror will then be displayed in working condition, and you can try it out. The mirrors feature both hover and clicking, functionality. They have different shapes and colours to hopefully match various themes.
    I have put in art of my God-husks as example images, but they'll handle almost anything -- but they work best with images that have transparent backgrounds. The images will try to conform to a maximum width, and have clipping applied to them to fit within the mirror frame. As for the information, I have attempted to put enough in each to show just how much the mirror can hold.
     
     
    BS5 Support
    Coming Soon

     
    BBCode wordcount
    Roughly 6 words

    CSS line count
    Roughly 100-150 lines
    Price
    $5 CAD

    Bundle Options
    Magic Mirror Bundle

    Specifications

    Perfect for character portraits or item showcase, these Magic Mirrors hide tasty secrets behind a bit of fun interactive CSS and art. They work best with transparent images being put in them! They fit wonderfully in a sidebar, either above or within the panel, within 2-wide columns next to a sidebar, or within 3-wide columns in a full footer! Each mirror can fit a different amount of content within them, and can support headers, quotes, alouds, and other containers. Clickable things like spoilers or other interactive things won't work on the mirror interior.  

    Theme Compatibility

    All 6 magic mirrors are fully compatible in every base World Anvil theme! The content within the mirrors takes on the formatting of the theme you are using, so certain themes will fit less content in the mirrors than others, because the font size might be slightly bigger or smaller. Personal themes cannot be guaranteed, but I can work with you to make it fit.

    To buy this, just DM me on Discord -- Stormbril#0001. I might not be able to respond right away (my timezone is GMT-7), but I promise to get to the messages asap to help get you your Add-on :D

     
    Cathedris breaker bar.png


     

    More Coming Soon

    I hope these initial offerings are exciting, and make you interested in what more I have to offer! I have plans for Patreon boxes, image displays, character card boxes, and I'd like to adapt my God-husks card-flipper into a more general container as well. If you have ideas of what you'd like to see, please leave a comment below and I'll think about how to make it :)





    Add-ons in the wild

    Below is a section that I will use to link to articles where these Add-ons have been used, if the author is okay with that! It might be nice to see a selection of articles to get an idea of how other people have been using these Add-ons. And, it's a nice way to share the love, and see some other people's work.

     


    Comments

    Author's Notes

    Special thanks to
    Qurilion for convincing me this was a good idea, TJ for advice, as well as Dani, Emy, Naelin, Solar, Cato, Kros, Timepool and the rest of the Lodge for being excited and giving me energy to set this up <3  
    Additional thoughts
    This is scary, I've never set up this kind of shop before. I am very, VERY INEXPERIENCED WITH THIS D: Heck, I haven't even done commissions before. What if these break? what if they're too expensive?? WHAT IF NO ONE LIKES THEM D:   Okay, I feel like people will at least like them. I just hope the implementation works more or less smoothly! Let me know if you're interested in things, and if you see something that you think can be expanded upon. And I'm always open to more ideas, too!   And of course, thank you <3


    Please Login in order to comment!
    21 Jun, 2021 23:48

    I love these. I could play with the glowy rune one all day. <3

    Emy x   Welcome to Etrea!
    22 Jun, 2021 17:11

    Thank you! :D

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    22 Jun, 2021 00:24

    AAAAAAAA I LOVE THEM ALL! Fantastic, Stormbril!


    You can do this! I believe in you!
    To Do List Adventures: RPG + interactive fiction for your goals
    Luridity (Luridity's romance, so unlike TDLA, 18+ and nsfw)
    22 Jun, 2021 17:11

    Thanks Dani! So excited to make more!

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    22 Jun, 2021 02:16

    I love all of this *o* I am SO excited for Stormy's magic css shop! The existing information seems good, I guess more detail about that interesting mention of bundles would be great but I'm assuming that's soon to come!   Congratulations on this amazing idea and I hope it goes great!

    22 Jun, 2021 17:12

    Thank you so much, Nae! I'm thinking bundles of similar add-ons (like get all the locks for X amount) kinda thing, I just need to make more so that there's enough for a bundle, haha.   I'm looking forward to offering lots more :D

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    30 Jun, 2021 18:48

    This is awesome, thank you!

    1 Jul, 2021 03:31

    Thank you, and you're welcome! Looking forward to providing more options for people to check out :)

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    30 Jun, 2021 18:51

    AHHHHHHHHHHHHHHHHHH I LOVE THEM SO MUCH, I need to share it with my friends! Now, where did I left my card...

    Visit Daeliha, Eonilline & Iphars
    Love to code, but this one is driving me crazy!
    1 Jul, 2021 03:32

    :O *excite*

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    Sage Dylonishere123
    R. Dylon Elder
    30 Jun, 2021 19:35

    Amazing work man. I'm hooked. Payday will be fun!

    1 Jul, 2021 03:32

    Thank you! :D Looking forward to making mooooooooooore

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    30 Jun, 2021 19:37

    Wow, these are impressive! I'm... speechless. Anyway, I'm bookmarking this, maybe I'll need it one day!

    creator of the Kaleidoscope System, an alien star system shaped by a colorful radiation source   SummerCamp 2021 Pledge Document
    1 Jul, 2021 03:33

    Thanks so much! Definitely stop back every once in a while, I'm going to keep trying to add different unique things for people to try :)

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    1 Jul, 2021 08:19

    Can't wait to see what else you'll create for us! ^^

    creator of the Kaleidoscope System, an alien star system shaped by a colorful radiation source   SummerCamp 2021 Pledge Document
    30 Jun, 2021 20:51

    Amazing work! :D Congrats on putting yourself out there. These are amazing and I will definitely think of you when I need something like this for future articles. Will you keep your CSS shop open during Summer Camp and other WA challenges?

    "If we wait until we're ready, we'll be waiting the rest of our lives." -Lemony Snicket
    1 Jul, 2021 03:35

    Thank you so much! Yeah, first time ever doing this, it's pretty scary :P   I plan on keeping the shop open and available always!

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    1 Jul, 2021 04:48

    This is amazing! I absolutely love all the CSS work you've done here!


    Seek out Fate in the world of Auriga!   Also, feel free to check out my Progress Report for this year's Summer Camp... AND if you want to see what I'm working on, you can check up on my Prompt Workshop space!
    2 Jul, 2021 01:56

    Thank you! Look forward to more fun CSS coming in the future :D

    Cathedris, the world of God-Husks and New Magic, welcomes you.
    Grandmaster ChroniclesofEvalaw
    Olarae & Astaroth Arcaine
    2 Jul, 2021 17:29

    These are really amazing creations! Definitely going to keep my eyes out for more of this sorcery!

    A & O Arcaine   Hey, please check out our Costume Challenge entry and tell us what you think! :)
    4 Jul, 2021 17:45

    Thank you so much! I hope you like what you see :D

    Cathedris, the world of God-Husks and New Magic, welcomes you.