The html and default css have been carefully designed to give you maximum possibilities to style the calendars, while fitting in with your theme and giving you a reasonable default css.
The default css was setup for the 2010 theme. In many cases the #content selector had to be used to override normal table styling. If your theme uses something else, you will need to either edit the customisable css file provided, or edit your theme’s css.
In order to retain html validation and still allow you flexibility (particularly since your content may contain html itself, this limited html choices), divs being the most flexible are used to isolate events and columns.
Selectors are available for the following:
“today” – the day box that is the current date
the weekdays, inparticular you may want to style the weekends. The necessary css is there, but commented out – I thought it looked too busy.
the rightmost day column. The default css will move the hover boxes for the last column in a bit so that they stay on the page.
One uncontrollable part of allowing users to create events is that they may not be “good” about entering links. If they enter a full url that is quite long, this could cause the calendar listing content to overflow. How this appears visually depends on your theme’s css and your browser. In IE it could be this:
The ical-events-list plugin automatically makes links ‘clickable’ if they are not already. This is desirable most of the time, however if the link is really long, then we have the long url problem, which is how I came to look at this question.
There are a range of possible answers from getting the table to deal with it, the cell to deal with it and avoiding if by modifying the link text.
Modifying the link text
Possibly the most stable version in the long run with the downside that users cannot cut and paste the link text as url, they have to know to select the “shortcut” or link address.
For the plugin, this is probably the safest answer as I prefer to let the theme css work so that the styling is consistent with the theme as much as possible. It will also not interfere if the link is not too wide, or is not a url.
One of the features of this plugin is that it offers many css selectors so you can add your own unique styling to events, properties of events, or groups of events. The browsers web developer tools like ‘inspect element’ are very handy for seeing what html and css selectors are available and playing with some css. [Firefox, Safari, Chrome]
Category – A css class has been added to the event row for each ical categories – see version 2.9.2. However not all ical generators allow one to specify the category field (eg: google does not). A plugin that I am working on to add events in wp, will allow one to allocate categories and tags to an event.
Location only if a taxonomy, or tag: Location is a text field in the ical spec. The ical event listing plugin offers a googlemap link using the location fields (or the geo field). For this reasonably decent addresses are required. Css class selectors are not allowed to start with numeric values (as many addresses do). So….If one attempted to offer styling by location, it would possibly be along these lines:
optional – only if specified in the settings?
possibly only the first alpha numeric string with spaces (and other punctuation chars) removed before a comma?
PM’s residence, 10 Downing Street, London => PMsresidence
10 Downing Street, London => DowningStreet
Sydney Opera House, Macquarie Street => SydneyOperaHouse
Apt 56B, Whitehaven Mansions, Sandhurst Sq, London => Apt56B
calx (Calendars can be combined, this value will be cal0 for events from the first calendar, cal2 for events from the second etc)
categoryIf there are categories in the ics file, or allocated to an event post, they will be echoed as classes in the event html element by name or term id
tags, taxonomies – as per category
Style a group of events
The plugin also allows one to “group” events in a variety of ways:weekly, monthly, yearly or by seasons. The group value will be echoed as a class. Thus one could style a group of events by:
sign of the zodiac
month, year, quarter
Style the properties of the event
Each property (eg; summary, start date, location etc) is assigned a corresponding class, so that one can style these uniquely – see the showcase for some examples. See the settings page or the ical spec for the list of properties.
http://www.bikesidela.org/ are one of the few sites that have actually added a bit of their own css. Here they have used a table row hover to display the event description on hover. All done using css.
Themes do all kinds of weird and wonderful things sometimes without thinking about the unintended consequences on other html. A classic example of this has been the “unremovable” css bullets.
The icalevents plugin provides a minimal default css with the hope that the html will pick up styling from your theme, enabling the plugin html to blend in with the theme and “belong”.
Sometimes the theme css does not look right when applied to the plugin html, and needs to be “overridden”.
Sometimes the default css is not being used because of the div id’s that your theme uses for it’s content areas.
It is not possible for the default css to deliver a perfect solution for all themes. The css offered works with the default 2010 theme. You should have some css skills and familiarity with the firefox firebug tool will help.
If the default css does not work with your theme, the plugin provides some options. These are accessed under “Listing Events” / “General Options”. Please note that these settings apply to ALL list types.
1.Do not generate any css, use theme css only.
The expectation here is that either
the plugin css is not required – the html looks fine in your theme, or
that you have modified your theme’s css
2.Or Create a custom css file for the plugin.
Copy/Download the defaut css style in your websites upload folder. (Do not edit the css file in the plugin directory as it will be overwritten).
Tailor it to suit your theme, then (put it back in the uploads/css folder). Maybe change the selectors (the #content maybe ) to whatever your theme uses.
Choose the custom file from the list of files in dropdown list in the main
The plugin will then add that css file into the website’s css which ever theme you are using.