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 10.6k 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
      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
                    OSZAR »