Theme Development - Khorne

Theme Checklist

General

- Colour and Fonts
- Text Format
- World Front Page
- Follower Panel
- Category Page
- Timeline CSS
- Map CSS

Misc

- Search Dropdown
- Comment Section
- Article Tooltip
- Whitelabel
- Table of Contents
- World Sidebar
- Article Sidebar
- Links
- Buttons
- Notifications
- RPG-Sheets
- Dice PopUp

Templates

- Generic
- Building
- Character
- Country
- Deity
- Geography
- Item
- Organization
- Religion
- Settlement
- Species
- Verhicle
- Session Report
- Condition
- Military Conflict
- Document
- Ethnicity
- Language
- Material
- Military Unit
- Myth
- Law
- Plot
- Profession
- Prose
- Rank
- Spell
- Technology
- Tradition

Colours and Fonts

Colour Swatches

This section will show you your colour scheme and give you an idea, how well your standard text colour is readable on the respective colour.

Page Background

Panel Background

Basic Metal

Dark Metal

Light Metal

Primary

Dark Primary

Light Primary

Secondary

Dark Secondary

Light Secondary

Success

Dark Success

Light Success

Warning

Dark Warning

Light Warning

Info

Dark Info

Light Info

Danger

Dark Danger

Light Danger

Text

Dark Text

Light Text

Title Font

Latin

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Àà Áá Ââ Ãã Ää Åå Ææ Çç Èè Éé Êê Ëë Ìì Íí Îî Ïï Ðð Ññ Òò Óó Ôô Õõ Öö × ÷ Øø Ùù Úú Ûû Üü Ýý Þþ ßÿ

Latin Ext

Āā Ăă Ąą Ćć Ĉĉ Ċċ Čč Ďď Đđ Ēē Ĕĕ Ėė Ęę Ěě Ĝĝ Ğğ Ġġ Ģģ Ĥĥ Ħħ Ĩĩ Īī Ĭĭ Įį İı IJij Ĵĵ Ķķ ĸ Ĺĺ Ļļ Ľľ Ŀŀ Łł Ńń Ņņ Ňň ʼn Ŋŋ Ōō Ŏŏ Őő Œœ Ŕŕ Ŗŗ Řř Śś Ŝŝ Şş Šš Ţţ Ťť Ŧŧ Ũũ Ūū Ŭŭ Ůů Űű Ųų Ŵŵ Ŷŷ Ÿ Źź Żż Žž ſ

Numbers

0 1 2 3 4 5 6 7 8 9 0

Symbols

! " $ % ^ & * ( ) _ + { } [ ] : ~ ; ' # , . < > / ? × ÷ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ —

Headline Font

Latin

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Àà Áá Ââ Ãã Ää Åå Ææ Çç Èè Éé Êê Ëë Ìì Íí Îî Ïï Ðð Ññ Òò Óó Ôô Õõ Öö × ÷ Øø Ùù Úú Ûû Üü Ýý Þþ ßÿ

Latin Ext

Āā Ăă Ąą Ćć Ĉĉ Ċċ Čč Ďď Đđ Ēē Ĕĕ Ėė Ęę Ěě Ĝĝ Ğğ Ġġ Ģģ Ĥĥ Ħħ Ĩĩ Īī Ĭĭ Įį İı IJij Ĵĵ Ķķ ĸ Ĺĺ Ļļ Ľľ Ŀŀ Łł Ńń Ņņ Ňň ʼn Ŋŋ Ōō Ŏŏ Őő Œœ Ŕŕ Ŗŗ Řř Śś Ŝŝ Şş Šš Ţţ Ťť Ŧŧ Ũũ Ūū Ŭŭ Ůů Űű Ųų Ŵŵ Ŷŷ Ÿ Źź Żż Žž ſ

Numbers

0 1 2 3 4 5 6 7 8 9 0

Symbols

! " $ % ^ & * ( ) _ + { } [ ] : ~ ; ' # , . < > / ? × ÷ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ —

Body Font

Latin

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Àà Áá Ââ Ãã Ää Åå Ææ Çç Èè Éé Êê Ëë Ìì Íí Îî Ïï Ðð Ññ Òò Óó Ôô Õõ Öö × ÷ Øø Ùù Úú Ûû Üü Ýý Þþ ßÿ

Latin Ext

Āā Ăă Ąą Ćć Ĉĉ Ċċ Čč Ďď Đđ Ēē Ĕĕ Ėė Ęę Ěě Ĝĝ Ğğ Ġġ Ģģ Ĥĥ Ħħ Ĩĩ Īī Ĭĭ Įį İı IJij Ĵĵ Ķķ ĸ Ĺĺ Ļļ Ľľ Ŀŀ Łł Ńń Ņņ Ňň ʼn Ŋŋ Ōō Ŏŏ Őő Œœ Ŕŕ Ŗŗ Řř Śś Ŝŝ Şş Šš Ţţ Ťť Ŧŧ Ũũ Ūū Ŭŭ Ůů Űű Ųų Ŵŵ Ŷŷ Ÿ Źź Żż Žž ſ

