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 15.7k 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
                        • S Offline
                          sdetweil @rdwilbrink
                          last edited by

                          @rdwilbrink I don’t know.

                          Sam

                          How to add modules

                          learning how to use browser developers window for css changes

                          1 Reply Last reply Reply Quote 0
                          • karsten13K karsten13 referenced this topic on

                          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                          With your input, this post could be even better 💗

                          Register Login
                          • 1
                          • 2
                          • 2 / 2
                          • 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