How to adjust font size NT Variable

[rjolda]

Hi All,
NT 14.21  and C11
I am using base theme for my app.  The base theme has the line: --font-size: 12pt;
base.css has this value for variable  --font-size: 12pt;  :

root {
  --icon-size: 32px;
  --icons-light: url("/icons/nt-icons-light.svg");
.....
  --icons-error-scale: 1.75;
  --icons-error-transform: scale(var(--icons-error-scale));
  --font-family: "Open Sans","Segoe UI",Tahoma, Verdana, Arial, Helvetica, sans-serif;
  --font-size: 12pt;     <<<<<<<<<<=================  If I change it here, it still does not affect the font - I change it to 8 pt but when I look in inspector, the value is still 12.

How can I change the overall font size for the entire app?
Am I in the right place?
I did gzipall after changing it to 8 pt but the inspector still says 12 pt.
Do I need to clear the cache?
TIA,
Ron

[Jane]

1. Generally easier to make and verify changes when not in "performance" mode, i.e. when each css and js file is loaded singly into the browser.
2. When you make a change, either do Ctrl+F5 in the browser or increment the Resource version on the Performance tab of the ThisWebServer extension. (I normally set that to my own LOC:ResourceVersion variable, and read that variable from an INI file when the server starts. That way, I can bump the version without recompiling).  That appends a different whatever.css?c=blahblah which forces the browser to refresh its cache.
3. Note that the resourceVersion only works when the "Auto-check cached files" on the webServer template Performance tab is set to TRUE. By default, Development mode sets that to FALSE, so I always remember to change it back to TRUE.
 
4. Leaving aside the above fluff, where are you making the change? (You mention seeing the size setting in two files.)
I normally do that in my own custom CSS file (which I also do not include in the gzip stuff - untick the "Is included in THEME.CSS checkbox.)

In my custom CSS file will be a :root section to either override some of Bruce's defaults and/or to add any of my own variables that I'll use in my custom CSS.  Something like:

Code: [Select]

:root{
--softFontColor:#707070;
--leftBarColor:#FF5A87;
--leftBar:var(--leftBarColor) 6px solid ;
--darkTitleFont:"DarkTitle"; /* "DarkTitle" */
--normalTitleFont:"RegularTitle";
--font-family:"Open Sans","Segoe UI",Tahoma, Verdana, Arial, Helvetica, sans-serif;
--label-floating-top:calc(var(--entry-height)*.24);
--font-size:10pt;
}
My own trial-and-error.  HTH.

Jane