MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    SOLVED MMM-CalendarEXT2 - Change Icon Size

    Troubleshooting
    2
    3
    684
    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.
    • A
      Apartment_Moose last edited by

      Hi,

      Having some trouble getting the right code in my custom.css for changing icon sizes for this particular module only. any help would be great as i would like to increase the icon size by roughly +15% or so.

      Thanks

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

        @Apartment_Moose
        It depends on font-size of event basically.
        See this;
        https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling#some-default-sizes

        .CX2 { /* default values which are used frequently or dependently */
          --row-min-width: 100px;
          --row-max-width: 1000px;
          --column-min-width: 300px;
          --column-max-width: 400px;
          --font-size: 16px;
        }
        

        Adjust --font-size as your wish.

        Of course, you can forcibly set eventIcon on CSS also.
        By default it is defined like this. (MMM-CalendarExt2.css)

        .CX2 .period .eventIcon {
          min-width: calc(var(--font-size) * 2);
          min-height: calc(var(--font-size) * 2);
          margin-right:5px;
          float:left;
        }
        
        .CX2 .weekSlot .eventIcon {
          min-width: var(--font-size);
          min-height: var(--font-size);
          margin-right:3px;
          display:block;
          padding-bottom:3px;
        }
        

        So you can redefine/override them in your css/custom.css. But for harmony with text, I recommend you to use --font-size globally.

        1 Reply Last reply Reply Quote 0
        • A
          Apartment_Moose last edited by

          @Sean
          thanks for the help, i didnt realize icon size was set by --font-size as well, i will take your advice and run with adjusting the font globally for the module.

          thanks alot!

          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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy