Aurora Bonus Classes
(For Grandmaster +)
I made this theme with flexible container use in mind. People should be able to mix and match styles!You can copy/paste the class names from this page.
Almost every aspect is variable based. If you wish to make simple changes, I'd recommend changing the variable values in your CSS. (Swap an attribute value for a different one or redefine the variable itself.) That will change things universally and you'll have fewer changes to make.
Classes
Palette of color classes (for backgrounds):
Transparent
aurora-1t
aurora-2t
aurora-3t
aurora-4t
aurora-5t
aurora-6t
aurora-7t
aurora-8t
aurora-9t
aurora-ft
aurora-nightt
aurora-wt
Light
aurora-1l
aurora-2l
aurora-3l
aurora-4l
aurora-5l
aurora-6l
aurora-7l
aurora-8l
aurora-9l
aurora-fl
aurora-nightl
aurora-wl
Normal
aurora-1
aurora-2
aurora-3
aurora-4
aurora-5
aurora-6
aurora-7
aurora-8
aurora-9
aurora-f
aurora-night
aurora-w
Dark
aurora-1d
aurora-2d
aurora-3d
aurora-4d
aurora-5d
aurora-6d
aurora-7d
aurora-8d
aurora-9d
aurora-fd
aurora-nightd
aurora-wd
Gradients - Transparent
g-aurora-1
g-aurora-2
g-aurora-3
g-aurora-4
g-aurora-5
g-aurora-6
g-aurora-7
g-aurora-8
g-aurora-9
g-aurora-f
g-aurora-night
g-aurora-w
Gradients - Solid
gs-aurora-1
gs-aurora-2
gs-aurora-3
gs-aurora-4
gs-aurora-5
gs-aurora-6
gs-aurora-7
gs-aurora-8
gs-aurora-9
gs-aurora-f
gs-aurora-night
gs-aurora-w
Container Classes
'Hightlight Boxes'
HLBox
[container: HLBox] [/container]
HLBox glow
[container: HLBox glow] [/container]
Which can be used with the palette classes to change the background color
HLBox glow
aurora-8t
[container: HLBox glow aurora-8t] [/container]
HLBox
g-aurora-9
[container: HLBox g-aurora-night] [/container]
Text Highlighting Class
HL section (Highlight) class to emphasize a section of text
(Also can be used with palette color classes).
Text Color Classes
red
orange
yellow
green
blue
purple
white
black
gray
lightgray-hex
lightgray-hex-50
Font classes
font-1
font-2
font-3
font-4
font-5
font-code
Pt Based size
fsize-h0
fsize-h1
fsize-h2
fsize-h3
fsize-h4
fsize-h5
fsize-h6
fsize-text
Em based Size
fsize-big
fsize-small
fsize-med
Width Percentages
(Thanks To MappingDragon - for showing me this!)
Classes are bar-XX (where XX is the width in % by 5s)
Rounded Corners
You may want or need to round the corners of some containers. Add round-corners to your classes list for the container. See the Usage Notes for an example where I needed to use round-corners to change the bg color of an h2 element.
[container: g-aurora-7 round-corners] [center]Rounding Corners Test [/center] [/container]
Rounding Corners Test
Display a Statblock Without it's Box / Background
display-contents-statblock to display a statblock with it's parent container's attributes. See this article for more info.
Can you tell this section below is a statblock?
Theme Tests - Generic Text Block
Did you see that moose? It was more than twice the height of my car!
Extra margin at the top of items
no extra space at the top
no extra space at the top
with extra space at the top
use class marg-top-lg in a container around the item.
Usage Notes
When inputting the container to use these effects
put the class you want to change (i.e. such as the theme's box class HLBox)
then the modifying aspects (background color aurora-6t).
The hierarchy of the classes goes from left to right.
(i.e. the farther right class in the list overwrites attributes to the left.)
For Containers and Sections
It would look like this:
[container: HLBox aurora-1t] YOUR TEXT/STUFF HERE [/container]
For WACode/BBcode Elements
You'll need to surround the element or the contents of the element with a container.
Examples:
At the top of this article there's a light green header that says these classes are for Grandmaster +. This is how I did that.
[h3]
[section: HL aurora-2l black fsize-h2 ]
[section: fas fa-book-spells ] [/section]
(For Grandmaster +)
[section: fas fa-book-spells ] [/section]
[/section]
[/h3]
Or to add a little space at the top of an H1 tag I did this for the big header 'Classes' just below this box.
[container: marg-top-lg][h1]Classes[/h1][/container]
Notes on WACode/BBcode
The background color classes don't always play nice with some WACode/BBcode elements. For example if I want to color an H2 header with the auora-3t class (kind of a teal semi-transparent color).
Putting the bg color class on the outside of the [h2] does not work.
[container: aurora-3t round-corners][h2]This does not play nice. [/h2][/container]
This does not play nice.
But putting it on the inside does work.
[h2][container: aurora-3t round-corners]This plays nice.[/container][/h2]
This plays nice.
Other Tweaks To Go With The Theme
Invisible space character [ ] <- between the brackets that you can copy from here.
You can use an empty h1 or h2 as a nicely styled [hr].
Examples:
[h2] [/h2]
[h1] [/h1]
aurora-1t
aurora-2t
aurora-3t
aurora-4t
aurora-5t
aurora-6t
aurora-7t
aurora-8t
aurora-9t
aurora-ft
aurora-nightt
aurora-wt
aurora-1l
aurora-2l
aurora-3l
aurora-4l
aurora-5l
aurora-6l
aurora-7l
aurora-8l
aurora-9l
aurora-fl
aurora-nightl
aurora-wl
aurora-1
aurora-2
aurora-3
aurora-4
aurora-5
aurora-6
aurora-7
aurora-8
aurora-9
aurora-f
aurora-night
aurora-w
aurora-1d
aurora-2d
aurora-3d
aurora-4d
aurora-5d
aurora-6d
aurora-7d
aurora-8d
aurora-9d
aurora-fd
aurora-nightd
aurora-wd
g-aurora-1
g-aurora-2
g-aurora-3
g-aurora-4
g-aurora-5
g-aurora-6
g-aurora-7
g-aurora-8
g-aurora-9
g-aurora-f
g-aurora-night
g-aurora-w
gs-aurora-1
gs-aurora-2
gs-aurora-3
gs-aurora-4
gs-aurora-5
gs-aurora-6
gs-aurora-7
gs-aurora-8
gs-aurora-9
gs-aurora-f
gs-aurora-night
gs-aurora-w
[container: HLBox] [/container]
[container: HLBox glow] [/container]
[container: HLBox glow aurora-8t] [/container]
[container: HLBox g-aurora-night] [/container]
Rounded Corners
Rounding Corners Test
Display a Statblock Without it's Box / Background
Theme Tests - Generic Text Block
Did you see that moose? It was more than twice the height of my car!
no extra space at the top
no extra space at the top
with extra space at the top
Usage Notes
When inputting the container to use these effects
The hierarchy of the classes goes from left to right.
(i.e. the farther right class in the list overwrites attributes to the left.)
For Containers and Sections
It would look like this:[container: HLBox aurora-1t] YOUR TEXT/STUFF HERE [/container]
For WACode/BBcode Elements
You'll need to surround the element or the contents of the element with a container.Examples:
At the top of this article there's a light green header that says these classes are for Grandmaster +. This is how I did that.[h3] [section: HL aurora-2l black fsize-h2 ] [section: fas fa-book-spells ] [/section] (For Grandmaster +) [section: fas fa-book-spells ] [/section] [/section] [/h3]Or to add a little space at the top of an H1 tag I did this for the big header 'Classes' just below this box.
[container: marg-top-lg][h1]Classes[/h1][/container]
Notes on WACode/BBcode
The background color classes don't always play nice with some WACode/BBcode elements. For example if I want to color an H2 header with the auora-3t class (kind of a teal semi-transparent color). Putting the bg color class on the outside of the [h2] does not work.[container: aurora-3t round-corners][h2]This does not play nice. [/h2][/container]
This does not play nice.
[h2][container: aurora-3t round-corners]This plays nice.[/container][/h2]
This plays nice.
Other Tweaks To Go With The Theme
[h2] [/h2]
[h1] [/h1]
Comments