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.

    Calendar Font Size

    Scheduled Pinned Locked Moved Custom CSS
    13 Posts 2 Posters 10.0k Views 2 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.
    • D Offline
      DerOptiker86
      last edited by

      Hi there builders!
      I build up my MM and try to install some modules.
      After all i get it to run the modules and placed them in the righ space of the mirror.
      I also read the CSS tut and read all the topics in the CSS Blog… but there is a hole in my head and i can’t understand what’s wrong in my custom.css file…

      I try some ways to change font size of my calendar that is pointed on the top center.
      I like to show up it a little bit bigger.
      and second prob is… if I change the font size of my clock it clips into my date… is there a line i forgot to @?
      So what`s my fault? Sorry but i don’t get it :(

      Thats my custom.css file and my screen
      0_1533044947763_mm screen.jpg

      .body {
      
      }
      .clock .time {
                            font-size 60px;
                            color: blue; 
      }
      .clock .date {
                           font-size: 30px          
      .calendar {
                       font-size: 200px
      }
      

      greetz from germany

      justjim1220J 1 Reply Last reply Reply Quote 0
      • justjim1220J Offline
        justjim1220 Module Developer @DerOptiker86
        last edited by

        @deroptiker86

        Add this from the calendar.css to your custom.css…

        .calendar .symbol {
          padding-left: 0;
          padding-right: 10px;
          font-size: 80%;
          vertical-align: top;
        }
        
        .calendar .symbol span {
          display: inline-block;
          -ms-transform: translate(0, 2px); /* IE 9 */
          -webkit-transform: translate(0, 2px); /* Safari */
          transform: translate(0, 2px);
        }
        
        .calendar .title {
          padding-left: 0;
          padding-right: 0;
        }
        
        .calendar .time {
          padding-left: 30px;
          text-align: right;
          vertical-align: top;
        }
        

        then you can change the font size from there.

        Go to your clock.js file and look for this section…

        /************************************
        		 * Create wrappers for DIGITAL clock
        		 */
        
        		var dateWrapper = document.createElement("div");
        		var timeWrapper = document.createElement("div");
        		var secondsWrapper = document.createElement("sup");
        		var periodWrapper = document.createElement("span");
        		var weekWrapper = document.createElement("div")
        		// Style Wrappers
        		dateWrapper.className = "date normal xlarge bolder";
        		timeWrapper.className = "time bright large bolder";
        		secondsWrapper.className = "dimmed";
        		weekWrapper.className = "week dimmed medium"
        

        change the sizes of the date and time here. You can use the sizes as defined in your main.css file…

        .xsmall {
          font-size: 15px;
          line-height: 20px;
        }
        
        .small {
          font-size: 20px;
          line-height: 25px;
        }
        
        .medium {
          font-size: 30px;
          line-height: 35px;
        }
        
        .large {
          font-size: 65px;
          line-height: 65px;
        }
        
        .xlarge {
          font-size: 75px;
          line-height: 75px;
          letter-spacing: -3px;
        }
        

        Hope this helps!

        "Life's Too Short To Dance With Ugly People"
        Jim Hallock - 1995

        1 Reply Last reply Reply Quote 0
        • D Offline
          DerOptiker86
          last edited by

          Great thanks for reply!!!
          I’ll try it in the evening and hope it fits :)

          THX justjim1220

          1 Reply Last reply Reply Quote 1
          • D Offline
            DerOptiker86
            last edited by

            ok… i fixed the clock with the main.css… changing the font-size for xlarge and it fits nice… but the calendar is still as smal as before…
            here my custom.css again:

            
             }
            .calendar .symbol {
              padding-left: 0;
              padding-right: 10px;
              font-size: 100%;
              vertical-align: top;
            }
            
            .calendar .symbol span {
              display: inline-block;
              -ms-transform: translate(0, 2px); /* IE 9 */
              -webkit-transform: translate(0, 2px); /* Safari */
              transform: translate(0, 2px);
            }
            
            .calendar .title {
              padding-left: 0;
              padding-right: 0;
            }
            
            .calendar .time {
              padding-left: 30px;
              text-align: right;
              vertical-align: top;
            }
            
            .calendar {
             width: 375px
            }
            
            

            with the command

            .calendar {
            width: 375px
            } (see above)

            nothing is happen to the size of it. still i miss a .class add?

            greetz

            justjim1220J 2 Replies Last reply Reply Quote 0
            • justjim1220J Offline
              justjim1220 Module Developer @DerOptiker86
              last edited by

              @deroptiker86 said in Calendar Font Size:

              .calendar {
              width: 375px
              }

              Add the following to the above…

              font-size: 2em;
              line-height: 2.5em;
              

              OR…

              font-size: 35px;
              line-height: 40px;
              

              Then, play with the numbers to get it how you want it.

              "Life's Too Short To Dance With Ugly People"
              Jim Hallock - 1995

              1 Reply Last reply Reply Quote 0
              • justjim1220J Offline
                justjim1220 Module Developer @DerOptiker86
                last edited by

                @deroptiker86

                Like this…

                .calendar {
                 width: 375px;
                font-size: 2em;
                line-height: 2.5em;
                }
                

                OR…

                .calendar {
                 width: 375px;
                font-size: 35px;
                line-height: 40px;
                }
                

                And you are missing the ‘;’ after ‘width: 375px’

                "Life's Too Short To Dance With Ugly People"
                Jim Hallock - 1995

                1 Reply Last reply Reply Quote 0
                • D Offline
                  DerOptiker86
                  last edited by

                  :/ hmmmm ok i add the lines…
                  then change the px… and restart and it still looks like the same… thats crazy…0_1533059358493_mm screen.jpg

                  justjim1220J 1 Reply Last reply Reply Quote 0
                  • justjim1220J Offline
                    justjim1220 Module Developer @DerOptiker86
                    last edited by

                    @deroptiker86

                    Hmmm, let me play with it on my end.
                    I’ll be right back in a few minutes.

                    "Life's Too Short To Dance With Ugly People"
                    Jim Hallock - 1995

                    1 Reply Last reply Reply Quote 0
                    • D Offline
                      DerOptiker86
                      last edited by

                      nice thx!

                      
                      .calendar .time {
                        padding-left: 30px;
                        text-align: right;
                        vertical-align: top;
                      }
                      
                      .calendar {
                       width: 375px;
                       font-size: 200px;
                       line-height: 40px;
                      }
                      
                      
                      

                      i also drop my cofig.js here… maybe thats my fault:

                        language: "de",
                              timeFormat: 24,
                              units: "metric",
                      
                              modules: [
                                      {
                                              module: "alert",
                                      },
                                      {
                                              module: "updatenotification",
                                              position: "top_bar"
                                      },
                                      {
                                              module: "clock",
                                              position: "top_left"
                                      },
                                      {
                                              module: "calendar",
                                              header: "Icloud Calender",
                                              position: "top_center",
                                              config: {
                                                      calendars: [
                                                              {
                                                                      symbol: "calendar-check-o ",
                                                                      url:"webcal://pxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                                              }
                                                      ]
                                              }
                                      },
                                      {
                                              module: 'MMM-NFL',
                                              position: 'left',
                                              config: {
                                                      colored: true
                                              }
                                      },
                                      {
                                              module: 'MMM-NFL',
                                              position: 'right',
                                              config: {
                                                      colored: true,
                                                      focus_on: "NE"
                                              }
                                      },
                                      {
                                              module: "MMM-rain-forecast",
                                              position: "top_right",   // see mirror setting for options
                                              header: "Gibt es Regen",
                                              config: {
                                                      lat: xxxx,
                                                      lon: xxxxx,
                                                      pleaseWait: "Bitte warten",
                                                      noRainText: "Bis %s kein Regen",
                                                      fillColour: '#0074d9'   // This is a blue color you can also use blue, cyan etc
                                              }
                                      },
                                      {
                                              module: 'mmm-moon-phases',
                                              header: 'Aktuelle Mondphase',   // optionally you can add a header to this block
                                              position: 'bottom_right',        // this can be any of the regions
                                              config: {
                                              }
                                      },
                                      {
                                              module: "weatherforecast",
                      
                      
                      
                      justjim1220J 2 Replies Last reply Reply Quote 0
                      • justjim1220J Offline
                        justjim1220 Module Developer @DerOptiker86
                        last edited by justjim1220

                        @DerOptiker86

                        OK, add the following to your config.js…

                        tableClass: "large",
                        

                        like this…

                        {
                            module: "calendar",
                            header: "iCloud Calendar",
                            position: "top_center",
                            config: {
                                tableClass: "large",
                        	calendars: [
                        	    {
                        	        symbol: "calendar-check-o ",
                        		url: " "
                        	    }
                        	]
                            }
                        },
                        

                        you can change a lot of the defaults in the config…

                        defaults: {
                        		maximumEntries: 10, // Total Maximum Entries
                        		maximumNumberOfDays: 365,
                        		displaySymbol: true,
                        		defaultSymbol: "calendar-alt", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                        		displayRepeatingCountTitle: false,
                        		defaultRepeatingCountTitle: "",
                        		maxTitleLength: 50,
                        		wrapEvents: false, // wrap events to multiple lines breaking at maxTitleLength
                        		fetchInterval: 30 * 60 * 1000, // Update every 30 minutes.
                        		animationSpeed: 2000,
                        		fade: false,
                        		urgency: 7,
                        		timeFormat: "relative",
                        		dateFormat: "MMM Do",
                        		fullDayEventDateFormat: "MMM Do",
                        		getRelative: 6,
                        		fadePoint: 0.25, // Start on 1/4th of the list.
                        		hidePrivate: false,
                        		hideOngoing: false,
                        		colored: true,
                        		coloredSymbolOnly: true,
                        		tableClass: "large",
                        		calendars: [
                        			{
                        				symbol: "calendar",
                        				url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
                        			},
                        		],
                        		titleReplace: {
                        			"De verjaardag van ": "",
                        			"'s birthday": ""
                        		},
                        		broadcastEvents: true,
                        		excludedEvents: []
                        	},
                        

                        I hope this is what you’re looking for. :winking_face:

                        "Life's Too Short To Dance With Ugly People"
                        Jim Hallock - 1995

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