Tag Archives: Css

How to change icon images (subscribe to calendar, add to google)

The plugin comes with two sets of default icons (16px and 32 px).  It also includes extra icons that match those for your use.

screenshot of icon listing
some of the available icons

Don’t like those icons?

You could do one or more of the following:

  1. Switch images off
  2. Use Css to replace the text with your own images
  3. Write own formatting routines

Switch images off

You could choose just to have the link text for the actions behind the icons.  See the “Listing events’ settings.

settings screenshot to show you how to switch images off
Switch images off

Use Css to replace the text with your own images

First switch the default  images off and then use css to show your chosen icons instead.

text replaced with image
text replaced with image

There are various techniques that one can use to replace text with an image. The following was used to demonstrate the above replacement using the plugins html classes.

a.icalsubscribe { 
    display: block;
    height: 50px;
    width: 50px;
    background-image: url(http://i.stack.imgur.com/XtpTm.png);
    background-size: 50px 50px;
    text-indent: -9999px;
    overflow: hidden;
}

Some of the link classes that you may wish to define image icons for are:

  • subscribe
  • icalsubscribe
  • addtogoogle
  • hrefaddtogoogle
  • hrefmap
  • timezone
  • refresh

Add the extra css :

  1. Either to your custom themes stylesheet (not to one that gets updated automatically, because you will lose your modifications), or
  2. use something like jetpacks wordpress custom css, or
  3. use a custom ical events list css

Write own formatting routines

See the pluggable files in each plugin folder.  Use the function there as a base for your new function.  Add your function to your custom themes function.php or to your own site specific snippets plugin.

some pluggable functions in amr-icalevents-list

  • add_cal_to_google
  • add_event_to_google
  • amr_ical_showmap
  • amr_show_refresh_option
  • amr_format_tz

some pluggable functions in amr-events

  • amr_subscribe_to_event_series
  • amr_subscribe_to_event

 

Events and css3 style columns

I had a request recently about being able to list the events in ‘columns’.  I took this to mean the css3 idea of columns, as of course in  many list types, the event details are in columns.

After allowing the brain to ferret away at the idea, it turns out there are a few different ways to do this with the plugin.

The css 3 way

Using css3 multi columns

Limited browser support, however you could decide to go with the graceful degradation idea where it will still look okay in the other browsers, just not two columns.  See

 

  • http://www.quirksmode.org/css/multicolumn.html,
  • http://www.standardista.com/css3/css3-columns-browser-support,
  • and http://thebrowsereview.com/2011/css3-multi-column-layout-browser-support/

For this to work

  • choose your list type’s ‘html style’ carefully.  If you started with the plugin a while back and have saved options,  you may not be aware of what is all possible now.  check out a clean install or test.icalevents.com
  • Remove the groupings – they look weird in columns.  If the grouping was days, and you removed it, you may want to add back in the EventDate field.

The HTML5 style looks quite nice, as does the lists style, see widget style (listtype4) (without groupings).

Html and Shortcode used:

<div id="multicolumn">[events listtype=6]</div>

Additional Css used:

#multicolumn{
 -moz-column-count: 2;
 -moz-column-gap: 20px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 column-count: 2;
 column-gap: 20px;
}

The two shortcodes and some wrapping html way

If the regularity of events, or their number within a grouping and their content length are consistent, this could work.  Choose a way to ‘group’ the events – eg: month? , number of days, category? etc

Two columns using multiple shortcodes with selection by months

If months (note will show all events in the current month)

<div style="width:49%; float:left;">
[events months=1 events=bigenufno listtype=1 calendar_properties=0]
</div>
<div style="width:49%; float:right;">
[events months=1 monthsoffset=1 events=bigenufno listtype=1 calendar_properties=0]
</div>
Two columns with selection by number of days

If days (example with list type 4)

<div style="width:49%; float:left;">
[events days=20 events=100 listtype=4]
</div>
<div style="width:49%; float:right;">
[events days=20 startoffset=20 events=100 listtype=4]
</div>

The ‘Count the Events’ way

Only do this if your listing requirements are simple, your events similar in the fields that they have  AND you know php well.  You may be better off letting the plugin do the hard work and use a list type than re-inventing the wheel and trying to anticipate all the sorts of event data and conditions (all days, no end times? etc).  The main part of the plugin has been around for years now and is pretty stable – why start afresh?

If you still want to know how you’d do it….

Many of the plugin functions are now ‘pluggable’. Simply override the amr-list-events function.  If using another plugin to do this, activate your plugin first before activating the events plugin.

Your function will be passed a sorted list of events where the recurring events have already been exploded out.  var_dump each event to see what fields you can use.  You’ll still use the shortcodes and the parameters.

To test a pluggable:

  1. Copy the code, edit for you and put in your plugins folder.
  2. Deactivate amr-ical-events-list
  3. Activate amr-test-pluggable
  4. Reactivate amr-ical-events-list

Go to your calendar page to see the simple list.  Note this example is just a proof of pluggable concept.  I have not done the columns – all you’d require is a for loop for each ‘half’ of events and a floated div for each loop.

Proof of pluggable function
/*
Plugin Name: amr_test_pluggable
Author: anmari
Author URI: http://anmari.com/
Plugin URI: https://icalevents.com
Version: 1.0

Description: test the amr-events and amr-ical-events-list pluggable functions.
*/

function amr_list_events ($events,  $id, $class, $show_views=true) {
global $amr_listtype;

 $no_events = count($events);
 $half = $no_events/2;  //
 $html = 'I have got '.$no_events.' to deal with.  They are already in date time order!';   
 $html .='<div id="mylist">';

 // you could do a for i=0 to $half in one div and then the rest in another

 foreach ($events as $i=>$event) { 

  $html .= '<h3>';
  $html .= $event['EventDate']->format('d-m-Y'). ' ';
  $html .= $event['SUMMARY'];
  $html .= '</h3>';
  $html .='<p>'.$event['DESCRIPTION'].'</p>';
 }
$html .= '</div><!--id="mylist" -->';
return($html);
}

 

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.

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.

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