Title: Color Coding Different Events Last modified: August 22, 2016 --- # Color Coding Different Events * Resolved [DShapiroBarronCollier.com](https://wordpress.org/support/users/dshapirobarroncolliercom/) * (@dshapirobarroncolliercom) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/) * I would like to use the category colors to show different colored text (based on category assigned the event). How can I accomplish this? * [https://wordpress.org/plugins/spiffy-calendar/](https://wordpress.org/plugins/spiffy-calendar/) Viewing 7 replies - 1 through 7 (of 7 total) * Anonymous User * (@anonymized-1391468) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274061) * That is the default behaviour of the plugin. If you are not seeing the category colour, make sure you have “Enable event categories?” turned on on the calendar options page. * Thread Starter [DShapiroBarronCollier.com](https://wordpress.org/support/users/dshapirobarroncolliercom/) * (@dshapirobarroncolliercom) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274065) * I see the color category but the text is not coming out in a color matching. * This is the CSS in the configure the stylesheet… * /* Default styles for Spiffy Calendar */ * .calnk { padding-bottom: 5px; } .calnk a:hover { background-position:0 0; text- decoration:none; color:#000000; border-bottom:1px dotted #ccc; } .calnk a:visited{ text-decoration:none; color:#000000; border-bottom:1px dotted #ccc; } .calnk a { text-decoration:none; color:#000000; border-bottom:1px dotted #ccc; } .calnk a div { display:none; margin-left:10px; } .calnk a:hover div { color:#333333; background:#F6F79B; display:block; /*position:absolute; */ margin-top:1px; padding: 5px; width:150px; z-index:100; line-height:1.2em; box-shadow:2px 2px 2px #c0c0c0;}. calnk a:hover div.spiffy-popup { position:absolute; } .calnk a:hover div div { box-shadow:none; } .calnk-icon { max-width: 76px; display: block; padding: 0; margin-top: 3px; } .calnk div img { max-width: 140px; display: block; padding: 0; margin: 3px auto; } * .calendar-table { border:0 !important; width:100% !important; border-collapse: separate !important; border-spacing:2px !important; } .calendar-table .calnk- icon { margin: 0 auto; } .calendar-heading { height:25px; text-align:center; border:1px solid #D6DED5; background-color:#E4EBE3; } .calendar-next, .calendar- prev { width:25%; text-align:center; font-size:.9em; } .calendar-next a, .calendar- prev a { text-decoration:none; } .calendar-month { width:50%; text-align:center; font-weight:bold; } .normal-day-heading { text-align:center; width:25px; height: 25px; font-size:0.8em; border:1px solid #DFE6DE; background-color:#EBF2EA; } . weekend-heading { text-align:center; width:25px; height:25px; font-size:0.8em; border:1px solid #DFE6DE; background-color:#EBF2EA; color:#FF0000; } .day-with- date { vertical-align:text-top; text-align:left; width:60px; height:60px; border: 1px solid #DFE6DE; } .no-events { } .day-without-date { width:60px; height:60px; border:1px solid #E9F0E8; } div.weekend { color:#FF0000; } .current-day { vertical- align:text-top; text-align:left; width:60px; height:60px; border:1px solid #BFBFBF; background-color:#E4EBE3; } div.event { font-size:0.75em; } .kjo-link { font- size:0.75em; text-align:center; } .calendar-date-switcher { height:25px; text- align:center; border:1px solid #D6DED5; background-color:#E4EBE3; } .calendar- date-switcher form { margin:2px; } .calendar-date-switcher input { border:1px# D6DED5 solid; margin:0; } .calendar-date-switcher select { border:1px #D6DED5 solid; margin:0; } .calnk a:hover div div.event-title { padding:0; text-align: center; font-weight:bold; font-size:1.2em; margin-left:0px; } .calnk a:hover div div.event-title-break { width:96%; text-align:center; height:1px; margin- top:5px; margin-right:2%; padding:0; background-color:#000000; margin-left:0px;}. calnk a:hover div div.event-content-break { width:96%; text-align:center; height: 1px; margin-top:5px; margin-right:2%; padding:0; background-color:#000000; margin- left:0px; } .page-upcoming-events { font-size:80%; } .page-todays-events { font- size:80%; } .calendar-table table, .calendar-table tbody, .calendar-table tr,. calendar-table td { margin:0 !important; padding:0 !important; } table.calendar- table { margin-bottom:5px !important; } .cat-key { width:100%; margin-top:30px; padding:5px; border:0 !important; } .cal-separate { border:0 !important; margin- top:10px; } table.cat-key { margin-top:5px !important; border:1px solid #DFE6DE! important; border-collapse:separate !important; border-spacing:4px !important; margin-left:2px !important; width:99.5% !important; margin-bottom:5px !important;}. cat-key td { border:0 !important; } * Anonymous User * (@anonymized-1391468) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274071) * Can you post a link? * Thread Starter [DShapiroBarronCollier.com](https://wordpress.org/support/users/dshapirobarroncolliercom/) * (@dshapirobarroncolliercom) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274072) * Thread Starter [DShapiroBarronCollier.com](https://wordpress.org/support/users/dshapirobarroncolliercom/) * (@dshapirobarroncolliercom) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274076) * Here is the link * [http://www.avemaria.com/news-events/calendar/](http://www.avemaria.com/news-events/calendar/) * Anonymous User * (@anonymized-1391468) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274078) * It is not showing the category key. Please check the calendar main options page and ensure you have enabled the tickbox beside “Enable event categories?” * Thread Starter [DShapiroBarronCollier.com](https://wordpress.org/support/users/dshapirobarroncolliercom/) * (@dshapirobarroncolliercom) * [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274079) * That was it. So sorry to bother you. Thanks for the great support! Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Color Coding Different Events’ is closed to new replies. * ![](https://ps.w.org/spiffy-calendar/assets/icon-256x256.png?rev=2398731) * [Spiffy Calendar](https://wordpress.org/plugins/spiffy-calendar/) * [Frequently Asked Questions](https://wordpress.org/plugins/spiffy-calendar/#faq) * [Support Threads](https://wordpress.org/support/plugin/spiffy-calendar/) * [Active Topics](https://wordpress.org/support/plugin/spiffy-calendar/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/spiffy-calendar/unresolved/) * [Reviews](https://wordpress.org/support/plugin/spiffy-calendar/reviews/) * 7 replies * 2 participants * Last reply from: [DShapiroBarronCollier.com](https://wordpress.org/support/users/dshapirobarroncolliercom/) * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/color-coding-different-events/#post-5274079) * Status: resolved