CSS Class Variants - Option 1

As I was tinkering with map labels and wanting the same basic label with different colors, it annoyed me to have to copy the same code over and over. Variables help - but I'd still like to conserve code. Here's how I got it to work.

What you'll need:
2 (or more) containers (slight variants of each other)

Our example:

Here we have 2 variations of my basic blue box with the same shaping, padding, and margins.  
Teal Box
Lime Green Box


[class*=HLBox ] { 
 border-radius: var(--box-radius) ;
 padding: var(--box-pad) ;
 margin: 0 0 10px;
.HLBox {
 background: var(--HLbox-bg) ;
 color: var(--text-color) ;
.HLBox-lime {
 background: #AEC900;
 color: #000;
 background: #3db8ba;
 color: #000;

[class*=HLBox ] - this line is the KEY. We're using a CSS Selector that says if a class name contains 'HLBox' in it, use the following attributes and properties. Set the basics for your container or section here.   .HLBox - my "generic" blue box   .HLBox-lime and .HLBox-teal- slight variations in background and text colors.


BBCode for the Boxes

	[container:HLBox-teal] Teal Box [/container]
	[container:HLBox-lime] Lime Green Box [/container]
Side Note: This is just one of many things that can be done with selectors. If you'd like to read more about it, head on over to: CSS Selector's Reference.

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.


10/20/2019 - BBcode was broken after WA upgrade. Fixed. + added the BBcode for the boxes.


Please Login in order to comment!
Powered by World Anvil