• 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.

CSS basics

Scheduled Pinned Locked Moved Development
9 Posts 4 Posters 8.3k 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.
  • Z Offline
    zdenek @broberg
    last edited by zdenek Apr 30, 2017, 5:10 AM Apr 30, 2017, 5:08 AM

    @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
    • B Offline
      broberg Project Sponsor
      last edited by broberg Apr 30, 2017, 8:33 AM Apr 30, 2017, 8:25 AM

      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.

      S Z 2 Replies Last reply Apr 30, 2017, 9:04 AM Reply Quote 0
      • S Offline
        strawberry 3.141 Project Sponsor Module Developer @broberg
        last edited by Apr 30, 2017, 9:04 AM

        @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
        • Z Offline
          zdenek @broberg
          last edited by Apr 30, 2017, 9:21 AM

          @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…

          B 1 Reply Last reply Apr 30, 2017, 9:28 AM Reply Quote 0
          • B Offline
            broberg Project Sponsor @zdenek
            last edited by Apr 30, 2017, 9:28 AM

            @zdenek

            .clock .time {
            Color: green;
            }
            

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

            .clock sup.dimmed {
            Color: #00FFAA;
            }
            
            Z 1 Reply Last reply Apr 30, 2017, 11:26 AM Reply Quote 0
            • Z Offline
              zdenek @broberg
              last edited by Apr 30, 2017, 11:26 AM

              @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 Offline
                beck0r
                last edited by beck0r May 29, 2017, 6:08 AM May 29, 2017, 6:06 AM

                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 Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy