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.

    Getting to grips with the styling of CalendarExt2

    Scheduled Pinned Locked Moved Utilities
    3 Posts 2 Posters 1.2k 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.
    • J Offline
      Julian
      last edited by

      @sean,

      Loving the new build - I’m a newbie to MM, and am trying to use it to build an electronic wall calendar - similar to a DAKboard, but with a bit more customisation.

      Two quick questions - (i) I can’t get the class customisation by event (to colour them by calendar for instance) to work for me - not sure where it’s going wrong, as the instructions look straightforward - I’ve defined the class for each calendar in the config.js - classname:“Family”, and then set the colour in the custom.css - .CX2 .Family {
      color:#FFA500;

      (ii) how do I make the background of the month calendar transparent to see any image behind it (as per the bottom screen shot above)?

      Thanks

      Julian

      ? 1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User @Julian
        last edited by A Former User

        @julian

        1. .CX2 .Family is not working? try this in your css/custom.css
        .CX2 .event.Family {
          color:#FFA500
        }
        

        If your event is fullday event, it could be overriden. Use this also.

        .CX2 .event.Family.fullday {
          background-color:#FFA500;
          color:#000;
        }
        

        Or…
        Possible common pitfalls:

        • Mistypo in your config.js about className
        • common CSS mistypos (forgotten closing brace, missed semicolon, …)
        1. By default, there is gradiently transparent background in each slot cell. If you don’t want it;
        .CX2 .slot > .slotContent {
          background-image:none;
        }
        
        1 Reply Last reply Reply Quote 0
        • J Offline
          Julian
          last edited by

          @sean

          Thanks for the quick response. Transparent background now sorted - the calendar works really well with your GooglePhotos module as the background !

          Also finally sorted the other problem out - I hadn’t realised it was case-sensitive: classname doens’t work - but className does !

          Thanks for all your help - this is an awesome module…

          Julian

          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