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

Patience while learning .css - why does the following not work in my custom.css

Scheduled Pinned Locked Moved Development
6 Posts 3 Posters 5.4k 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.
  • W Offline
    Wedee
    last edited by Dec 12, 2016, 4:41 PM

    Try

    .clock .time, .clock .date {
    color: #628;
    }

    or

    .time, .date {
    color: #628;
    }

    V 2 Replies Last reply Dec 12, 2016, 4:46 PM Reply Quote 1
    • V Offline
      valid8r @Wedee
      last edited by Dec 12, 2016, 4:46 PM

      @Wedee Thanks, will do. I was wondering why the suggestion (source used for this) used “#module_1_…”.

      This makes more sense.

      1 Reply Last reply Reply Quote 0
      • W Offline
        Wedee
        last edited by Dec 12, 2016, 4:52 PM

        Yes I am unsure as well…

        Playing with custom.css last week it seemed like they were defining a name to be used elsewhere and I found I didn’t need it… Depending upon the module and if the tags are unique it appears you do not need to call the module either… .time, .date
        vs
        .clock .time, .clock .date

        I include any style I wanted to do in the same group…

        I did need it when i defined a table for a background.

        For example…

        .calendar_monthly, div#module_6_calendar_monthly table.small {
        width: 550px;
        background-color: rgba(63, 182, 236, 0.23);
        border-radius: 7px;
        padding: 10px;
        }
        .calendar, div#module_7_calendar {
        width: 550px;
        font-size: 26px;
        }

        Sorry I am not more technical on it… Just what i found worked for me last week.

        1 Reply Last reply Reply Quote 0
        • V Offline
          valid8r @Wedee
          last edited by Dec 12, 2016, 5:20 PM

          @Wedee Interestingly “.clock.time, .clock.date” did not work. However, “.clock .time, .date” does work.

          Thanks. The learning process continues!

          D 1 Reply Last reply Feb 11, 2017, 10:51 PM Reply Quote 0
          • D Offline
            doubleT Module Developer @valid8r
            last edited by doubleT Feb 11, 2017, 11:31 PM Feb 11, 2017, 10:51 PM

            @valid8r

            The reason “.clock.time” doesn’t work is because it’s looking for an object with both classes “clock” AND “time”.

            “.clock div.time” would be correct but only to address a div with the class “time” (within an object with the class “clock” ).
            “.clock .time” would be the same, but the object doesn’t have to be a div - it could be a p (paragraph) with the class “time”
            “.clock.time” would address only objects that have both classes, not regarding their parents.

            So in your case it would be correct to write “.clock .time, .clock .date” to address both “.time” and “date” within “.clock”. Your example would address all objects with the class “date” regardless of their parents class being “clock” or not.

            Edit:
            Not to confuse you, but just to make this complete, there is another way to make sure you get the right child of a parent:
            “.clock > .time” would address “.time” only if the direct parent is “.clock”. So if it’s

            < div class=“clock” >
               < div class=“time” >

            “.time” will be addressed, but if it is

            < div class=“clock” >
               < div >
                  < div class=“time” >

            “.time” is not addressed. (Just in this instance with > in between.)

            1 Reply Last reply Reply Quote 4
            • 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