Change Font For A Single Tile

[Quantumchaos]

Hello,

How can I adjust the font for a single tile instead of the whole dashboard?

Thank You
Matt

[thebearmay]

Depends on the tile template being used but for most adding something like this to the dashboard CSS should do it:

#tile-99 {font-family:calbri}

[Quantumchaos]

I am using the Thermostat Template and am new to CSS editing on the dashboards, this is what I have so far:

"localization": "English",
"roundedCorners": 10,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": ,
"co{
lWidth": 200,
"cloudRefresh": 5,
"hsmPin": "bnVsbA==",
"hide3dot": false,
"clockMode": true,
"gridGap": 10,
"goBack": true,
"tiles": [
{
"rowSpan": 1,
"template": "temperature",
"col": 1,
"colSpan": 1,
"bgImage": "",
"id": 0,
"row": 3,
"device": "197",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "temperature",
"col": 2,
"colSpan": 1,
"bgImage": "",
"id": 1,
"row": 3,
"device": "144",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "temperature",
"col": 3,
"colSpan": 1,
"bgImage": "",
"id": 2,
"row": 3,
"device": "241",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "temperature",
"col": 4,
"colSpan": 1,
"bgImage": "",
"id": 4,
"row": 3,
"device": "73",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "temperature",
"col": 5,
"colSpan": 1,
"bgImage": "",
"id": 6,
"row": 3,
"device": "135",
"templateExtra": ""
},
{
"rowSpan": 2,
"template": "thermostat",
"col": 1,
"colSpan": 3,
"bgImage": "",
"id": 7,
"row": 1,
"device": "1976",
"templateExtra": ""
}
],
"bgColor": "#282828",
"lanRefresh": 2,
"modesPin": "",
"iconSize": 42,
"cols": 7,
"rowHeight": 190,
"hideEvents": false,
"noColors": false,
"tempScale": "F",
"readOnly": null,
"rows": 3,
"hideIconText": true,
"hideTextShadow": true,
"name": "Temps",
"fontSize": "23"
}

[thebearmay]

At the top of that dialog box click on the CSS label; will probably show you a blank page given that you haven't entered any custom CSS yet.

[Quantumchaos]

Ah OK thanks, so in the screenshot attached which tile would correspond to the large Zen Thermostat tile?

[thebearmay]

click on the 3 dots in the right corner and it should show you the tile name in the upper left of the dialog box that is shown.

[Quantumchaos]

Ah thanks again, what is the format to add font size to the CSS?

[thebearmay]

font-size: <value>;

Where <value> can be larger, large, small, smaller, 99px, 99em, etc.

[Quantumchaos]

I'm missing something simple lol.

#tile-7 {
font-family:ariel;
font-size: <100px>;
}

[thebearmay]

Get rid of the "<" and ">" (Sorry, I should have been more literal in my response).

[Quantumchaos]

No worries, I am learning this just today This did not seem to change anything:

#tile-7 {
font-family:ariel;
font-size: 70px;
}

[thebearmay]

Some templates have hard coded values that need to be addressed directly at the containing <div>. What tile type are you trying to modify?

[Quantumchaos]

Thermostat

[thebearmay]

Any particular set of text or all of them?

[Quantumchaos]

I'm just trying to change the font for that tile alone without impacting the other tiles on the dashboard. Sharptools allows for this but I do not want to use a 3rd party dashboard app anymore.

[thebearmay]

A little more complicated but this should be close:

#tile-81 > div.flex.flex-col.w-full.text-center.h-full.justify-center.items-stretch > div.flex-grow-0.w-full.self-start.cooling > div 
     {font-family:calbri}

#tile-81 > div.flex.flex-col.w-full.text-center.h-full.justify-center.items-stretch > div.flex.flex-grow.flex-no-wrap.flex-col.w-full.-mt-6.justify-center.overflow-auto > div.cooling.w-full > div 
     {font-family:calbri}

#tile-81 > div.flex.flex-col.w-full.text-center.h-full.justify-center.items-stretch > div.flex.flex-grow.flex-no-wrap.flex-col.w-full.-mt-6.justify-center.overflow-auto > div.w-full.my-1 > div:nth-child(1) > div 
     {font-family:calbri}

#tile-81 > div.flex.flex-col.w-full.text-center.h-full.justify-center.items-stretch > div.flex.flex-grow.flex-no-wrap.flex-col.w-full.-mt-6.justify-center.overflow-auto > div.w-full.my-1 > div:nth-child(3) > div 
     {font-family:calbri}

#tile-81 > div.absolute.bottom-0.text-center.w-full
      {font-family:calbri}