MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    CSS basics

    Development
    4
    9
    7226
    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.
    • zdenek
      zdenek last edited by

      iˇm totaly new - how can I identify the name of the object (in module), I want to modify via custom.css? Let say, I want to modify in default Calendar module the text of todays entries to yellow. How to find in calendar.js, what I want to modify and how to correctly define it in custom.css?
      thanks

      broberg 1 Reply Last reply Reply Quote 0
      • broberg
        broberg Project Sponsor @zdenek last edited by broberg

        @zdenek I would start by searching for class or className in the module .js file
        Trying to isolate what object is being rendered and see if it has a individual class name or general one (the latter being font sizes like small or large, or font color and weight, light and dimmed).

        if you find a individual class name (like date for the default clock’s date) you can easily just change the css for that particular element like this

        .clock .date {
        --csscode--
        }
        

        There is also the general ones used for headers and text etc. for an example small which is used to set the font size in the calendar module (amongst many other).

        If you want to change the font size of elements with the class name small in the calendar you do this like so

        .calendar .small {
        font-size: 10px;
        }
        

        If you want to change the font size of ALL elements that uses the class name small you do so by removing the module classname like this

        .small {
        font-size 10px
        }
        

        Good practice is to always add the module class name before the class you are changing (to avoid you messing up other/future modules that maybe uses the same class name).

        The module class name is the exact name of the module in the config file and/or the name of the modules folder.

        If the text/image or anything lacks a class name you can apply css to elements as well.
        so for an example, if you have a module with only one image in it, and you want to change the size of that image . you could do that like this :

        .modulename img {
        width: 500px;
        height: 500px;
        }
        

        Do note however, this code will change all < img >-elements, ie all images will get the same size.

        But the same can be applied to td tr table p span etc etc.

        and if you want to apply css to the entire module (for an example if you want to limit the width of the module) you can do so by

        .modulename {
        Width: 300px;
        }
        

        There are more tricks to make your custom layout, but these are the basics as I see them.
        So I hope this helps!

        zdenek 1 Reply Last reply Reply Quote 1
        • zdenek
          zdenek @broberg last edited by zdenek

          @broberg thanks, it helps a lot. Just the basic question I still don’t get - How do I identify “individual class name” in JS file? Is there any key word? I went through code clock.js and there is nothing (for me) like “this is Span named date”. Actually, I want to have time (hours + : + minutes) green. There is timeString, which is I guess variable. There is div named digital, but I don’t want to have the whole div in green. There is also child named timeWrapper - this is ht right element? but

          .clock.time {
          color: green;
          }
          

          Doesn’t work. Also

          .clock.digital {
          color: green;
          }
          

          and also

          .clock.timeWrapper {
          color: green;
          }
          

          doesn’t do anything.
          Thanks for help

          1 Reply Last reply Reply Quote 0
          • broberg
            broberg Project Sponsor last edited by broberg

            First off, you need a space between the two classes .modulename.class is not the same as .modulename .class

            These are the classes in the clock module

            dateWrapper.className = "date normal medium";
            		timeWrapper.className = "time bright large light";
            		secondsWrapper.className = "dimmed";
            		weekWrapper.className = "week dimmed medium"
            
            

            As you can see there are no individual classname assigned to the secondsWrapper, just the dimmed class which is used by the weekWrapper as well.

            If you look at timeWrapper you will se that it will get css code frome four different classes.
            Bright gives the text a white color.
            Large gives the text it’s font size.
            And
            Light gives the text the weight of the font.

            strawberry 3.141 zdenek 2 Replies Last reply Reply Quote 0
            • strawberry 3.141
              strawberry 3.141 Project Sponsor Module Developer @broberg last edited by

              @broberg the secondsWrapper is the only sup tag so it can be accessed by .clock sup.dimmed

              Please create a github issue if you need help, so I can keep track

              1 Reply Last reply Reply Quote 1
              • zdenek
                zdenek @broberg last edited by

                @broberg thanks, but still not clear. The missing space is clear. So, what will be in the custom to get time in green? I’m totally lost…

                broberg 1 Reply Last reply Reply Quote 0
                • broberg
                  broberg Project Sponsor @zdenek last edited by

                  @zdenek

                  .clock .time {
                  Color: green;
                  }
                  

                  And as @strawberry-3-141 mentioned. Just the seconds

                  .clock sup.dimmed {
                  Color: #00FFAA;
                  }
                  
                  zdenek 1 Reply Last reply Reply Quote 0
                  • zdenek
                    zdenek @broberg last edited by

                    @broberg ah, thanks. I was trying that, but without the space between classes. This works, perfect, thanks. I hope, I’ll once get it…

                    1 Reply Last reply Reply Quote 0
                    • B
                      beck0r last edited by beck0r

                      Have you tried to use an external Browser e.g. from your Laptop to Open your Magic Mirror Homepage ? (192.168.178.20:8080 for example) there you could use F12(developer Mode) to find out the css class names you Need

                      1 Reply Last reply Reply Quote 2
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy