Design changes using CSS

  • Resolved Michael Sutter

    (@michih)


    3 years, 11 months ago

    Hi there

    My goal is to improve the calendar design according to the website design.

    So this worked so far and changed the header of the current day:

    .ics-calendar-month-grid .today .day {
	background:#2D62C3;
}

    In addition, I would like to change the background color of today’s calendar entry below its header as well. However, I did not manage to find the correct class so far. Tried it like this, no luck yet:

    .ics-calendar-month-grid .today .day ul.events {
	background:#2D62C3;
	opacity:0.5!important;
}

    How do I change the background color of the class ul.events for today only to highlight it?

    Thanks a lot,
    Michael

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Room 34 Creative Services, LLC

    (@room34)

    3 years, 11 months ago

    Hi… you’re pretty close with this. The .day class is for the day number itself, so if you want to apply styles to the list of events, you can use this:

    .ics-calendar-month-grid .today ul.events

    One thing I’m wondering about… are you sure you want to use opacity this way? That will make the text semi-transparent as well. If you just want the background color to be semi-transparent, you’ll need to switch it to rgba() format. That would be this:

    background: rgba(45,98,195,0.5);

    Thread Starter Michael Sutter

    (@michih)

    3 years, 11 months ago

    Hi room34

    Thanks a lot for your support.

    I have tried the following as you suggested:

    .ics-calendar-month-grid .today ul.events {
	background: rgba(45,98,195,0.2)!important;
}

    Unfortunately, the background of todays day remains white in the month view. So it does not change anything.

    Thanks,
    Michael

    Plugin Author Room 34 Creative Services, LLC

    (@room34)

    3 years, 11 months ago

    Do you want the entire cell to change color, or just the event list? This code is only for the event list.

    You should be able to use .ics-calendar-month-grid .today to change the color of the entire cell, unless something in your theme is overriding the plugin’s CSS. Can you share the link to your page with the calendar so I can see for myself what it’s doing? Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Design changes using CSS’ is closed to new replies.