a11y-css-tweaks | Foundry VTT | Page 1

wicked sierra Mar 16, 2022, 6:53 PM

#

Cool lets do a quick bootcamp.

#

@granite laurel

granite laurel Mar 16, 2022, 6:53 PM

#

Ok

wicked sierra Mar 16, 2022, 6:54 PM

#

So to summarize; you have a player who needs some assistance by providing increased font size in particular places of the UI; correct?

granite laurel Mar 16, 2022, 6:54 PM

#

I am a player who needs to increase the size of font in all the places in the UI

wicked sierra Mar 16, 2022, 6:55 PM

#

Ah! okay, I thought you were the GM not the player. This will still work out though.

You will want your GM to install the "Custom CSS Rules" module https://foundryvtt.com/packages/custom-css

Custom CSS Rules | Foundry Virtual Tabletop

Custom CSS Rules, a Module available for Foundry Virtual Tabletop

#

If your GM isn't available to do so currently, that's fine, i can demo this on my own server and provide you a list of rules to implement once the GM does have it installed

#

For some background, Foundry VTT's entire UI is composed of HTML and CSS; with CSS providing the appearance.

granite laurel Mar 16, 2022, 6:57 PM

#

OK Fin Might still be around

wicked sierra Mar 16, 2022, 6:57 PM

#

The benefit of this is that on the client side GMs and Players can customize how the UI looks for them if they want to take a little time.

We're working toward better UI customization options in a user friendly way as we progress with development but we're not exactly "there yet" with a11y support.

granite laurel Mar 16, 2022, 6:58 PM

#

Yeah the sand on sand submission box was a bear to try to send a note in, I tried to edit out the pissed off

wicked sierra Mar 16, 2022, 6:58 PM

#

I'll take a moment and throw the custom css module on my own server and drop you a link.

granite laurel Mar 16, 2022, 6:59 PM

#

ok

wicked sierra Mar 16, 2022, 7:02 PM

#

Since I was gonna do something like this for someone else, I'll take a moment and invite @humble tiger to watch and review the tutorial of how to use the devtools to define CSS in realtime and see how it will look for you.

granite laurel Mar 16, 2022, 7:02 PM

#

Yeah absolutely

#

I have my magnifier lens on to make this easier

#

I asked my GM if he was still on but hes off probably to work

wicked sierra Mar 16, 2022, 7:03 PM

#

It's cool, what i show you here should be easy to bring over to the GM's game later.

granite laurel Mar 16, 2022, 7:04 PM

#

That works

wicked sierra Mar 16, 2022, 7:04 PM

#

Gonna grab a beverage while you get logged in.

granite laurel Mar 16, 2022, 7:04 PM

#

ok still need a link

#

didnt see the pm was focused on the wrong corner of the screen

wicked sierra Mar 16, 2022, 7:05 PM

#

No worries 🙂

#

Right, so before we get into our options for scaling things up i'm gonna take a minute and teach you some tricks for using the dev-tools that elude some users. Do you use Chrome or Firefox?

granite laurel Mar 16, 2022, 7:07 PM

#

Chrome It works better with my eyes

wicked sierra Mar 16, 2022, 7:08 PM

#

Excellent, FVTT looks best in chrome as it's developed with chrome in mind

#

Windows, Mac, or Linux?

granite laurel Mar 16, 2022, 7:08 PM

#

Windows 11

wicked sierra Mar 16, 2022, 7:09 PM

#

Cool. In the FVTT window press f12 and you'll see the devtools appear. The font in this window may be very small depending on whether or not your operating system settings scale it up for you.

granite laurel Mar 16, 2022, 7:10 PM

#

its small but I have the windows lens up

wicked sierra Mar 16, 2022, 7:11 PM

#

Cool, i'm gonna post a screenshot here that i'll use to explain what you're looking at, wait one

granite laurel Mar 16, 2022, 7:12 PM

#

ok

wicked sierra Mar 16, 2022, 7:14 PM

#

#

area 1 shows the HTML elements you can edit.
Area 2 is where we will be making changes to the CSS rules to change appearance
The button marked by the arrow and number 3 is the "Selector" which we'll be using to pick which elements we're changing the style of. By clicking on it, and then clicking anything in the FVTT window, you can see what CSS rules affect that element and make temporary changes to it.

#

At any point if you make a rules change that doesn't work out, you can either remove/toggle/disable it in area 2, or you can press f5 and it will wipe out all changes you've made and return FVTT to its default state.

granite laurel Mar 16, 2022, 7:16 PM

#

Ok

wicked sierra Mar 16, 2022, 7:17 PM

#

Now, there's a few ways we can handle issues of screen scale.

One is to apply a "zoom" to the overall program, which can work, but isn't ideal because it affects literally everything and isn't much different from Windows display scaling.

#

To see what i mean, click the Selector (at point 3) and click anywhere on the canvas- where tokens normally move

#

You'll see a section in area 2 that says body { -- it will be the 4th or 5th item down the list and contain a bunch of greyed out rules.

#

Clicking inside that box (but not on a particular rule) will give you a cursor and allow you to type.

So lets type zoom: and you'll see it will enter the zoom rule and leave you with a cursor for setting what zoom amount.

#

let's do 1.5;

#

You'll see everything becomes huge and a lot of the UI will be pushed off-screen

granite laurel Mar 16, 2022, 7:22 PM

#

yep breaks things and my scroll bars got pushed off too

wicked sierra Mar 16, 2022, 7:23 PM

#

So obviously zooming everything isn't the way we want to go; this was just a handy example of how to use CSS to change things.

Go ahead and click the checkmark next to the zoom: rule you set to uncheck it- this will disable that rule

granite laurel Mar 16, 2022, 7:23 PM

#

I have

wicked sierra Mar 16, 2022, 7:25 PM

#

Now let's take a moment and figure out what changes you actually want to achieve.

Are the sizes of UI elements that aren't text---such as the buttons on the left, the macro buttons at the bottom, the size of the sidebar---are those fine?

granite laurel Mar 16, 2022, 7:26 PM

#

sidebar is ok macro buttons work, the buttons need to be bigger

wicked sierra Mar 16, 2022, 7:26 PM

#

Okay, so let's make a rule for scaling the buttons on the left up.

#

Click your selector and click on a button; --- Now here's a tricky piece.

#

We don't just want to change one button- we want to change them all.

#

So if you take a look at area 1 in the screenshot - where all the individual HTML elements are, you'll likely see that you're currently highlighted on something like this:

#

granite laurel Mar 16, 2022, 7:29 PM

#

I'm with you

wicked sierra Mar 16, 2022, 7:29 PM

#

now we don't want to just pick that one list item (<li>)---we want the section of the UI that manages it.The "nav"

granite laurel Mar 16, 2022, 7:30 PM

#

ok

wicked sierra Mar 16, 2022, 7:30 PM

#

so in the HTML list click the nav with the id "controls"

#

and let's apply a zoom level to just that; so just as we did before, we'll create a new css rule: zoom: 1.25

#

which will probably get it to a pretty comfortable size for you---but you can tweak the number as much as you want. When you've settled on what that number is, share it here

#

if you get into trouble or feel a bit lost don't hesitate to ask questions; i'm catering this to 'entry level' because i don't know what level of familiarity with this stuff you have. 🙂

granite laurel Mar 16, 2022, 7:34 PM

#

1.5 will work let me push it up to two

#

2 is better

wicked sierra Mar 16, 2022, 7:35 PM

#

Cool; so now what i'd suggest is to keep track of your changes, open up a windows notepad

granite laurel Mar 16, 2022, 7:36 PM

#

I am taking notes!

#

I pulled my tablet out to do so

wicked sierra Mar 16, 2022, 7:38 PM

#

The reason i suggest windows notepad is because it will let us log the rules we're going to save as changes on your end, so you can copy-paste them into the custom CSS module later. 🙂

in the windows notepad, we'll add our first rule:

nav#controls {
zoom: 2;
}

The nav tells css what kind of HTML element it's looking for. # says to look by the id of the element, and the controls is the specific ID to look for. This means that your rule will ONLY apply to the lefthand control buttons.

#

The semicolon after the line is important

granite laurel Mar 16, 2022, 7:39 PM

#

I have also been making screen shots to show me what the changes should look like

wicked sierra Mar 16, 2022, 7:41 PM

#

One suggestion i'll make is that the token-hud will probably have a similar problem, and that one's a little more tricky to target, so i'll take a moment to give you a couple rules to add to your list

granite laurel Mar 16, 2022, 7:42 PM

#

Yes that would help

wicked sierra Mar 16, 2022, 7:45 PM

#

#token-hud .col.left {
zoom: 2;
}
#token-hud .col.right {
zoom: 2;
}
#token-hud .attribute.bar1 input  {
zoom: 2;
}
#token-hud .attribute.bar2 input  {
zoom: 2;
}

#

That should handle stuff for your token when you right click it to change things.

granite laurel Mar 16, 2022, 7:46 PM

#

ok

wicked sierra Mar 16, 2022, 7:48 PM

#

Now; for the stuff in the sidebar, presumably you want to scale your overall font size- are other things sized fine in the sidebar? The sidebar tabs at the top; the text in the 'roll mode' box?

granite laurel Mar 16, 2022, 7:49 PM

#

Sidebar tabs need boosted too I can work with them but they are small and its basically position recognition with them

wicked sierra Mar 16, 2022, 7:51 PM

#

Okay, unfortunately we can't really scale up the sidebar tabs without scaling up the whole sidebar- unless we want the available tab buttons to be cut off; so let's see how that goes.

using your selector, click on the sidebar; and ensure you're choosing the top level element in HTML (<div id="sidebar")

#

And then set your zoomlevel at the sidebar. I'd try 1.25--- 2 is definitely gonna push a lot of the sidebar off screen.

granite laurel Mar 16, 2022, 7:52 PM

#

ok

wicked sierra Mar 16, 2022, 7:52 PM

#

an alternative to using zoom here is to change the sidebar width

#

which we can do by setting width specifically (width: 500px)

#

That will give us some breathing room to resize individual elements inside the sidebar

granite laurel Mar 16, 2022, 7:54 PM

#

Yeah we thought the same number

wicked sierra Mar 16, 2022, 7:55 PM

#

If you choose to go with width; you would then modify the individual elements you want to have bigger; in this case, by choosing your selector and targeting the element <nav id="sidebar-tabs"

#

a zoom of about 1.5 will probably get those into your comfort zone if the sidebar width is 500px

#

above 1.5 you'll run into issues with it cutting off--but you could raise your sidebar width further if necessary.

granite laurel Mar 16, 2022, 7:58 PM

#

1.75 works in the space from 500px and is easier then 1.5

wicked sierra Mar 16, 2022, 7:58 PM

#

chefskiss

granite laurel Mar 16, 2022, 7:58 PM

#

Im learning thanks

wicked sierra Mar 16, 2022, 7:59 PM

#

So to check that you're picking up the CSS rules formatting; what would the CSS rule be for these two changes that you'd add to your notepad?

granite laurel Mar 16, 2022, 8:03 PM

#

div#sidebar {
--sidebar-width: 500px;
}
nav#sidebar-tabs {
zoom: 1.75;
}

#

I copied a little too high

wicked sierra Mar 16, 2022, 8:06 PM

#

granite laurel div#sidebar { --sidebar-width: 500px; } nav#sidebar-tabs { zoom: 1.75; }

Very good; close...but not quite.

change --sidebar-width to just width

I think yours would change the variable for sidebar width, and that's fine, but we want to get a little more specific.

granite laurel Mar 16, 2022, 8:07 PM

#

ok

wicked sierra Mar 16, 2022, 8:08 PM

#

Now, i think you've got most of the tricks neeeded to raise the font size; We can do so globally (using * {) or we can choose specific elements and their parents.

#

I would suggest that using a global can be as undesirable here as a global zoom; as it will squish other elements out if you increase the font size on everything

granite laurel Mar 16, 2022, 8:09 PM

#

Globally should be the simplist right?

wicked sierra Mar 16, 2022, 8:10 PM

#

and some elements with more specific rules will not be affected by a global change

#

chat messages, for example

granite laurel Mar 16, 2022, 8:10 PM

#

Like how the Pathfinder 1 stuff wasnt effected by the text slider thats already there

wicked sierra Mar 16, 2022, 8:11 PM

#

Exactly.

granite laurel Mar 16, 2022, 8:11 PM

#

X(

wicked sierra Mar 16, 2022, 8:12 PM

#

The chat cards will be the most annoying to change- because they often have font sizes set by subsection of the chat card

granite laurel Mar 16, 2022, 8:12 PM

#

ok

wicked sierra Mar 16, 2022, 8:12 PM

#

IE, the header has a specific font size, the body of the message another specific font size

#

but we may be able to cheat it a little using zoom

granite laurel Mar 16, 2022, 8:13 PM

#

and the text slider doesnt really go far enough either so that will have to be changed as well

wicked sierra Mar 16, 2022, 8:14 PM

#

So since you already have the sidebar width set bigger

granite laurel Mar 16, 2022, 8:14 PM

#

The frustrating part is this is only going to get worse as cataracts suck at least until I can get the surgery

wicked sierra Mar 16, 2022, 8:15 PM

#

I'll take a moment to take my dog outside and leave you with this challenge:

Using your selector, find which element you should target to give a "zoom: 2" to increase the size of individual chat messages without increasing the size of the entire chatlog.

#

once you figure it out, drop the rule in here and i'll share the one i found

#

Back from dog tending.

granite laurel Mar 16, 2022, 8:23 PM

#

I found something but I dont think it was what I was trying to find, it did make something else more useable though

wicked sierra Mar 16, 2022, 8:24 PM

#

Cool, share! 😄

#

For the record the one i'd use for chat messages is:

li.chat-message {
zoom: 2
}

This wasn't one i gave you an explainer for so don't feel bad for not finding it.

li - the html list element
. - indicates to select css by 'class'
chat-message - the chat-message css class.

This matches with the html: <li class="chat-message"

granite laurel Mar 16, 2022, 8:26 PM

#

Ok under the
theres a section that says font size

#

#

you can see I boosted that font size and it changed the players and map tab

wicked sierra Mar 16, 2022, 8:28 PM

#

Indeed! it would.

What you're doing when changing that is changing the global font size for the entire program (the equivalent of using the slider for font size in the settings menu)

#

"body" refers to the 'top level'

#

though i will note that i don't think it will affect chat messages specifically (because they're handled by more specific CSS rules)

granite laurel Mar 16, 2022, 8:29 PM

#

it does not

#

which is annoying

wicked sierra Mar 16, 2022, 8:29 PM

#

Fortunately my zoom trick on chat messages will probably take care of that for you

#

If you want to keep your change to the font-size rule in body; all you have to do is set a rule in your css file for

body {
font-size: <yourfontsizehere>;
}

granite laurel Mar 16, 2022, 8:31 PM

#

Your li.chat message didnt change the system stuff so it looks like that will have to be changed manually

wicked sierra Mar 16, 2022, 8:32 PM

#

hm. Which system stuff? (this is currently dnd5e)

#

can you give me an example element?

granite laurel Mar 16, 2022, 8:32 PM

#

wicked sierra Mar 16, 2022, 8:32 PM

#

Hmm. Odd. wait one.

#

Definitely working on more than one- i suspect you may have targeted that specific chat message and used the element.style section instead of .chat-message

#

Now let's carry through the next step; let's apply these rules persistently using the Custom CSS Rules module

#

On the settings sidebar tab ( sidebarsettings ) go to 'configure settings'

#

Then go to 'module settings' and go to the 'custom css;'section, choose 'custom css rules'

#

