Tweaking the CSS of DSTs

Kallak

This came up fairly recently as a question, and (given that I don't see it done very much) I thought it was worth a few minutes to put the answer out there as a sort of "did you know?" style forum post - just in case. So, did you know that you can use your custom CSS input field to tweak the appearance of DSTs that are in use on your campaign site?

Since DSTs are intended to be used by all manner of (potentially extremely) different-looking campaign sites, the general design philosophy is to go a more generalized or neutral route. Basically, as an author of DSTs, you don't want your sheet to look spectacular on some sites, while looking positively horrendous on others. This strategy works well enough for broad usage, but can leave some users wanting more if they have highly customized sites, or if their extensive use of particular colors causes the DST to stand out as a contrast for not using them. For such users, the answer is to tweak the DST's CSS locally by way of the campaign's custom CSS input field.

Every DST has a containing slug, which is used by all of the sheet's contained CSS styling. Taking my own 2nd edition Pathfinder sheet as an example, we can see that the the entire sheet is inside of the container, which possesses two classes "dynamic_sheet" and "ds_kallak_PF2e"

The class that appears alongside "dynamic_sheet", which in this case is "ds_kallak_PF2e", is the sheet's slug. This is the end point for DST CSS class declaration and rules, and a middle point for the campaign site as a whole, which means that you can overwrite the sheet's rules by going outside of that structure, higher up in the campaign site's class structure.

Take for instance, the black background area headers on the sheet.

Perhaps, you'd like those to match your campaign site's primary color instead of being black. With a quick inspection of one of the elements, we can see the following:

Our element is defined as class "area-header" and has rules (including background-color) based on the class structure selection of ".ds_kallak_PF2e .area-header". Put simply, this means all elements with the class "area-header" that are inside of elements with the class "ds_kallak_PF2e".

Since the sheet is contained inside of that "ds_kallak_PF2e" class, any rules defined will stop there. This leaves you the option to use selectors that the sheet is contained inside of to get more specific, and overwrite the CSS rules. A good example to use in this case would be "campaign-public-layout". The "campaign-public-layout" class is used on all front-facing portions of your campaign site, such as wiki pages, character pages, adventure logs and so forth.

So overwriting the CSS rules for our character sheet's "area-header" elements is as simple as adding the "campaign-public-layout" class to the front of the selector and putting the new rules in your campaign's custom CSS input field. Below, we can see the sheet with the following rules change added to the campaign site's custom CSS.

.campaign-public-layout .ds_kallak_PF2e .area-header {
     background-color: #e6ba3d;
}

And just like that, we've modified the DST everywhere it appears on the campaign site. From this point, it all comes down to how extensive you'd like the local changes to the DST to be.

thaen

Awesome write up!