MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    MMM-Sonos custom.css question

    Troubleshooting
    2
    4
    74
    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
      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
      • ?
        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
          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
          • ?
            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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy