Custom CSS

[sdetweil]

@BKeyport many people coming to pi, and Linux just don’t know how to create files. they are some used to the UI, and clicking on something

that’s why my script creates the empty custom.css as part of install

[SoleLo]

@BKeyport This helps quite a bit, I started using the dev tools yesterday “npm start dev” and it really helped. Thanks!

[SoleLo]

@sdetweil That script does help, I already had the file created, but I made note of the script for the future.

[SoleLo]

@BKeyport one of the modules I’m trying to customize doesn’t seem to have “classes” to adjust, unless I’m missing something for example the Percent/ Range section if I wanted to change the margin-top to 150, how would I go about that?

[BKeyport]

@SoleLo I’d have to defer to the CSS masters around here. I’m hacky at best at it.

Maybe we can loop in @shin10 to help, who really helped me with a situation I needed help with.

[sdetweil]

@SoleLo when there isn’t a class, you can still use the selector syntax to get to an element

.module_name div div

etc

here is a cheatsheet I use on determining a selector, the thing before the {

https://www.w3schools.com/cssref/css_selectors.asp

currently, there is no syntax for selecting an element that has some content… but :has() is coming…

a discussion on using css for individual tags
https://stackoverflow.com/questions/27823405/how-to-override-a-displaynone-property-applied-to-parent-element-in-specific-ch

[SoleLo]

@sdetweil so for the Percent/ Range it would be something like

.MMM-Teslamate div div
{
margin-top: 100px
}

[sdetweil]

@SoleLo i think to get to the div with the link its

.MMM-Teslamate div div div