modifying css to only one instance of a module
-
So I have 2 instances of the darkskyForecast split on my mirror, one for current (top left)and one for hourly/daily (top right). I am attempting to modify the margins/border/padding for the first instance but any reference I make is modifying both. IS there a super simple way to target one versus the other that I’m too blind to find by searching? thanks in advance!
-
@N3RD
make a copy of the module folder under another name.
Then the css can be against two names
U have to rename the module.js to match the folder name, AND edit the module.js and change the registration line name to match as wellsee strawberry’s response below
-
@N3RD every module has a wrapper with an id. This is is the module identifier e.g.
module_1_clock. There is no need to modify files. You can then target specifically that instance in CSS.#module_1_clock { margin: 20px; }you can find out the identifier in the DOM.
-
@strawberry-3-141 thanks… didn’t know we could use the identifier…
-
@strawberry-3-141 thanks for the tip! Now to sound even more newb, how do I read the DOM??
-
@N3RD modules are numbered from top to bottom in config.js
Also see the elements tab in the developers window -
@sdetweil got it! thanks guys, I’m slowly building confidence to poke around more and tweak. And annoy my wife by constantly tinkering
