Epic Initiative CSS Hacks (Patreon)

Hello DMs!

I've been making a bit more time since last month to work on the app, but I don't expect to have a large release in November. In the meantime, I wanted to provide some examples of the sort of ad-hoc customization you can achieve today with Epic Initiative's Custom CSS feature.

Adjust text size

Adjust the size of all text on the screen with a wildcard rule:

* { font-size: 24pt; }

Make the Active Combatant stand out

Make the currently active combatant more obvious by applying a background color:

.combatant.active { background-color: lightgreen; }

Embolden your heroes

Apply styles to just your player characters.

.combatant.playercharacter { font-weight: bold; }

Display less information

Completely hide HP and Tags.

.combatant__hp, .combatant__tags { display:none; }

Hide all monster names

Obfuscate all the creatures you add to combat.

.combatant:not(.playercharacter) .combatant__name { font-size: 0px; }

.combatant:not(.playercharacter) .combatant__name::before { font-size: 20px; content: "👹"; }

Big active combatant portrait

Show the active combatant's portrait on the left

#playerview .combatant.active .combatant__portrait img { 

    position: fixed;

    max-height:none;

    max-width:200px; 

    z-index:1;

    left: 0;

    top: 0;

}

.combatants, .combatant--header {

    margin-left: 200px;

}

Custom Fonts (from Senjata Witt)

Include custom fonts in your player view. The Google Fonts library has a lot of interesting options; the classic 1.0 Improved Initiative font was called "Josefin".

 @import url(//fonts.googleapis.com/css?family=Almendra);  

.combatant.playercharacter  { fontface: 'Almendra', serif; }

All of the examples on this page are adjustable to your liking. If you're interested in learning more about CSS, I personally recommend at the articles on css-tricks. Have you used this feature to customize your Player View? Post your own CSS hacks in the comments!