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.

    Multiple tables formatted, not just MMM-Gas

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 3 Posters 1.2k 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.
    • ankonaskiff17A Offline
      ankonaskiff17
      last edited by

      I applied some CSS to the MMM-Gas table and all was looking good until I looked at all the other tables on my MM and they all took the same formatting as MMM-Gas even though I directly named the module as shown in this code snippet. I thought that by addressing each item as shown in first CSS would prevent that. Shouldn’t the other tables have used whatever was configured in to their module code and CSS?
      .MMM-Gas {
      something something
      }
      would have prevented that.
      I turned off the CSS for MMM-Gas and the other tables reverted to their expected format, Below is CSS for couple of items. How do I format JUST the MMM-Gas table?

      /* ###MMM-Gas Formatting###
      .MMM-Gas .table {
      position: relative;
      left: 20px;
      width: 95%;
      }

      .MMM-Gas th {
      position: relative;
      padding: 0;
      text-align: left;
      font-size: 20px;
      }

      cowboysdudeC 1 Reply Last reply Reply Quote 0
      • cowboysdudeC Offline
        cowboysdude Module Developer @ankonaskiff17
        last edited by

        @ankonaskiff17

        Try

        MMM-Gas .table {
        position: relative;
        left: 20px;
        width: 95%;
        }
        
        ankonaskiff17A 1 Reply Last reply Reply Quote 0
        • ankonaskiff17A Offline
          ankonaskiff17 @cowboysdude
          last edited by

          @cowboysdude I already have that in place.

          S 1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @ankonaskiff17
            last edited by

            @ankonaskiff17 what your css said was

            for the module (space)
            if it uses .table class
            adjust like so

            what u didn’t catch was (space) .table means .table for EVERY occurance

            selectors are ALWAYS all matching, document wide

            so u need to remove the space,
            or
            provide some more operators that will make the selector more specific, > and or ~

            (on my phone at the moment, will try when I get to the computer)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @ankonaskiff17

              works better if you use the table TAG instead of the class

              .MMM-gas table

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              ankonaskiff17A 1 Reply Last reply Reply Quote 0
              • ankonaskiff17A Offline
                ankonaskiff17 @sdetweil
                last edited by ankonaskiff17

                @sdetweil So should be either .MMM-Gas.table { } or .MMM-Gas table { }? What is the preferred way?

                S 2 Replies Last reply Reply Quote 0
                • S Away
                  sdetweil @ankonaskiff17
                  last edited by

                  @ankonaskiff17 .table is class

                  so

                  .MMM-gas table {
                  }

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @ankonaskiff17
                    last edited by sdetweil

                    @ankonaskiff17 preferred is the way that works

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    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