/foundry-vtt-5e-phb-journal-styling

This is the CSS used for mimicking the 5e PHB styline for the journal in foundry vtt

Primary LanguageCSS

D&D 5th Edition PHB Journal Styling for Foundry VTT

Example Image of this CSS

Usage (With Module)

  1. First you'll need to copy the Manifest URL: https://raw.githubusercontent.com/Daxiongmao87/foundry-vtt-5e-phb-journal-styling/main/module.json
  2. Navigate to your Foundry VTT instance, go to Addon Modules and click on the Install Module button.
  3. Paste the Manifest URL in the field at the bottom where it says "Manifest URL:" and click the install button.
  4. Load your world.
  5. Navigate to the Settings tab, then click the 'Manage Modules' button.
  6. Search for the D&D 5th Edition PHB Journal Styling module, and ensure the checkbox is checked, and click on the "Save Module Settings" button.
  7. Assuming you are not using Monk's Enhanced Journal, your editor will now have new tools on your toolbar, including a font selector with all the D&D Journal Styling fonts listed.
  8. Create a journal and see!

Usage (Without Module)

  1. First you'll need to install and enable this module in your world: https://foundryvtt.com/packages/custom-css
  2. Then copy the code from: https://github.com/Daxiongmao87/foundry-vtt-5e-phb-journal-styling/blob/main/5e-phb.css
  3. In your world, navigate to Configure Settings -> Module Settings -> Custom CSS -> Custom CSS Rules
  4. Paste the copied code from step 2, and save changes
  5. Now when you make a journal entry, using the built-in journal formatting tools, it should mimic the 5e PHB style.
  6. If not using the module, you will not have the enhanced editor toolbar.

Note: In order to use css options like the class-specific table in the screenshot above, you'll have to:

  1. Place your cursor in a table
  2. Under Custom, select "Fancy table" Source Screenshot

Contributors

Credit

All font used in this CSS is from https://github.com/jonathonf/solbera-dnd-fonts