Style events by category

Finally someone wants to use the category to style their events.  Yeah!!

As of the latest version you can do this with your remote ics file (free version) too if the ics file has categories.  If using amr-events,  taxonomies and tags can be used to.

You’ll need to do one of

  • a custom css file, or
  • use the safecss plugin (the wordpress.com custom css plugin ), or
  • update your theme’s css (beware of upgrades)

Example with border colours

I like the Sydney Film Festival css (not my plugin, although you can do something similar now)

Sydney Film Festival Category Styling

The plugin issues a bunch of css classes for an event;

<div class="event future recur concerts moving streetfight t47 t54 t55">

These css classes are categories by term id: t47 t54 t55
These css classes are categories by slug:  concerts moving streetfight

The other classes indicate that it is an event (not a task or note), it is in the future (not past, or today), and that it recurs.

To style your categories like that with my plugin and the default 2010 theme, add something like this to your custom css:

#events_wrap div.t## {	border-left: 5px solid #F7931D;}

where t## is your termid or category id.  It may be safe to use id’s, in case you decided to change the category name and slug and forget that it will mess up your css.   The id will still work.

#events_wrap div.yourcategoryname {	border-left: 5px solid #F7931D;}

Example with text colours:

The following example is specific to someone’s website.  You’ll need to

  • use your category or taxonomy names
  • check what selectors will work you and for your chosen listtype.

Events coloured by category

Css added to the default css:

/* custom css */
#content table.largecalendar .spanish  a.url {
	color: #F7931D; /*orange */
}
#content table.largecalendar .mandarin  a.url,
#content table.largecalendar .mandarin  a.url:visited {
	color: #EC5577; /* pink */
}
#content table.largecalendar   a.url {
	font-weight: bold; /* maybe bold them all too ? */
}

Note:

Check whether you need to override your theme’s ‘active’, ‘hover’, ‘visited’ states too as per the mandarin line above.

About anmari

the developer at anmari
This entry was posted in Css, How To and tagged , . Bookmark the permalink.