Styling the Subcontainer Tags (For Subscriber Secrets that Are Embedded in Your Articles)

After the new [subcontainer] tags were released, of course I wanted to style them! But they have 'container' one of the WA banned words. What is a CSS styling junkie to do? Well, there's a way around it.  

Please don't abuse this and try to style 'container' and the other banned words, ok? The banned words are there for security reasons. If my post is abused I'll remove it. And worse, this way to style the containers may be removed. Which would affect more things like styling RPG sheets, etc.
  As of the writing of this post, [subcontainer] is not in the Codex yet. (Looks like I need to do that...) But it's documented on the Discord Server here.

 
What you'll need:
A subcontainer you want to style
A bit of CSS
 

Our example:

Here is a [subcontainer] that I styled for one of my self-assigned subscription groups.
sytled subcontainer.png
  I wanted to not just style the subscription containers, but style for each subscription group so my subscribers can see a different colored box for each group and easily ID which group's secrets they are reading, since they can pick more than one group.   Conveniently there is a class for each subscriber group with a name 'subcontainer-XXXXXXXX-YYYY-XXXX-YYYY-XXXXXXXXXXXX', where all the X's and Y's are actually a unique number and letter identifier.
subcontainer HTML.png
   

CSS

.user-css [class*=subcontain] {
display: block;
** Your styling options here **
}   .user-css [class*=XXXXXXXX-YYYY-XXXX-YXXX-XXXXXXXXXXXX] {
** Your styling options here **
}

CSS Notes

.user-css [class*=subcontain] - **This is the magic that allows us to style the subcontainers in general** the 'class*=' looks for a class with 'subcontain' in the name. Don't use 'container' in the name - as it will get stripped out. See the W3 Schools Selectors Reference for more info on selectors.   display: block; - I wanted the subscription containers to act like most other containers in WA, this is the usual setting. See CSS Display Property for more info.
.user-css [class*=XXXXXXXX-YYYY-XXXX-YXXX-XXXXXXXXXXXX] - Styling JUST a single subscriber group's container. Again we use the '*=' selector magic to just pick out the special number and letter designation for that subscriber group. Please note your class selector name can't start with a number
Class Selectors can't start with a number
So if the 'XXXXXXXX-YYYY-XXXX-YXXX-XXXXXXXXXXXX' part of your 'subcontainer-XXXXXXXX-YYYY-XXXX-YXXX-XXXXXXXXXXXX' class name starts with a number add a little more of the class name. Like in the example below.
CSS Class selectors - using a little more of the name
   

BBCode

 
		[subcontainer:XXXXXXXX-YYYY-XXXX-YXXX-XXXXXXXXXXXX]
  
  	Some super secret important schtuff!
  
		[/subcontainer]
	

Updates

6/8/2020 - added help for subcontainer ids that start with numbers.

For Grandmasters +

Grandmaster Icon


Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.


(Grandmaster icon property of World Anvil.)

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.



Cover image: Hacks and Help Cover by krzysztof-m

Comments

Please Login in order to comment!
Powered by World Anvil