modifying css to only one instance of a module

[N3RD]

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!

[sdetweil]

@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 well

see strawberry’s response below

[strawberry 3.141]

@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.

[sdetweil]

@strawberry-3-141 thanks… didn’t know we could use the identifier…

[N3RD]

@strawberry-3-141 thanks for the tip! Now to sound even more newb, how do I read the DOM??

[sdetweil]

@N3RD modules are numbered from top to bottom in config.js
Also see the elements tab in the developers window

[N3RD]

@sdetweil got it! thanks guys, I’m slowly building confidence to poke around more and tweak. And annoy my wife by constantly tinkering