• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Custom CSS for weather when I have 2

Scheduled Pinned Locked Moved Custom CSS
2 Posts 2 Posters 266 Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    pritikin71
    last edited by Jul 5, 2024, 8:35 PM

    Hi mates, I’m using 2 modules of .weather at the same time ( current and daily) but I only can manage the ccs of the Daily one):

    .weather {
    font-size: 30px;
    }
    c07843bd-c654-40c5-96dc-f237eced01d6-image.png

    I tried to put a “classes: name” but didnt work. Looking on Browser Inspector the module es the number 6 but I can’t find any way to put that on the custom.css successfully.

    Y only want this two moudles with the same font-size gf 30px . Any one can help me?

    S 1 Reply Last reply Jul 5, 2024, 10:48 PM Reply Quote 0
    • S Offline
      sdetweil @pritikin71
      last edited by sdetweil Jul 5, 2024, 10:52 PM Jul 5, 2024, 10:48 PM

      @pritikin71 classes goes after module:

      right?

      {
      module : " calendar",
      classes:"foo",
      config: {
      .
      .
      .
      }
      }
      

      css

      .foo .....   {   (NOT .weather)
      ...
      }
      

      you can ALSO use the ID value assigned to the module
      the selector for id is

      #id ... {
      ...
      }
      

      I use this cheatsheet to help me remember
      https://www.w3schools.com/cssref/css_selectors.php

      everthing before the {
      is called the selector clause… because is ‘selects’ the elements of the page doc, that the stuff INSIDE the {} will be applied to

      . = class
      # = id
      : is the prefix for special elements 
      [ x ] means element with an attribute of x   <div x="foo"/>
      nothing = tag name (table, ul, li, p, ....div)
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • 1 / 1
      1 / 1
      • First post
        1/2
        Last post
      Enjoying MagicMirror? Please consider a donation!
      MagicMirror created by Michael Teeuw.
      Forum managed by Sam, technical setup by Karsten.
      This forum is using NodeBB as its core | Contributors
      Contact | Privacy Policy