and then just paste from your notepad straight into the "Custom CSS Rules" window and hit save.

granite laurel Mar 16, 2022, 8:36 PM

#

Alright I am going to have to open up a table of my own because I cant see that in yours

wicked sierra Mar 16, 2022, 8:36 PM

#

Hmmmm...you should be able to.

#

#

Time to create a player account for myself and be sure

#

Hm. You're right, doesn't seem to be showing. might be a permission thing. one moment

granite laurel Mar 16, 2022, 8:41 PM

#

could be

wicked sierra Mar 16, 2022, 8:42 PM

#

Okay, you may need to reload (f5) but you should have access now; your GM will need to set the permission "modify configuration settings" for you in the user permissions

#

granite laurel Mar 16, 2022, 8:46 PM

#

that li.chat message zoom is functional but I think I need to learn how to globally set the font size because some things went too big and others didnt size up enough

wicked sierra Mar 16, 2022, 8:47 PM

#

Fair enough. While you ponder that, i'll take a moment because i've just been informed that the reason this permission is gated behind GM is because, apparently, these changes impact all users; so i need to take a moment and investigate if there's a quick way to make this apply to just one user.

granite laurel Mar 16, 2022, 8:47 PM

#

but this works and I can mess around with my own table until I get something that works the way I want it too

#

I am not the only VI user at our table so thats not a bad thing

#

our table has 50% vi player to some level

wicked sierra Mar 16, 2022, 8:50 PM

#

can i get you to type

```css
<paste your notepad css rules here>
```

granite laurel Mar 16, 2022, 8:51 PM

#

zoom: 2;
}
#token-hud .col.left {
zoom: 2;
}
#token-hud .col.right {
zoom: 2;
}
#token-hud .attribute.bar1 input  {
zoom: 2;
}
#token-hud .attribute.bar2 input  {
zoom: 2;
}
div#sidebar {
width: 500px;
}
nav#sidebar-tabs {
zoom: 1.75;
}
li.chat-message {
zoom: 2
}
body {
font-size: <yourfontsizehere>;
}
li.chat-message {
zoom: 2
}

wicked sierra Mar 16, 2022, 8:51 PM

#

Cheers

i'll see about getting you a macro you can distribute to make this occur on only the client-side rather than 'for everybody.'

I suspect unless your GM has visual impairments they may find the larger UI a bit daunting.

granite laurel Mar 16, 2022, 8:52 PM

#

They might but I know that they will work with it because they really dont want ot go back to roll20

#

and meeting in person requires far more money then is possible for a weekly session flights are expensive and there are 3 countries involved

wicked sierra Mar 16, 2022, 8:54 PM

#

XD

granite laurel Mar 16, 2022, 8:59 PM

#

Thanks for the help I appreciate it I really do like a lot of the features in foundry

wicked sierra Mar 16, 2022, 9:00 PM

#

let style =`<style>
//Your Style Rules Below This Line
nav#controls {
zoom: 2;
}
#token-hud .col.left {
zoom: 2;
}
#token-hud .col.right {
zoom: 2;
}
#token-hud .attribute.bar1 input  {
zoom: 2;
}
#token-hud .attribute.bar2 input  {
zoom: 2;
}
div#sidebar {
width: 500px;
}
nav#sidebar-tabs {
zoom: 1.75;
}
li.chat-message {
zoom: 2;
}
body {
font-size: <yourfontsizehere>;
}
li.chat-message {
zoom: 2;
}
//Your Style Rules Above This Line
</style>`  

    document.head.insertAdjacentHTML("beforeend", style);

This is an ugly solution, but will work. Paste this into a script macro and it will only make changes for the users that execute that macro.

#

This also will work without you needing the Custom CSS module

granite laurel Mar 16, 2022, 9:01 PM

#

OK makes sense, not all gms are going to want to make so many changes

wicked sierra Mar 16, 2022, 9:02 PM

#

indeed; and as you refine your list of rules it can grow in there and individual users can tweak their own values as they please 🙂

granite laurel Mar 16, 2022, 9:03 PM

#

True

granite laurel Mar 17, 2022, 5:24 PM

#

why doesnt this

body {
font-size: <--font-size-28>;
}

work?
and is there a way to make all of the table and character and compendium elements automatically inherit the body formatting because I cant figure out a command to make them change at all except for manually changing each one and that is a pain in the head to do as you might imagine (I wouldnt even mind a serries of commands if I could get it to work)

wicked sierra Mar 17, 2022, 5:25 PM

#

granite laurel why doesnt this ``` body { font-size: <--font-size-28>; } ``` work? and is the...

Most likely we haven't extended the variable numbers that high. You'll want to use hard-coded font sizes in that case

granite laurel Mar 17, 2022, 5:26 PM

#

That is the highest listed font size, 24 doesnt work either actually

#

wicked sierra Mar 17, 2022, 5:33 PM

#

Odd. If you set it specifically to 1.75rem does it work?

gentle pebble Mar 17, 2022, 5:33 PM

#

It does not work because <--font-size-28> is not a valid font size.

wicked sierra Mar 17, 2022, 5:34 PM

#

Oh. Yeah. You'd use var(--font-size-28)

gentle pebble Mar 17, 2022, 5:34 PM

#

You need to use var(--font-size-28) if you want to pull a variable. off the top of my head.

granite laurel Mar 17, 2022, 5:34 PM

#

Oh well I can fix that easily enough

#

much better thanks!

wicked sierra Mar 17, 2022, 5:39 PM

#

granite laurel much better thanks!

and is there a way to make all of the table and character and compendium elements automatically inherit the body formatting because I cant figure out a command to make them change at all except for manually changing each one and that is a pain in the head to do as you might imagine (I wouldnt even mind a serries of commands if I could get it to work)
I'm occupied at the moment but i'll take a look at this for you. I assume you mean stuff inside character sheets and rollable tables?

granite laurel Mar 17, 2022, 5:40 PM

#

Yep and the compendium I know I can manually change it to inherit I just want a command so I dont have to go in and edit before every game

granite laurel Mar 17, 2022, 7:33 PM

#

Ok I found something that gets me closer

*{
font-size: var(--font-size-20);
}

but it leaves me with this, so I am halfway there roughly

wicked sierra Mar 17, 2022, 7:36 PM

#

I've unfortunately got a large amount of work ahead of me for the day so i don't know for sure when i'll be able to get back to you on this----the game system here is pf1e?

granite laurel Mar 17, 2022, 7:39 PM

#

Yep, I know you dont know when you can get back to me, but I figured I would keep you up to date on what I work out I can stop if thats easier on you

wicked sierra Mar 17, 2022, 7:40 PM

#

granite laurel Yep, I know you dont know when you can get back to me, but I figured I would kee...

nope, please keep me updated as you feel inclined to; if i don't end up working through lunch i'll see what i can do on my lunch break

granite laurel Mar 17, 2022, 7:41 PM

#

Ok

wicked sierra Mar 18, 2022, 7:05 PM

#

granite laurel Ok I found something that gets me closer ``` *{ font-size: var(--font-size-20); ...

This is one of the cases where you might get away with Zoom;

I'd try:

.pf1.sheet .window-content .tab {
    zoom: 2;
}

and to fix the size of the tab text so it's readable without breaking the sheet:

.pf1.sheet .sheet-navigation.tabs {
font-size: 2rem;
}

granite laurel Mar 18, 2022, 7:23 PM

#

The first one does works, but means I have to take out

*{
font-size: var(--font-size-20);
}

which means manual fixes everywhere else

granite laurel Mar 18, 2022, 7:41 PM

#

Ok with these 3 commands its down to just manually changing the compendium which is doable

nav#sidebar-tabs {
zoom: 1.75;
}
body {
font-size: var(--font-size-20);
}
li.chat-message {
font-size: var(--font-size-24);
}

lavish elm Apr 19, 2022, 5:43 PM

#

@astral tinsel this might help

#a11y-css-tweaks