Skip to content

Commit

Permalink
Add system HTML classes to Wiki (#3859)
Browse files Browse the repository at this point in the history
  • Loading branch information
MaxPat931 authored Jul 22, 2024
1 parent e1472c8 commit 3bff255
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 0 deletions.
1 change: 1 addition & 0 deletions wiki/Home.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
- [Journal Pages](Journal-Pages.md)
- [Roll Formulas](Roll-Formulas.md)
- [Summoning](Summoning.md)
- [System HTML](System-HTML.md)
- Tutorials
- [Custom Classes](Custom-Class-Advancement.md)
- [Custom Races](Custom-Race-Tutorial.md)
Expand Down
41 changes: 41 additions & 0 deletions wiki/System-HTML.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
![Up to date as of 3.3.0](https://img.shields.io/static/v1?label=dnd5e&message=3.3.0&color=informational)

The D&D system provides several new CSS classes for formatting text. These styles can be applied to any text field by editing the Source HTML </> and following the examples below.

## Advice and Quest Blocks
The `fvtt advice` and `fvtt quest` classes share the same format, displaying an image on the left with accompanying text in a boxed layout on the right.
Specify the image using the img src attribute within the figure block and the text within the article block.

```html
<div class="fvtt advice">
<figure class="icon">
<img src="icons/equipment/chest/robe-layered-red.webp" class="round">
</figure>
<article>
<h4>Casting in Armor</h4>
<p>Because of the mental focus and precise gestures required for spellcasting, you must be proficient with the armor you are wearing to cast a spell. You are otherwise too distracted and physically hampered by your armor for spellcasting.</p>
</article>
</div>
```
![](https://raw.githubusercontent.com/foundryvtt/dnd5e/publish-wiki/wiki/images/styles/fvttadvice.png)

## Narrative
The `fvtt narrative` class creates a text box for read-aloud text.

```html
<div class="fvtt narrative">
<p>The horses’ saddlebags have been looted. An empty leather map case lies nearby.</p>
</div>
```
![](https://raw.githubusercontent.com/foundryvtt/dnd5e/publish-wiki/wiki/images/styles/fvttnarrative.png)

## Notable
The `notable` class is used within an aside tag to create a callout box for additional information.

```html
<aside class="notable">
<h4>Joining a Secret Society</h4>
<p>If the party helps Steve, the thief privately approaches certain members of the group and urges them to join the Secret Society of Stealing.</p>
</aside>
```
![](https://raw.githubusercontent.com/foundryvtt/dnd5e/publish-wiki/wiki/images/styles/fvttnotable.png)
Binary file added wiki/images/styles/fvttadvice.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wiki/images/styles/fvttnarrative.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wiki/images/styles/fvttnotable.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3bff255

Please sign in to comment.