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.

    Default calender change Header position

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    6 Posts 2 Posters 1.6k 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.
    • S Offline
      Scool
      last edited by

      Hey guys,

      i’m completly new in this world, but the possibilities are great.
      The modul default calendar is set with “top-right”, now the header is also at the right side of the modul.

      I search the .css and the calendar.js, but i couldn’t find the possibility to set header “margin:left” oder “float:left” wthatever.

      is would be very nice, if somebody could help me ;-)

      /* Magic Mirror Config Sample
       *
       * By Michael Teeuw http://michaelteeuw.nl
       * MIT Licensed.
       *
       * For more information how you can configurate this file
       * See https://github.com/MichMich/MagicMirror#configuration
       *
       */
      
      var config = {
      	address: "localhost", // Address to listen on, can be:
      	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
      	                      // - another specific IPv4/6 to listen on a specific interface
      	                      // - "", "0.0.0.0", "::" to listen on any interface
      	                      // Default, when address config is left out, is "localhost"
      	port: 8080,
      	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
      	                                                       // or add a specific IPv4 of 192.168.1.5 :
      	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
      	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
      	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
      
      	language: "en",
      	timeFormat: 24,
      	units: "metric",
      
      	modules: [
      		{
      			module: "MMM-DigClock",
      			position: "top_right",	// This can be any of the regions.
      			config: {
      				showDate: true,
      				showWeek: false,
      				showSeconds: false,
      				dateFormat: "ddd, ll",
      				timezone: "Europe/Berlin"
      			}
      		},
      		{
      			module: "weatherforecast",
      			position: "top_right",
      			header: "WIE WIRD DAS WETTER?",
      			config: {
      				location: "yyyyyyyyy",
      				locationID: "yyyyyyy",  //ID from http://bulk.openweathermap.org/sample/; unzip the gz file and find your city
      				appid: "xxxxxxxx"
      			}
      		},
      		{
      			module: "calendar",
      			header: "Termine xxxxxxxx",
      			position: "top_right",
      			config: {
      				timeFormat: "absolute",
      				maximumEntries: "5",
      				maximumNumberOfDays: "365",
      				getRelative: 48,
      				calendars: [
      					{
      						symbol: "calendar-check",
      						url: "webcal://xxxxxxxxxxxxx"
      					}
      				]
      			}
      		},
      		{
      			module: "MMM-EasyPix",
      				position: "top_left",
      				config: {
      					picName: "vp_2.png", // Enter the picture file name.
      					maxWidth: "33%",        // Size picture precisely. Retains aspect ratio.
      					sounds: ["1.mp3", "me2.mp3"],  // mp3 sound file names in quotes seperated by commas for Hello-Lucy
      					updateInterval: 30 * 60 * 1000,     // updates display
      					animationSpeed: 3000,
      			}	
      		},
      		{
      			module: "MMM-EasyPix",
      				position: "top_center",
      				config: {
      					picName: "vp_2.png", // Enter the picture file name.
      					maxWidth: "66%",        // Size picture precisely. Retains aspect ratio.
      					sounds: ["1.mp3", "me2.mp3"],  // mp3 sound file names in quotes seperated by commas for Hello-Lucy
      					updateInterval: 30 * 60 * 1000,     // updates display
      					animationSpeed: 3000,
      			}	
      		},
      		{
      			module: "MMM-EARTH",
      			position: "bottom_right",
      			config: {
      				mode: "Natural",
      				rotateInterval: 15000,
      				MaxWidth: "35%",
      				MaxHeight: "35%",
      			}
      		},
      		{
      			module: "newsfeed",
      			position: "bottom_bar",
      			config: {
      				feeds: [
      					{
      						title: "Tagesschau",
      						url: "http://www.tagesschau.de/xml/rss2"
      					},
      					{
      						title: "Der Spiegel",
      						url: "http://www.spiegel.de/schlagzeilen/tops/index.rss"
      					},
      				],
      				showSourceTitle: true,
      				showPublishDate: true
      			}
      		},
      	]
      
      };
      
      /*************** DO NOT EDIT THE LINE BELOW ***************/
      if (typeof module !== "undefined") {module.exports = config;}
      
      
      1 Reply Last reply Reply Quote 0
      • D Offline
        dxfan227
        last edited by

        Try

        div.module.calendar header {
            
        }
        

        if that doesnt work, give me a few hours to get home and actually look at my custom.css file

        1 Reply Last reply Reply Quote 0
        • S Offline
          Scool
          last edited by Scool

          where should i write this code?
          custom.css??

          actually she look like this (with your Command):

          
           body {
           	
          }
          
           div.module.calendar header {
              
          }	
          
          1 Reply Last reply Reply Quote 0
          • D Offline
            dxfan227
            last edited by

            ill get you the full code in a few hours…yes in custome css but you will also need to alight the text properly too.

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

              sorry here was s the css code

              .calendar header {
               	text-align: center // Change this to whatever you want....right,center or left
              }
              
              1 Reply Last reply Reply Quote 0
              • S Offline
                Scool
                last edited by

                Thank you!

                i’ll try and give you feedback!

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