Title: Colors
Last modified: April 3, 2019

---

# Colors

 *  Resolved [xtenz](https://wordpress.org/support/users/xtenz/)
 * (@xtenz)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/)
 * Hi,
 * Is there a way to add some background colors to the events in the month view ?
   (
   i.e Closing days, highlight a special event etc …)
 * Thanks
 * PS: I do not understand much about CSS then a few examples would be appreciated.;-))
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcolors-45%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/)
 * (@room34)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11387252)
 * Thanks for your interest in the plugin! I’m looking at developing a “pro” version
   that includes some style and color options, but right now CSS is the only way
   to do it. I’ll follow up later today with some examples.
 *  Plugin Author [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/)
 * (@room34)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11388860)
 * Here’s a pared down chunk of the plugin’s CSS for the elements in the month/week
   grid views with the appropriate element selectors and just the background and
   color properties. I added comments to help identify what each selector is.
 * Go to **Appearance > Customize > Additional CSS** and paste in this block, then
   change the colors as needed. There are a number of tools online to help you identify
   RGB or HEX color values you can use in CSS, and you can also use HTML color names.
   You can find more about that here: [https://rgb.to/html-color-names/1](https://rgb.to/html-color-names/1)
 *     ```
       /* All cells in the calendar grid */
       .ics-calendar-month-grid th, .ics-calendar-month-grid td {
       	border: 1px solid rgb(187,187,187);
       }
   
       /* Day-of-week headers */
       .ics-calendar-month-grid th {
       	background: rgb(171,171,171);
       }
   
       /* Days outside the currently selected month */
       .ics-calendar-month-grid .off {
       	background: rgb(246,246,246);
       	color: rgb(153,153,153) !important;
       }
   
       /* Individual day cells */
       .ics-calendar-month-grid .day {
       	background: rgb(226,226,226);
       }
   
       /* Day cells in the current month but in the past */
       .ics-calendar-month-grid .past {
       	background: rgb(250,250,250);
       }
   
       /* Today's day cell */
       .ics-calendar-month-grid .today .day {
       	background: rgb(102,102,102);
       	color: rgb(255,255,255);
       }
   
       /* Divider between individual items on the same day */
       .ics-calendar-month-grid ul.events li {
       	border-bottom: 1px solid rgb(226,226,226);
       }
   
       /* Background for "all-day" events within a day cell */
       .ics-calendar-month-grid ul.events li.all-day {
       	background: rgb(245,245,245);
       }
       ```
   
 *  Thread Starter [xtenz](https://wordpress.org/support/users/xtenz/)
 * (@xtenz)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11393168)
 * It is working perfectly.
    Thank you very much.
 * Ahem … Is there a way to modify a specific event ? (based on its date and/or 
   hour) and also modify the cell’s backgroud only for days off ? ;-)))
 *  Plugin Author [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/)
 * (@room34)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11393254)
 * With the existing CSS classes there’s not really a way to be able to modify a
   specific event by date/hour… it would require a convoluted combination of CSS
   and JavaScript to do that.
 * For the cell’s background on days off, do you mean the `.off` class, that I described
   in the comment as “Days outside the currently selected month”?
 * If so, then what you’d want to do is change this line:
 * `color: rgb(153,153,153) !important;`
 * to this:
 * `color: inherit !important;`
 *  Thread Starter [xtenz](https://wordpress.org/support/users/xtenz/)
 * (@xtenz)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11393362)
 * No. Sorry.
    I meant « closed days » like week-ends could be. BTW my working week
   should start on tuesdays and end on saturdays but iCal don’t want me to set such
   a particular week :-(( I tried to set my week like that but it does not works.
   This is why I would like to change the cell’s background for sundays and mondays.
 *  Plugin Author [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/)
 * (@room34)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11393433)
 * Ah, I see.
 * This plugin uses the WordPress setting for the first day of the week. If you’d
   like to change that to have them start on Tuesday, that’s no problem… you can
   go in the WordPress admin to **Settings > General** and look for **Week Starts
   On**.
 * With what you’re describing — basically having all of the cells in a particular
   column have a unique background color — then that can be done with CSS. Assuming
   you make the change to start the week on Tuesday, putting Sunday and Monday at
   the right side of the grid (the 6th and 7th columns), then you could code it 
   like this:
 *     ```
       .ics-calendar-month-grid tr td:nth-of-type(6), .ics-calendar-month-grid tr td:nth-of-type(7) {
           background-color: YOUR_COLOR_HERE;
       }
       ```
   
 *  Thread Starter [xtenz](https://wordpress.org/support/users/xtenz/)
 * (@xtenz)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11395469)
 * Thank you so much. It works well.
 * One last question :
    Will your plugin overlap multiple calendars like iCal does?
   Or maybe via CSS ? That way I could have different colored events because that’s
   what I’m trying to do.
 * If not, doesn’t matter. This will give you an idea for the next release ! :-)))
 *  Plugin Author [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/)
 * (@room34)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11396515)
 * Unfortunately the plugin does not currently support displaying multiple ICS feeds
   in a single calendar. While this would technically be possible, it would require
   a pretty significant reworking of how the plugin currently parses the calendar
   feeds.
 * Still… a good idea! I’ll look into it for a future update.
 * That said, you should be able to display multiple embedded calendars on a single
   page. Not exactly what you’re looking for, but it may help.
    -  This reply was modified 7 years, 3 months ago by [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/).

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

The topic ‘Colors’ is closed to new replies.

 * ![](https://ps.w.org/ics-calendar/assets/icon.svg?rev=3427980)
 * [ICS Calendar](https://wordpress.org/plugins/ics-calendar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ics-calendar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ics-calendar/)
 * [Active Topics](https://wordpress.org/support/plugin/ics-calendar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ics-calendar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ics-calendar/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [Room 34 Creative Services, LLC](https://wordpress.org/support/users/room34/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/colors-45/#post-11396515)
 * Status: resolved