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.

    calendar

    Scheduled Pinned Locked Moved Custom CSS
    10 Posts 3 Posters 1.7k Views 3 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.
    • J Offline
      JohnGalt @sdetweil
      last edited by

      @sdetweil - Thanks! I will clean up my code some, when I get a chance. I appreciate the input.

      1 Reply Last reply Reply Quote 0
      • J Offline
        JohnGalt @sdetweil
        last edited by

        @sdetweil – BTW, it this also true for all modules? That is, also for non-default modules? [Somehow I had internalized that even if default modules could be addressed this way, others required something like the following]:

        .module.MMM-WeatherAlerts header {text-align: left;
        }
        .module.MMM-WeatherAlerts {  background-color:rgba(255,255,255,0.2); 
        }
        
        
        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @JohnGalt
          last edited by

          @JohnGalt its the same for all modules…

          .clock
          .calendar
          .MMM-Config
          whatever

          when MM puts the content in a section it adds a class (.modulename) to that block of content

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          J 1 Reply Last reply Reply Quote 0
          • J Offline
            JohnGalt @sdetweil
            last edited by

            @sdetweil - Great, good to know.

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @JohnGalt
              last edited by sdetweil

              @JohnGalt here is a copy out of some of the content for a weather module

              <div class="container" style="display: block;">
                   <div id="module_5_weather" class="module weather weather">
                       <header class="module-header" style="display: none;"></header>
                         <div class="module-content">
                             // module content would go here
                            <div class="dimmed light small"> Cargando … </div>
                        </div>
                  </div>
              </div>
              

              on this line

              <div id="module_5_weather" class="module weather weather">
              

              you have the modulename as a class
              and the id “module_5_weather”
              as the selectable elements to target the content inside
              module_5 is the count of modules top down starting at 0
              good if u had multiple instances of a module and wanted to target different ones for different styles

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              J 1 Reply Last reply Reply Quote 0
              • S sdetweil referenced this topic on
              • J Offline
                JohnGalt @sdetweil
                last edited by

                @sdetweil - Thanks Sam. This will help when I work on cleaning up my display overall, as i do have multiple instances of both calendar and weather running!

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  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