Numbers

0 1 2 3 4 5 6 7 8 9 0

Symbols

! " $ % ^ & * ( ) _ + { } [ ] : ~ ; ' # , . < > / ? × ÷ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ —

Accent Font

Latin

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Àà Áá Ââ Ãã Ää Åå Ææ Çç Èè Éé Êê Ëë Ìì Íí Îî Ïï Ðð Ññ Òò Óó Ôô Õõ Öö × ÷ Øø Ùù Úú Ûû Üü Ýý Þþ ßÿ

Latin Ext

Āā Ăă Ąą Ćć Ĉĉ Ċċ Čč Ďď Đđ Ēē Ĕĕ Ėė Ęę Ěě Ĝĝ Ğğ Ġġ Ģģ Ĥĥ Ħħ Ĩĩ Īī Ĭĭ Įį İı IJij Ĵĵ Ķķ ĸ Ĺĺ Ļļ Ľľ Ŀŀ Łł Ńń Ņņ Ňň ʼn Ŋŋ Ōō Ŏŏ Őő Œœ Ŕŕ Ŗŗ Řř Śś Ŝŝ Şş Šš Ţţ Ťť Ŧŧ Ũũ Ūū Ŭŭ Ůů Űű Ųų Ŵŵ Ŷŷ Ÿ Źź Żż Žž ſ

Numbers

0 1 2 3 4 5 6 7 8 9 0

Symbols

! " $ % ^ & * ( ) _ + { } [ ] : ~ ; ' # , . < > / ? × ÷ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ —

---

Text Alignment

This is a basic paragraph with alignment left. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is a basic paragraph with alignment center. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is a basic paragraph with alignment right. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is a basic paragraph with alignment justify. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Text Styles

This text contains a lot of formatting. For example, this text is bold, but this text should appear cursive. For good measure, I will also include some underlined and striked text. We can also have some fake blackout-text, like so: ███████ or add some highlighted text for importance. If you work with footnotes, you may want to add some _Subtext or ^Supertext to mention this. Maybe add a Link to all of this as well.

Sometimes you may want to indent your text. Or maybe you think, that your normal font is too big, and you just want it smaller. All of this can be done with BB-Code! And did you know, that you can also add some Tooltips?

This is a BB-Code H1

This is a BB-Code H2

This is a BB-Code H3

This is a BB-Code H4

---

Lists

Ordered List

1. List Item
2. List Item
1. List in List
2. List in List
3. List Item
4. List Item

Unordered List

• List Item
• List Item
• List in List
• List in List
• List Item
• List Item

Mixed

1. List Item
2. List Item
• List in List
• List in List
3. List Item
4. List Item

Quotes, Alouds & Breadcrumbs

"

This is a quote. Somebody had something to say!

— The guy or girl who said it

This text is meant to be read to your players. Usually it will contain some sort of descriptive stuff!

Davina's CSS Empire    Main Category    Another Subcategory      Theme Development - Khorne

Article Panels

Bootstrap Features - Grandmaster+ Territory

Alerts

You can create an alert by creating a custom container, and giving it the classes mentioned in the respective alert.

alert alert-primary

alert alert-secondary

alert alert-info

alert alert-success

alert alert-warning

alert alert-danger

alert alert-light

alert alert-dark

Buttons

You can create a button by creating a custom container with the classes given in the respective button. If you wrap it in a link, your button will link to another section of your world.

btn btn-primary

btn btn-success

btn btn-light

btn btn-secondary

btn btn-warning

btn btn-dark

btn btn-info

btn btn-danger

btn btn-link

Progress Bar

Progress bars are a little bit tricky, but I like them! The construct of these is pretty simple, but it requires you to set the utility classes for the width manually, since we can't add inline-styles. First, create a custom container, that is called "progress". Within this container, setup another container and give it the "progress-bar" and your utility class. If you want to use standardized backgrounds, you can also add the bg-primary, bg-secondary, bg-success and so on classes on these.

In css, you will need to set the width of your utility class. For example, if you have a utility class of "pw-10" to indicate that you are 10% done, set the width of your utility class to 10%.If you want to add text, you can do so.

Adding the progress-bar-striped class to your inner container will give you a striped background, while progress-bar-animated will animate it. These are only usable with the standard-background classes, as far as I am aware.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Badges

Badges are a feature that comes in handy if you want to draw attention to something like an updated part. To add one, simply add a section (to have the badge inline), and give it the class mentioned in the respective badge.

badge bg-primary badge bg-secondary badge bg-info badge bg-success badge bg-warning badge bg-danger badge bg-light badge bg-dark

