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.

    MMM-Sonos custom.css question

    Scheduled Pinned Locked Moved Troubleshooting
    4 Posts 2 Posters 740 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.
    • S Offline
      spoonek
      last edited by

      Hello, I have the MMM-Sonos module installed and working. I loaded a custom .css and the text layout is working my OCD. I have no programming skills but have managed to change the font size and things to my liking. The one thing I can’t resolve are the gaps between Source and Artist. Below pics are actual vs what I want. What is missing from the .css? Thanks!

      Actual:
      Screen Shot 2020-08-23 at 4.21.19 PM.png

      What I want:
      custom_css_want.png

      My custom.css:

      /* Sonos --------------------------------------------*/
      .sonos ul .art img {
          height: 150px;
          width: 150px;
          border-radius: 0%;
          margin: 4px 4px;
          border: 0px solid #FFF;
      }
      .sonos ul .type {
          font-size: 16px;
          padding: 0px 0px;
          line-height: 16px;
          width: 300px;
      }
      .sonos ul .room {
          font-size: 20px;
          padding: 0px 0px;
          line-height: 20px;
          width: 300px;
      }
      .sonos ul .song {
          padding: 0px 0px;
          position: relative;
      }
      .sonos ul .name {
          width: 300px;
          font-size: 16px;
          padding: 0px 0px;
          line-height: 16px;
      }
      /*---------------------------------------------------*/
      
      1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User
        last edited by

        the best way for a real time css editing is using dev console

        • stop pm2 process (if used)
        cd ~/MagicMirror
        npm start dev
        

        you will have the debug windows ;)
        Click on Elements window
        the HTML code will appear

        you can edit un real time HTML code and the css code

        1 Reply Last reply Reply Quote 0
        • S Offline
          spoonek
          last edited by spoonek

          I checked that out but didn’t see where I could edit the layout. (n00b)

          Looking at the sonos.css code, it basically does the same thing. Zone and Source are at the top, Artist and Track are on the right. I’d like to make it so that all four are on the side of the Cover Art, which IMO looks cleaner, takes up less space on the screen.

          alt text

          sonos.css

          .sonos ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
          }
          .sonos ul .name,
          .sonos ul .art {
            display: inline-block;
            vertical-align: middle;
          }
          .sonos ul .name {
            padding: 0px .25em;
          }
          .sonos ul .art img {
            height: 100px;
          }
          .sonos ul .type,
          .sonos ul .room {
            font-size: 50%;
            padding: .25em .5em;
          }
          .sonos ul .song {
          	padding: 0px 0px;
          	position: relative;
          }
          .sonos ul.flip {
            direction: rtl;
          }
          
          1 Reply Last reply Reply Quote 0
          • ? Offline
            A Former User
            last edited by A Former User

            css.png

            exemple

            • for MMM-News module
            • position is bottom_bar

            you have all css value in the right, you have just to tune it :) (it’s a real time editing)

            I can’t help more, because i don’t use your module

            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