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.

    Bright UI

    Scheduled Pinned Locked Moved Showcase
    27 Posts 8 Posters 13.0k Views 10 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.
    • P Offline
      potts-mike
      last edited by

      I’ve been poking around and figured out how to make the Image art larger in the sonos module but could still use some help with the paprika font color.

      Piranha1605P 1 Reply Last reply Reply Quote 0
      • Piranha1605P Offline
        Piranha1605 @potts-mike
        last edited by

        @potts-mike

        At first glance, I think that these are the entries attached below.

        .sonos ul .art img {
          height: 400px;
        }
        
        .MMM-PaprikaMenu .menu .today .meal {
          color: #8a8a8a; 
          font-size: 24px;
        }
        

        But it may also be that something is written about the .js or .njk, so have a look

        1 Reply Last reply Reply Quote 0
        • P Offline
          potts-mike
          last edited by

          That fixed Sonos and paprika like I wanted. Thanks for the help.

          1 Reply Last reply Reply Quote 0
          • P Offline
            potts-mike
            last edited by

            Any one using this with MMM-calendarext2? Would love to get everything styled together.

            Piranha1605P 1 Reply Last reply Reply Quote 0
            • Piranha1605P Offline
              Piranha1605 @potts-mike
              last edited by

              @potts-mike
              I got it with the calendar, you just have to adjust the CSS.

              Here is an example with which entries you can customize it.

              
              }
              .CX2 .agenda .eventSub {
              	display:none;
              }
              .CX2 .daily .fullday .eventTime {
              	display:none;
              	font-size: 18px;
              }
              .CX2 .slot .event{
              	background: inherit;
              	font-size: 18px;
              }
              .CX2 .slot .slotHeader{
              	background-color:Transparent;
              	text-transform: uppercase;
              	font-size: 20px;
              	font-weight: 400;
              	border-bottom: 1px solid #1ed760;
              	line-height: 15px;
              	padding-bottom: 5px;
              	margin-bottom: 10px;
              	color: #999;
              }
              .CX2 .today .slotHeader * {
              	text-transform: uppercase;
              	color: #999;
              	font-size: 20px;
              }
              .CX2 .event.fullday {
              	color: inherit;
              }
              .CX2 .slot .slotFooter {
              	display: none;
              }
              .CX2 .event[data-calendar-name="Die Fischers"] {
              	border-left: 2px #ce4138 solid;
              	border-bottom: 1px solid #424242;
              }
              .CX2 .event[data-calendar-name="Karate"] {
              	border-left: 2px #3288ff solid;
              	border-bottom: 1px solid #424242;
              }
              .CX2 .event[data-calendar-name="Abfall"] {
              	border-left: 2px #6bff32 solid;
              	border-bottom: 1px solid #424242;
              }
              .CX2 .slot > .slotContent{
                position:relative;
                width:100%;
                background-image:inherit;
              }
              .CX2 .event.fullday {
                border-radius:0px;
              }
              
              1 Reply Last reply Reply Quote 0
              • P Offline
                potts-mike
                last edited by

                Awesome, thanks.

                This would be for the custom.css for the module?

                Piranha1605P 1 Reply Last reply Reply Quote 0
                • Piranha1605P Offline
                  Piranha1605 @potts-mike
                  last edited by

                  @potts-mike yes

                  1 Reply Last reply Reply Quote 0
                  • R Offline
                    rdwilbrink @Piranha1605
                    last edited by

                    @Piranha1605 Hallo your mirror looks verry nice.

                    can you tell me how you make that menu on the left side. can you post the css of that menu

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

                      @rdwilbrink

                      note that MM is running in an iframe and the menu is outside

                      The MagicMirror runs in an iFrame of an html page, the other pages are all written in html and css.

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      R 1 Reply Last reply Reply Quote 0
                      • R Offline
                        rdwilbrink @sdetweil
                        last edited by

                        @sdetweil ok and is there a turoial how i do that running Magic Mirror in an iframe and the menu outside?

                        S 1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 3
                        • 3 / 3
                        • 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