Category Archives: Css

Css as it relates to creating, editing and displaying events and calendars in your wordpress website.

How to style or customise the calendar boxes large or small, eg: use excerpts

Change the content of the calendar boxes

Change the content definition yourself.  The large calendar uses list type 9 setup as a default.  This works with the default css provided.  You can modify that or create your own list type and css..

Own list type for calendar

To make the calendar use your list type, add a parameter “calendar=n” to the shortcode, where “n” is your listtype number, so that the plugin knows which listtype to use.

What content goes where?

For the large calendar, the listtype ‘columns’ are not really columns – more like ‘areas’ in the event box.  In the default setup,

  • Column 1 is the day box,
  • column 2 is what shows on hover of the event if you have the right css.

And of course you can still add your “before” and “after” html to add further styling to the calendar.

  • Choose which fields and in what order are to be displayed in the first view of the calendar by allocating the fields to column 1.
  • Column 2 fields are set to appear in the “hover” over the event. EG: Move event times from one to the other as you please.
Configuration example - columns say what goes where
Column 1 in the day box, column 2 in the hover

Example: To show the excerpt instead of the description in the hover box

  • Go to the settings for the calendar list type
  • Open up the “Specify fields to show > Descriptive ” section.
  • Change the description column to 0
  • Change the excerpt column to 2, add any necessary before/after html to make it work with the css (eg: to make it hover or not)
  • Update

Note: What actually shows depends (just like post excerpts) on your excerpts setup:

  • manual excerpts only ? (wp default). If there are no manually entered excerpts, nothing will display
  • use theme functions or a plugin to create excerpts if there are none
Configuration to show excerpt instead of description
Configuration to show excerpt instead of description
Show excerpt in the hover of the calendar
Show excerpt in the hover of the calendar

Styling

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.

How should one break long urls in event content? aka too wide tables

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:

Loooong Urls

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.

Version 3.0.2 will trim the event hyperlinks:

Trimmed urls

Coping with a wide table

A suggestion from 456bereastreet.com

Css3 options:

  • word-wrap: break-word has some browser support
  • word-break: (normal, break-all, keep-all) aimed at dealing with mixed character sets.  Random Break Point.

Resources:

Styling of Ical events

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]

Example: Styling the summary of a cancelled event with strikethrough

screenshot
Example of the many different css selectors based on event characteristics

Possible methods

  • 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
      • Conference Room – F123, Bldg. 002 => ConferenceRoomF123Bldg002

Css selectors:

Style individual events

  • history (the end date and time has passed)
  • future (the start date and time is in the future)
  • inprogress (the start date and time has passed, but not the end date and time)
  • today (the event is in progress today)
  • allday (the event is an all day event)
  • untimed (the component is untimed – not be an event, may be a NOTE)
  • multiday (the event goes over many days , start and end date are not the same)
  • recur (the event is a recurring or repeating event)
  • alt (so that alternating events can be styled differently – zebra styling!)
  • status (the value in the status field for that event will be echoed as a class.  For example: CONFIRMED)
  • type (the type of ical calendar component – vevent | vtodo | vjournal | vfreebusy | vtimezone | valarm, will be echoed as a class )
  • 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:

  • week number
  • sign of the zodiac
  • season
  • 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.

Plugin and theme css not working well together?

“The plugin does not look right in my theme”

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.

Custom CSS

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.

CSS configuration options
CSS configuration options under List events

1.Do not generate any css, use theme css only.

Css setting closeup
Css setting closeup

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.

OR use wordpress.com’s safecss plugin:

http://wordpress.org/extend/plugins/safecss/

Table widths and css

See table-css-overlapping-or-disappearing-sidebars