Resize custom or main modules

[KirAsh4]

Those CSS rules will affect all the modules, as all modules use them. If you only want to affect one single module, then you need to change the rules to point to the specific module. Let’s say you want the text smaller on the newsfeed, then you need to look at the actual HTML being created to get the class named being used:

<div id="module_8_newsfeed" class="module newsfeed newsfeed" style="transition: opacity 1.25s; opacity: 0; position: static;">
  <div class="module-content">
    <div>
      <div class="light small dimmed">ESPN - Top News, 4 minutes ago:</div>
      <div class="bright medium light">Georgia RBs Chubb, Michel still iffy for opener</div>
    </div>
  </div>
</div>

Now you can see that the rules that affect the text, 'light small dimmed' and 'bright medium light' are all contained within the main class 'module newsfeed newsfeed' (on the very first line.)

Using a bit of CSS juju, doing this:

.newsfeed .medium {
  font-size: 18px;
}

… will make the text of the article headline smaller than the default '30px'. And this will only affect the newsfeed module. All the others also using the 'medium' rule will be unaffected.

[bokifide]

Awesome! Thanks for explaining that :) I’ll give it a try now.

[bokifide]

Hey so I was testing out the custom.css values to see how it affects the magic mirror and I’m not getting any difference for some reason =/.

Before

The change (changed the px values to be way lower than what was shown in the original paste above)

After the above change

I was hoping changing those values would mean that I could make it look clean enough to not change the size of specific modules, but I seem to still be missing something :( .

Regards,
Boki

[KirAsh4]

'.small' affects the calendar, weather forecast modules, and newsfeed sourceTitle
'.medium' affects the date (only), current weather EXCEPT the temperature display, newsfeed article title
'.large' affects the time display and temperature from current weather

I’m sure there are others I’ve missed.

Those are all 'master' rules, affecting all those modules. If you want to only change a specific module, you have to follow the steps I mentioned above.

[zombi27]

I know it!

Tried the same yesterday, and found a “bug” :)
You inserted your code inside the body { } section (like i did), wich is not working…
Just erase the body { } from the custom.css and paste the code in the empty file :)

@MichMich, @KirAsh4: Is the body { } section a leftover from an older version maybe?

[MichMich]

@zombi27 Nope, it’s an example to show where your CSS must go … ;)

I think there is a limit in how far we should spoon feed the users. ;)

[zombi27]

okay :D The body section confused me too, so maybe it’s better to keep it empty? just a comment “place css code here?”

i could send a pull request? would be my first one :D or how could this be done? totally new to github…

[bokifide]

ahh… See I was thinking it was a bug as well, I don’t know much about CSS or programming in general, but I’m glad you clarified that part @zombi27 . I had just gone directly to the main.css to modify the values since I couldn’t get the dashboard to reflect the custom.css values :). I’ll give it a try once I get home.

Thanks for the help and direction @KirAsh4 @MichMich @zombi27

Boki

[KirAsh4]

Yep, that body { ... } rule is just there as an example. A quick search on 'css example' on Google would’ve shown you oodles of examples on syntax, almost to a fault.

[MichMich]

The problem if we change that file now (with an explanation text), it would overwrite files from users who modified it if they update …

[zombi27]

@MichMich: ah, okay ^^ that wouldn’t be nice :D

[bokifide]

@KirAsh4 uses cast shadow on bokifide…
… It’s super effective! :sweat:

haha :D . I guess it just wasn’t as common sense to me, in my mind I had no reason to doubt whether or not a portion of the sample given to me by the magic mirror gods had to be there. :pensive: But you’re 100% right, I should have googled it, because you never know :) that portion could serve another purpose like @MichMich pointed out.

Lesson learned. Won’t happen again.

Thank you for your time fellows :bow_tone1:
Boki

[daveyg_71]

@KirAsh4 said in Resize custom or main modules:

Those CSS rules will affect all the modules, as all modules use them. If you only want to affect one single module, then you need to change the rules to point to the specific module. Let’s say you want the text smaller on the newsfeed, then you need to look at the actual HTML being created to get the class named being used:

<div id="module_8_newsfeed" class="module newsfeed newsfeed" style="transition: opacity 1.25s; opacity: 0; position: static;">
  <div class="module-content">
    <div>
      <div class="light small dimmed">ESPN - Top News, 4 minutes ago:</div>
      <div class="bright medium light">Georgia RBs Chubb, Michel still iffy for opener</div>
    </div>
  </div>
</div>

Now you can see that the rules that affect the text, 'light small dimmed' and 'bright medium light' are all contained within the main class 'module newsfeed newsfeed' (on the very first line.)

Using a bit of CSS juju, doing this:

.newsfeed .medium {
  font-size: 18px;
}

… will make the text of the article headline smaller than the default '30px'. And this will only affect the newsfeed module. All the others also using the 'medium' rule will be unaffected.

Where can I find the HTML file that is being created?

The only HTML file I see is at ~/MagicMirror/index.html

This file looks nothing like the example shown here.

[cowboysdude]

@daveyg_71 put these in the css directory - custom.css file…

I would never suggest changing ANY core css file because it could have well not good results then you’ll be trying to fix several problems.

That’s what the custom.css file is for ;)

Not sure if you know but modules are numbered like the example above:
module_8_newsfeed

There is another thread here that explains all that :)
Here’s one and it even has an example custom.css file attached:
check here!

[strawberry 3.141]

@daveyg_71 there is only the index.html file, the rest of the DOM will be created during runtime with js. so if you want to manipulate the design with custom.css but you’re not sure about the structure, start the mirror in dev mode npm start dev or with ctrl+alt+i then you can inspect the DOM in tab elements or view the mirror in your browser and open developer tools

[daveyg_71]

@cowboysdude I wasn’t planning on changing the any core css files. Wanted to look at it so I could find the module information like the earlier post then change the custom.css

[daveyg_71]

@strawberry-3.141 I was able to view the inspect the html with crtl+shift+I.

my problem is it doesn’t look like the example above.

[shreyash]

@kirash4 didn’t resize, suggest me another way to resize array

[j.e.f.f]

@shreyash said in Resize custom or main modules:

@kirash4 didn’t resize, suggest me another way to resize array

When your CSS doesn’t seem to have any affect it’s usually one of two things:

• your rule is not specific enough, and is being overridden by one that is more specific than yours

• your rule has typos in it… sometimes it could be the difference of a space. div.someClass is interpreted by CSS differently than div .someClass

If you haven’t done so already, search this forum for the CSS 101 guide which should help explain the above.

[shreyash]

@j-e-f-f Unable to customize