Category Archives: Css

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

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

 

Groupings of events, expanding and collapsing the groupings

Events can be grouped in many ways. To set up groupings see this post on event grouping and styling.

Expand and Contract Groupings

To expand and contract groupings, tick the ‘load js’ in the listing events settings

Use js
Use js

and optionally add a shortcode to add text to showall or hideall detail of groupings

[expandall]
[events]
Events collapsed behind groupings
Events collapsed behind groupings
One event grouping expanded
One event grouping expanded

Grouping events

Events can be grouped by date formats or by categories, tags or custom taxonomies.

  • Events can be grouped by days, weeks, months and some funkier options that no one will probably ever use, but I liked the challenge! Actually I imagined one could do some seasonal styling perhaps? each grouping has it’s own css classes, and date/time format
  • Grouping also allows one to do timetables (grouped by day), weekly schedules, or monthly, quarterly or seasonal event views.
  • See how to format the date related groupings here.
  • Each grouping comes with css classes so you could for example do seasonal styling of event groups.
  • By adding in the javascript in the settings, one could also expand and collapse the groupings.

Settings

 

Grouping settings
Grouping settings

Styling Groupings – use the css classes

Example of html produced with css classes
Example of html produced with css classes

Styling the dates

I received a question about whether the plugin could style dates in the way the little purple date is shown in the header image of the website and the plugins wordpress page.

a real life example
a real life example

 

The calendars shown in the header are taken from real live examples of the plugin being used in various sites.  The sites will in many cases have added custom css to style the events lists to match their themes.

With a combination of the date and time formats in the settings for each list and some css, almost anything is possible.

The key is that one can add extra characters into the php date format string.  If the characters are the same as a date format character, one can ‘escape’ them with a preceding backslash.

Sooo…. one could for example add some html to isolate part of the date for css styling purposes.   The image below shows the date and time format settings for a event list.   Note the format string for the day.   It surrounds the month with a span.

\<\s\p\a\n\>M\<\/\s\p\a\n\>j
adding html to the date format
Date format settings for a event listtype

Then one can spice it up with some custom css.  To prove this, I have used the power of the firebug browser add-on to add some element css to show you what could be done.  I’d put the text-align: center at a higher level actually – no need to repeat it.

You of course would add the css for the event date class and the span within it to your theme or to a custom calendar css file.

Example styling of a month and day (prof of concept facilitated by firebug browser add-on)
Example styling of a month and day (prof of concept facilitated by firebug browser add-on)

Table css, overlapping or disappearing sidebars

Table widths and css

Tables are wonderful  – they expand beautifully and naturally to fit your content, but sometimes that same content can make the table do  weird things.

Loooong Urls

Please be sure to test your css in your theme with representative content.

The plugin tries to deal with some of the problems that occur.  For example long urls that can make a table expand too much.   See also plugin-and-theme-css-not-working-well-together.

Sometimes the only way to really sort a table width out is to “fix” the width of the table and/or the table cells.    Now this the plugin has to leave this to you – some people have wide content areas, some not.  Some have lots of info displayed,  others have minimal.

The plugin has no way of knowing what size would work best for you.

I suggest that you use something like firebug to see what your theme is doing (or not doing!) and then google table+css+width for ideas on what might work with your theme.   You know the size of content area that your calendar or agenda list must fit into and perhaps simply setting the width of the table and/or the table cells will be the answer.

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:

See posts on this site tagged css.

Customise Large calendar, simplify

A response to a request on the forum:

Aim: to mimic the google calendar view
Live Result Example: http://www.icscalendar.com/box-calendars/simple-large-calendar/

A simple large calendar
A simple large calendar

Characteristics:

  • Start time and title, no hover box, event detail chopped off to one line

Changes to make

  • The listtype
  • The shortcode parameters (optional)
  • The css (maybe – depends on your theme)

The listtype

Configure a large calendar list type or simple copy/paste from list type the listtype text at the bottom of this post.).  To do it yourself, see detailed instructions for:

  • Update fields to show so that only Starttime and Summary have column = 1, all else =0.
    Update StartTime order = 1, Summary order = 2
    Add a ‘space’ either “&nbsp;” (non breaking space) or “&#32;” a normal space.
  • If you want am/pm time, open dateTime formats and change time to
    “g:ia”.  See http://php.net/manual/en/function.date.php for more options
  • If you anticipate a very large number of events per month, go to the “Define maximums” and enter a max number of events approx double what you expect.

Click ‘Update’ to Save your listtype.

List type screen

Shortcode parameters

In your largecalendar page, enter the shortcode, using your list type number.  Optional: Decide whether to you want a dropdown box or not. See parameters available.

[largecalendar listtype=13 show_month_nav=1]

The css

Full event title displayed

The default css will allow the full event title to be displayed. If you want to trim it so the event stays on one line, you need to add some custom css.

Trimmed events details - overflow hidden

Either use the custom css file provided (download, edit, ftp upload and then choose it  from the plugin settings. For instructions, see http://icalevents.com/3591-custom-css-for-event-lists/

OR (easy option)

If  editing css, file structures and ftp is not your area of expertise, then
use the wordpress.com custom css plugin provided by automattic
and add something like:

#events_wrap .largecalendar tbody td div.event {
overflow:hidden;
white-space:nowrap;
font-size:10px; /* make text smaller - depends on your theme */
}
Wordpress.com custom css editor screen

Appendix:

Option: Copy and Paste ALL of this text string into a list type import field in your “manage listtypes” screen:

Horizontal Weekly Calendar

A horizontal weekly calendar is now possible (in a few hours anyway).

It was requested a while back by autrice. Then I saw the sydney 2011 film festival schedule and I thought…

… hmmmm we could do that.

Sydney Film Festival Schedule Styling
Sydney Film Festival Schedule Styling - possible with amr-events

From amr-ical-events-list version 4.0.5 onwards use shortcode [weekscalendar]. You will need the new list type 11.  It is not exactly  the same as above.  If you really want the sff.org style, only show the summary and the event date and times.  Set all other columns to 0.

Don’t panic if you do not want to reset your list types to get the new defaults. Simply use your local test server (You do have one don’t you? you don’t do everything live …. no of course not, I didn’t really think so.)

In your test server, reset the list types, then copy list type 11 over to your main server (after suitable testing etc.)

Colour it with some category, tag or taxonomy styling.

Version 4.0.5 also offers css classes by id,  – so that you can change the category slug with breaking your styling.  All id’s will be prefaced with ‘t’ (for term,tag, or taxonomy or caTegory :) )

Maybe add some css like:

#events_wrap .eventscat,
#events_wrap table tr.eventscat td.amrcol1 {     
 border-left: solid 5px green;
}
#events_wrap table tr.t1 td.amrcol1 { 
 border-left: solid 5px red;
}

Have fun…

Oh, by the way, you always could do a weekly vertical agenda too, I’ve added a sample listtype for that too (no 12).

 

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: http://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.

Custom Css for event lists

How to use custom css without losing it when there is an upgrade:

See  “Listing Events” / “General Options”.

CSS configuration options
CSS configuration options under List events

Option: 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

Option: 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 when the plugin is upgraded).
  • Tailor it to suit your theme, then put it back in the uploads/css folder.
  • Return to the “listing Events” settings and choose the custom file from the list of files in dropdown list in the main. Update.

The plugin will then add that css file into the website’s css which ever theme you are using.