<![CDATA[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!

]]>https://forum.magicmirror.builders/topic/11097/modifying-css-to-only-one-instance-of-a-moduleRSS for NodeTue, 21 Apr 2026 15:51:52 GMTWed, 04 Sep 2019 03:13:43 GMT60<![CDATA[Reply to modifying css to only one instance of a module on Thu, 05 Sep 2019 02:22:12 GMT]]>@sdetweil got it! thanks guys, I’m slowly building confidence to poke around more and tweak. And annoy my wife by constantly tinkering ;)

]]>https://forum.magicmirror.builders/post/60916https://forum.magicmirror.builders/post/60916Thu, 05 Sep 2019 02:22:12 GMT<![CDATA[Reply to modifying css to only one instance of a module on Thu, 05 Sep 2019 00:41:23 GMT]]>@N3RD modules are numbered from top to bottom in config.js
Also see the elements tab in the developers window

]]>https://forum.magicmirror.builders/post/60913https://forum.magicmirror.builders/post/60913Thu, 05 Sep 2019 00:41:23 GMT<![CDATA[Reply to modifying css to only one instance of a module on Thu, 05 Sep 2019 00:16:13 GMT]]>@strawberry-3-141 thanks for the tip! Now to sound even more newb, how do I read the DOM??

]]>https://forum.magicmirror.builders/post/60910https://forum.magicmirror.builders/post/60910Thu, 05 Sep 2019 00:16:13 GMT<![CDATA[Reply to modifying css to only one instance of a module on Wed, 04 Sep 2019 11:46:55 GMT]]>@strawberry-3-141 thanks… didn’t know we could use the identifier…

]]>https://forum.magicmirror.builders/post/60869https://forum.magicmirror.builders/post/60869Wed, 04 Sep 2019 11:46:55 GMT<![CDATA[Reply to modifying css to only one instance of a module on Wed, 04 Sep 2019 05:45:39 GMT]]>@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.

]]>https://forum.magicmirror.builders/post/60846https://forum.magicmirror.builders/post/60846Wed, 04 Sep 2019 05:45:39 GMT<![CDATA[Reply to modifying css to only one instance of a module on Wed, 04 Sep 2019 11:47:33 GMT]]>@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

]]>https://forum.magicmirror.builders/post/60843https://forum.magicmirror.builders/post/60843Wed, 04 Sep 2019 11:47:33 GMT