It is because CSS doesn't by default override what is set in the "style" property, but there is a work around:
add "!important" to your CSS, so
#tile-2 .tile-primary {
font-size: 40px !important;
}
Here is a working example:
3 Likes
Yeah I've been doing the same thing, but it's a PITA. Hopefully others can chime in.
That worked perfectly, thank you!
That's pretty cool !!
1 Like
Thanks, learn something new everyday from the community!
How would you modify the below temp reading tile to increase the font side?
{
"rowSpan": 1,
"template": "temperature",
"col": 7,
"colSpan": 1,
"id": 33,
"row": 2,
"device": "527",
"templateExtra": null
},
Figured it out....this is what I needed to add.
"customCSS": "#tile-32 .tile-primary {\nfont-size: 43px !important;\n}",
1 Like
OK this is weird, one temp tile work just fine but I want to do more than one, lets say 2 this is what I am having a problem with.
In CCS of the dashboard edit window I enter;
#tile-32 .tile-primary {
font-size: 42px !important;
}
#tile-34 .tile-primary {
font-size: 42px !important;
}
I then hit save CSS and go to the layout window and see this all the way at the bottom;
"customCSS": "#tile-32 .tile-primary {\nfont-size: 42px !important;\n}\n#tile-34 .tile-primary {\nfont-size: 42px !important;\n}",
When I hit save Layout JSON it reverts back to just one tile that I first tried to mod. Am I doing something wrong? How do you get it to stick with modding more than one tile at a time.
1 Like
Never mind figured it out again.......dont hit save Layout JSON,
Save CSS is enough to make it stick.
1 Like
Working on increasing the font size for @bptworld Life360 tile using CSS.
Can't seem to get it to work. Per the below image you can see in google (right click) inspect elements that I have found the path and can temp modify it in google by adding (font-size: 30px;) in google. None of my attempt to write the proper CSS works, any ideas?
Is it possible to replace the icon (not the background) of a tile with a .png from a URL?
Maybe, if you can use this per @rocketwiz
#tile-63 .tile-secondary {
visibility: hidden;
}
#tile-63 .tile-secondary:after {
content: 'My Front Door';
}
to hide it and then add a link to the new one.
Been working on CSS editing in my dashboard. I am still trying to understand the Hierarchy of data in a tile and how it has to be written to work.
I was trying to move the temp number and deg F closer together in the tile. It works in Google by adding (margin-left: -20px;) in the google page per the below picture, but going back to CSS in the Hikvision dashboard I can't figure it out.
Here is the Hierarchy in google. (I think)
#tile-33 .tile-primary {
element.style
.small
How do you write it in the Hikvision dashboard CSS to make it work.
1 Like
Sorry haven't had to do this, hopefully someone will come up with an answer.
I've also updated post#2 above to include useful tips posted by others in this thread and some new stuff I've come across.
2 Likes
Just to let you all know, I figured it out....lot of guessing but here is what moved it over.
#tile-34 .small {
margin-left: -20px;
}
2 Likes
Here is a list of some of my CSS code on some of my tiles on my dashboard.
Depending on the tile they can be all over the place on modifying a tile. Google inspect will give you the clues and then it was kind of a guessing game.
#tile-33 .tile-primary {
font-size: 74px !important;
position: relative;
bottom: 22px;
right: -3px;
}
#tile-36 .tile-title {
position: absolute;
bottom: -10px;
color: #3affff;
font-size: 30px;
}
#tile-32 .small {
margin-left: -20px;
}
#tile-50.tile.button {
background-color: hsla(0,0%,50.2%,0)!important;
}
#tile-36 .tile-primary a {
font-size: 30px !important;
color: #00ff37;
}
#tile-42.tile.button {
color: #e4ff00;
}
2 Likes
Further edit to post #2. It seems we can add units to an attribute tile using CSS even if the device driver doesn't support it.
Noob question... I assume the group "Label" tile you are using (IE: Front, Living Room, etc) are "Text" tiles? If so, how are you making them 1/2 or 1/4 height? If not using a standard Text tile, can you share the CSS that your are using for these?
Thank you in advance!
See posts #1 and #2. You can either change the font size (in points) or also probably scale the element.
EDIT: Ahh sorry, misread your post. I did the same as @anon81541053 to get them to fit on a tablet screen and each tile for me also ended up being the same 3H x 1L ! Go figure!
Seeing this thread I thought I'd share a snippet that works universally for me to replace tile-title:
.tile-title:after {
visibility: visible;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
white-space: nowrap !important;
}
#tile-94 .tile-title {
visibility: hidden;
}
#tile-94 .tile-title:after {
content: 'A very long title to crop';
}
This should work with any tile-size and layout for replacing tile-title, or any other div with some modification. Hope it is of help to someone. No need to change percentages...
EDIT: Do not use this, there is a better approach in a later post.
4 Likes
