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)

[container: HLBox glow bar-25] bar-25 [/container]

bar-90

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] 

Font Awesome Icon Codes For The AURORA Theme (GM+)

These icons will fit the theme nicely, so I've put the codes here for easy copy and paste.

---

Icon	Section Code (To Copy and Paste)	Icon	Section Code (To Copy and Paste)
	[section: far fa-narwhal ] [/section]		[section: fas fa-whale] [/section]
	[section: fas fa-crow] [/section]		[section: fas fa-squirrel ] [/section]
	[section: fas fa-badger-honey ] [/section]		[section: fas fa-otter ] [/section]
	[section: fas fa-deer ] [/section]		[section: fas fa-tree ] [/section]
	[section: fas fa-mountains ] [/section]		[section: fas fa-mountain] [/section]
	[section: fas fa-moon ] [/section]		[section: fas fa-sun ] [/section]
	[section: fas fa-star ] [/section]		[section: fas fa-stars ] [/section]
	[section: fas fa-meteor ] [/section]		[section: fas fa-book-spells ] [/section]

Navigate

Classes

Palette BG Colors
Container Classes
Text Highlighting
Text Color
Font Classes
Width Percentages
Rounded Corners
Statblock No BG
Extra Margin

Usage Notes

Extras

Theme Tweaks
Font Awesome Icons

---

return to top