NetTalk Central

Author Topic: How to adjust font size NT Variable  (Read 3299 times)

rjolda

  • Sr. Member
  • ****
  • Posts: 368
    • View Profile
    • Email
How to adjust font size NT Variable
« on: May 03, 2025, 02:45:13 AM »
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

  • Sr. Member
  • ****
  • Posts: 399
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: How to adjust font size NT Variable
« Reply #1 on: May 03, 2025, 11:57:50 AM »
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

rjolda

  • Sr. Member
  • ****
  • Posts: 368
    • View Profile
    • Email
Re: How to adjust font size NT Variable
« Reply #2 on: May 04, 2025, 02:13:38 AM »
HI Jane,
THANKS for all the useful information.  It is sometimes hard to get information on the nuts and bolts of NT.
Especially, I did not think that you could overwrite the variables and their values ( I still have lots and lots of this css stuff to learn...)
Ron

Jane

  • Sr. Member
  • ****
  • Posts: 399
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: How to adjust font size NT Variable
« Reply #3 on: May 04, 2025, 03:52:45 PM »
Hi, Ron,
Variables were the heart of themes and the "themer" app that Bruce introduced in (NT12??). 
The idea being that you can set something (a color, font size, button radius, etc.) in one place and have the entire web app use those settings.

rjolda

  • Sr. Member
  • ****
  • Posts: 368
    • View Profile
    • Email
Re: How to adjust font size NT Variable
« Reply #4 on: May 05, 2025, 07:02:43 AM »
HI Jane,
Yes, I realized that NT used variables to set the overall information for the site.  However, I had no clue how to change the variables.
Your information was very helpful.  I actually got it implemented in my custom.css and got it Working!
Thanks,
ROn