Cards

You can use cards to provide information and a link to a specific subject, to add some information, or just as a decorative thing. To add one, follow the instructions in the respective card.

With Header, Image, and Button

This is the title

This is the Card Text

And a linked button

To create a card like this, create a custom container and call it "card". Inside this container, first add your image as usual. Then, you will add another container below the image and call it "card-body".

The card-body container holds the additional elements: a container called "card-title" with a bb-code h4 inside for your title, and the "card-text" container, which actually holds your description text.

If you also want to add a linked button, first add the link element as usual. Instead of the link-text, add a custom container for your button, and add the link text inside.

With Title, Text and Button

This is the title

This is the Card Text

And a linked button

This card uses exactly the same code as the first one, but I stripped the image away.

Text only

This Card contains only the text part.

Again, the basic structure remains, but I also deleted the title and the button from this one.

This Card contains only the text part. And another background-color!

To change the background-color, you can simply add one of the bg- classes from bootstrap - or any you created yourself! Let's change the text color now:

This Card contains only the text part.

Bootstrap offers a bunch of pre-defined text colors. To be precise, these ones:

• text-primary
• text-secondary
• text-success
• text-danger
• text-warning
• text-info
• text-light
• text-dark
• text-muted
• text-white

To make use of them, you can simply add the respective class to your custom container or section.

About background and text classes

The classes you've seen above make it very easy to create a quick, custom container. Especially, if you add your own and make use of the (also predefined) border-roundings and other things. Let's create a quick custom container, by creating it, and adding the following classes: bg-primary, text-light, border-primary, and rounded.

This is the container that comes from this. I did not add any additional classes.

This needs some spacing, so let's just add the p-2 class to it!

This is the container that comes from this. I did not add any additional classes.

That's much better, and a good starting point. And what you've seen here, is the reason why I recommend you to create your own background, text and border classes to save your colors and be able to thow something together really quick!

Additional Panels

These panels will adopt the style of your sidebar panels, and you can add them anywhere in your articles, on your front page, or even in your sidebar. To do so, just add a custom container with the classes "panel" and "panel-default". In addition, add a container inside, which has the class "panel-body". Then add your content, like this:

This is just a panel, which saves me a lot of time, because I will only need to style them once! Amazing!

Of course we do have some additional padding issues, which we could solve with the trusted "p-2" class! You can either do this, or just add the padding in your stylings!

Fabled Legend Davina

Susanne Lamprecht

                       

Vampire loving servant of several chaotic forces.

Current Project: Die verlorenen Legionen

1d20

Text Alignment

This is a basic paragraph with alignment left. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is a basic paragraph with alignment center. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is a basic paragraph with alignment right. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This is a basic paragraph with alignment justify. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Text Styles

This text contains a lot of formatting. For example, this text is bold, but this text should appear cursive. For good measure, I will also include some underlined and striked text. We can also have some fake blackout-text, like so: ███████ or add some highlighted text for importance. If you work with footnotes, you may want to add some _Subtext or ^Supertext to mention this. Maybe add a Link to all of this as well.

Sometimes you may want to indent your text. Or maybe you think, that your normal font is too big, and you just want it smaller. All of this can be done with BB-Code! And did you know, that you can also add some Tooltips?

This is a BB-Code H1

This is a BB-Code H2

This is a BB-Code H3

This is a BB-Code H4

---

Key-Value Pairs

Key

Value

Key

Value

Key

Value with some more content to have a line break in it

---

Lists

Ordered List

1. List Item
2. List Item
1. List in List
2. List in List
3. List Item
4. List Item

Unordered List

• List Item
• List Item
• List in List
• List in List
• List Item
• List Item

Mixed

1. List Item
2. List Item
• List in List
• List in List
3. List Item
4. List Item

Quotes & Alouds

This is a quote. Somebody had something to say!

— The guy or girl who said it

This text is meant to be read to your players. Usually it will contain some sort of descriptive stuff!

Article Panels

Bootstrap Features - Grandmaster+ Territory

Alerts

alert alert-primary

alert alert-secondary

alert alert-info

alert alert-success

alert alert-warning

alert alert-danger

alert alert-light

alert alert-dark

Buttons

btn btn-primary

btn btn-success

btn btn-light

btn btn-secondary

btn btn-warning

btn btn-dark

btn btn-info

btn btn-danger

btn btn-link

Progress Bar

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Badges

badge bg-primary badge bg-secondary badge bg-info badge bg-success badge bg-warning badge bg-danger badge bg-light badge bg-dark

Cards

With Header, Image, and Button

This is the title

This is the Card Text

And a linked button

With Title, Text and Button

This is the title

This is the Card Text

And a linked button

Text only

This Card contains only the text part.

This Card contains only the text part. And another background-color!

This Card contains only the text part.