• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

2 Of the same module but different position via css?

Scheduled Pinned Locked Moved Unsolved Troubleshooting
10 Posts 3 Posters 2.5k Views 3 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
    dxfan227
    last edited by Mar 31, 2019, 5:15 AM

    I have two calender modules ( mine and wife) they are both “upper-left” and they sit one on top of each other.

    I’d like to get them to sit next to each other on the same row…I assume i need to do this with custom.css however wouldnt both the modules have the same class id’s? How do I make changes to one with css but not the other? thank you very much!

    A 1 Reply Last reply Mar 31, 2019, 7:45 AM Reply Quote 0
    • A Offline
      AdnanAhmed97 @dxfan227
      last edited by Mar 31, 2019, 7:45 AM

      @dxfan227 just clone the calender module again and change the name and add it in the config.js file and change the position

      D 1 Reply Last reply Mar 31, 2019, 8:24 AM Reply Quote 0
      • D Offline
        dxfan227 @AdnanAhmed97
        last edited by Mar 31, 2019, 8:24 AM

        @AdnanAhmed97

        Two questions… how do I clone it, it was part of the standard modules that ship with magic mirror.

        Also what files do I rename?

        Thank you

        1 Reply Last reply Reply Quote 0
        • A Offline
          AdnanAhmed97
          last edited by AdnanAhmed97 Mar 31, 2019, 9:41 AM Mar 31, 2019, 9:40 AM

          Copy the module folder and paste it in the modules directory and just rename it.
          And then call the modules
          in the config.js individually
          Rename the calender.js file too

          1 Reply Last reply Reply Quote 0
          • I Offline
            ianperrin
            last edited by ianperrin Mar 31, 2019, 10:55 AM Mar 31, 2019, 10:36 AM

            @AdnanAhmed97 - if the default calendar module is being used, it is not necessary to clone it as multiple instances of the module can be added to the config.js file without having to use the clone trick.

            @dxfan227 - assuming you are using the default calendar module, and want two calendar to be displayed side by side, try the following:

            1. Add two instances of the calendar module to your config.js file
            {
            	module: "calendar",
            	header: "US Holidays",
            	position: "top_left",
            	config: {
            		calendars: [
            			{
            				symbol: "calendar-check",
            				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
            			}
            		]
            	}
            },
            {
            	module: "calendar",
            	header: "UK Holidays",
            	position: "top_left",
            	config: {
            		calendars: [
            			{
            				symbol: "calendar-check",
            				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
            			}
            		]
            	}
            },
            
            
            1. Edit the custom.css file located in ~/MagicMirror/css to include the following
            div.module.calendar {
                float: left;
                padding-right: 20px;
            }
            
            1. restart the mirror

            The result should be something similar to this:
            side-by-side

            "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

            D 1 Reply Last reply Mar 31, 2019, 9:52 PM Reply Quote 0
            • I Offline
              ianperrin
              last edited by Mar 31, 2019, 10:54 AM

              @dxfan227 - if you simply want to display two calendars, but are happy for them to appear in one list, you can try the following config - note how different symbols can be used to differentiate between the two calendars

              {
              	module: "calendar",
              	header: "Holidays",
              	position: "top_left",
              	config: {
              		calendars: [
              			{
              				symbol: "calendar",
              				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
              
              			},{
              				symbol: "calendar-check",
              				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics"
              			}
              		],
              		maximumEntries: 20
              	}
              },
              

              single list

              "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

              1 Reply Last reply Reply Quote 0
              • D Offline
                dxfan227 @ianperrin
                last edited by Mar 31, 2019, 9:52 PM

                @ianperrin
                Beautiful. Exactly what I was looking for. regarding your example below ( 2 calendars 1 module with different icons) what would it look like if I wanted sat just the title of of the event to be a different color ( but not the “in x amount of days” ) part

                I 1 Reply Last reply Mar 31, 2019, 10:46 PM Reply Quote 0
                • I Offline
                  ianperrin @dxfan227
                  last edited by Mar 31, 2019, 10:46 PM

                  @dxfan227 said in 2 Of the same module but different position via css?:

                  @ianperrin
                  Beautiful. Exactly what I was looking for. regarding your example below ( 2 calendars 1 module with different icons) what would it look like if I wanted sat just the title of of the event to be a different color ( but not the “in x amount of days” ) part

                  I believe the default calendar module allows colors to be configured, but these will affect the whole row, or only the symbol.

                  To color just the title, try this

                  1. Change the config to set the titleClass for each calendar, e.g.
                  {
                  	module: "calendar",
                  	header: "Holidays",
                  	position: "top_left",
                  	config: {
                  		calendars: [
                  			{
                  				symbol: "calendar",
                  				url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                  				titleClass: "red"
                  			},{
                  				symbol: "calendar-check",
                  				url: "webcal://www.calendarlabs.com/ical-calendar/ics/75/UK_Holidays.ics",
                  				titleClass: "blue"
                  			}
                  		]
                  	}
                  },
                  
                  1. Edit the custom.css file located in ~/MagicMirror/css to include the following
                  div.module.calendar td.red {
                      color: #ad0143;
                  }
                  div.module.calendar td.blue {
                      color: #0e66b3;
                  }
                  
                  1. Restart the mirror

                  title colors

                  "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

                  D 1 Reply Last reply Apr 1, 2019, 1:41 AM Reply Quote 0
                  • D Offline
                    dxfan227 @ianperrin
                    last edited by Apr 1, 2019, 1:41 AM

                    @ianperrin This looks perfect. I am very new to everything and am very green on coding do you think you could help me understand from a conceptual stand point how this works?

                    in the config module I notice you added a titleClass: field which "adds a class to the title cell. ( I assume this is the name of the events)

                    so is that what allows us to then use the td.blue and td.red commands in the css? the colors you specify in titleClass don’t actually set the color? Just give it a “name”?

                    I 1 Reply Last reply Apr 1, 2019, 4:54 AM Reply Quote 0
                    • I Offline
                      ianperrin @dxfan227
                      last edited by ianperrin Apr 1, 2019, 5:00 AM Apr 1, 2019, 4:54 AM

                      @dxfan227 you’ve got it!

                      You can use almost any word for the titleClass providing you use the same value in the custom.css file. e.g. titleClass: "word" and div.module.calendar td.word - it is possible to include uppercase and lowercase letters (a-z or A-Z) in the word as well as numbers (0-9) or even hyphens (-) and underscores (_), but avoid punctuation and other such characters. There are many recommendations for css class naming conventions, but that’s for another day. I’d say just be clear and descriptive.

                      The color is defines by the hex value (e.g. #0e66b3) . Here is an overview if you’re not already familiar - https://www.w3schools.com/cssref/css_colors.asp

                      It’s worth noting the css is defined in the custom.css file. You may find some suggest changing the files within the module directory. Avoid this where ever possible as such changes will make updating modules more difficult.

                      Remember this customisation is only required because it can’t currently be achieved using the calendar modules configuration options. It’s possible (but less likely) that future changes to the module may break these customisations so watch out if upgrading the mirror.

                      As you learn you may wish to push changes to the modules code so they become supported configuration options for others to use.

                      Take it slowly, and enjoy the mirror.

                      "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

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