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

Changing table cell in calendar module using custom.css

Scheduled Pinned Locked Moved Custom CSS
11 Posts 2 Posters 1.0k 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.
  • E Offline
    evroom @sdetweil
    last edited by Nov 13, 2024, 5:37 PM

    @sdetweil said in Changing table cell in calendar module using custom.css:

    @evroom did you get this resolved?

    No, I did not and even with your additional tutorial I am hitting a black spot.

    I see this at the bottom:
    Screenshot 2024-11-13 at 18.00.27.png

    This corresponds with:

    <div class="module-content"
    ><table class="xsmall">
        <tr class="dateheader normal dayAfterTomorrow">
            <td colspan="3" style="padding-top: 10px;">Nov 15th 00:00 </td>
        </tr>
        <tr class="event-wrapper normal event dayAfterTomorrow">
            <td>&nbsp;&nbsp;&nbsp;</td>
            <td class="title bright align-left" colspan="2">TestCal: All day event</td>
        </tr>
    </table>
    </div>
    

    So I should have all info available to build the CSS entry, you would think.
    Right ?

    And the console does not like my input:

    ${'calendar .event'}
    VM2076:1 Uncaught SyntaxError: Unexpected token '{'
    ${'.calendar .event'}
    VM2080:1 Uncaught SyntaxError: Unexpected token '{'
    ${'.calendar .event .time'}
    VM2146:1 Uncaught SyntaxError: Unexpected token '{'
    

    I cannot even make a CSS entry to change this:
    <table class="xsmall">, that is how lost I am :-)

    Need to study the existing tutorials some more.

    E.J.

    MagicMirror version: 2.30.0
    Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
    Raspbian GNU/Linux 12 (bookworm)

    Test environment:
    MagicMirror version: v2.30.0
    Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
    Raspbian GNU/Linux 12 (bookworm)

    S 2 Replies Last reply Nov 13, 2024, 5:43 PM Reply Quote 0
    • S Offline
      sdetweil @evroom
      last edited by Nov 13, 2024, 5:43 PM

      @evroom the console jquery search is

      $('search string')
      

      parens, not braces

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @evroom
        last edited by sdetweil Nov 13, 2024, 5:52 PM Nov 13, 2024, 5:48 PM

        @evroom also, your screen shot says it

        Screenshot at 2024-11-13 11-45-00.png

        when there is no space between the elements in a selector clause,
        that mean they ALL MUST be present on AN element

        with space they must be in the same element TREE (notice the space after …Tomorrow and before td)

        so that means
        a tr (table row) element (no . in front) AND a dateheader (class .) AND a normal(class .) AND a dayAfterTomorrow (class .) followed by a td (table/column/data) element

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        E 1 Reply Last reply Nov 13, 2024, 8:47 PM Reply Quote 0
        • E Offline
          evroom @sdetweil
          last edited by Nov 13, 2024, 8:47 PM

          @sdetweil

          parens, not braces

          Yes, those who can read have a clear advantage. :-)

          $('.calendar tr .dateheader.normal.dayAfterTomorrow td')
          null
          
          $('.calendar tr.dateheader.normal.dayAfterTomorrow td')
          <td colspan="3" style="padding-top: 10px;">Nov 15th 00:00 </td>
          
          $('.calendar .dateheader.normal.dayAfterTomorrow td')
          <td colspan="3" style="padding-top: 10px;">Nov 15th 00:00 </td>
          

          custom.css:

          .calendar .dateheader.normal.dayAfterTomorrow td {
              padding-top: 0px;
            }
          
          .calendar tr.dateheader.normal.dayAfterTomorrow td {
            padding-top: 0px;
          }
          

          Both do no work.

          Either the selection is wrong, or perhaps it has to do with style="padding-top: 10px;".
          Or both.

          Will continue tomorrow.

          E.J.

          MagicMirror version: 2.30.0
          Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
          Raspbian GNU/Linux 12 (bookworm)

          Test environment:
          MagicMirror version: v2.30.0
          Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
          Raspbian GNU/Linux 12 (bookworm)

          S 1 Reply Last reply Nov 13, 2024, 8:49 PM Reply Quote 0
          • S Offline
            sdetweil @evroom
            last edited by Nov 13, 2024, 8:49 PM

            @evroom can u see the custom.css styles selected in the right window on the dev window elements tab?
            that will prove that the selector clause worked (or not)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            E 1 Reply Last reply Nov 13, 2024, 9:15 PM Reply Quote 0
            • E Offline
              evroom @sdetweil
              last edited by Nov 13, 2024, 9:15 PM

              @sdetweil

              Yes, I can:

              Screenshot 2024-11-13 at 22.09.32.png

              But is stricken through.
              So somebody high-jacked it probably.

              Look like I am going somewhere, but now the finishing touch.

              MagicMirror version: 2.30.0
              Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
              Raspbian GNU/Linux 12 (bookworm)

              Test environment:
              MagicMirror version: v2.30.0
              Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
              Raspbian GNU/Linux 12 (bookworm)

              S 1 Reply Last reply Nov 13, 2024, 9:20 PM Reply Quote 0
              • S Offline
                sdetweil @evroom
                last edited by Nov 13, 2024, 9:20 PM

                @evroom

                ok, the selector is good

                that typing at the top has replaced it

                but CSS selects the style that is MOST specific…

                yours might not be vs the style ON the element

                you can override by adding !important

                 .calendar tr.dateheader.normal.dayAfterTomorrow td {
                   padding-top: 0px !important;
                }
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                E 1 Reply Last reply Nov 13, 2024, 9:52 PM Reply Quote 0
                • E Offline
                  evroom @sdetweil
                  last edited by Nov 13, 2024, 9:52 PM

                  @sdetweil

                  That did the trick !

                  I must say that the Elements tab is confusing, as it looks like the value did not change.
                  Probably this is the state before custom.css is applied.
                  Screenshot 2024-11-13 at 22.27.58.png

                  The padding has gone (this was my goal):
                  Screenshot 2024-11-13 at 22.34.19.png

                  An additional question.
                  How to change the class, as in this example ?

                  $('.calendar table')
                  <table class="xsmall"><tr class="dateheader normal dayAfterTomorrow"><td colspan="3" style="padding-top: 10px;">Nov 15th 00:00 </td></tr><tr class="event-wrapper normal event dayAfterTomorrow"><td>&nbsp;&nbsp;&nbsp;</td><td class="title bright align-left" colspan="2">TestCal: All day event</td></tr></table>
                  
                  .calendar .table {
                    class: "small" !important;
                  }
                  

                  It says Unkown property name, which makes sense.
                  Screenshot 2024-11-13 at 22.50.12.png

                  E.J.

                  MagicMirror version: 2.30.0
                  Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
                  Raspbian GNU/Linux 12 (bookworm)

                  Test environment:
                  MagicMirror version: v2.30.0
                  Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
                  Raspbian GNU/Linux 12 (bookworm)

                  S 1 Reply Last reply Nov 13, 2024, 10:03 PM Reply Quote 0
                  • S Offline
                    sdetweil @evroom
                    last edited by sdetweil Nov 13, 2024, 10:05 PM Nov 13, 2024, 10:03 PM

                    @evroom you cannot add or change a classname string

                    class=“foo”
                    to add “bar” class too
                    class =“foo bar”

                    but you CAN change the behavior of the other classes to match what adding another class could do

                    OR , you could add the styles to the ELEMENTS you WOULD have added the bar class to…

                    just_have_to_select_them {
                    styles
                    }

                    as an example of a complex selector in my MMM-Config, I want to hide an element on a library generated element

                    .possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item%201"] {
                      display: none;
                    }
                    

                    this is
                    elements with the possibly-hidden-tab class
                    its second child div
                    its immed child div
                    its immed child div
                    its immed child div
                    its immed child ul
                    its immed only child li
                    with an a element containing a rel attribute value of “Item 1”
                    (spaces have to be encoded, but for clarity I left it out here)

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

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