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.
    • 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
                        • 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