Virginia Web Designers: Joomla, Drupal, Open-Source, CSS, and PHP Northern Virginia / Maryland / Washington DC web designers

EventList Twitter Status Update Plugin

I just ported the Twitter Status plugin to make it work with the EventList component. When you add an event, it gets posted to Twitter automatically. Just like the original Twitter Status plugin, you can restrict this to particular categories. Very useful for keeping people informed of upcoming events.

Version 1.0 – July 30, 2009. Joomla 1.5 native only. Comes with language translation capability, but only English is included by default. GPL / open-source.

Download it here

Special thanks to Tomasz Dobrzyński, upon whose Twitter Status plugin this was based.

Events and calendars in Joomla

When building sites for customers, I have noticed people often need to announce upcoming events on their sites, and assume they need a full-page calendar displaying a month-view. However, it may in many cases be easier to display a simple list of upcoming events – even as simple as a single page, for example a regular Joomla article. This is especially true when there are not that many events in a  given month. What if you have only two events per month? Is it still sensible to devote all that screen real estate to empty calendar days? It seems more direct to just list the events and their dates in such a case. From the visitors’ point of view, they want to find out what’s coming up, so the fastest way to get them that information is the best way.

The reverse is also true. You may have so many events that it would be silly to cram them on one long page, one after the other. You may even need to set up some event categories, for example academic calendar events versus cultural events.

There are several Joomla solutions (including a couple extensions) that I have used for both ends. In order from simple to complex:

• Simple Joomla article that is manually edited. Requires no additional customer training, but only works for small numbers of events.
• Get a free Google Calendar and embed it. Learn to live with the lack of full control over its styling.
• EventList extension (schlu.net). This is a great open-source extension that displays upcoming events in a very straightforward way. It also lets visitors register (though not pay for) events. With this you can offer visitors RSS feeds and iCal formats of your calendar as well. iCal (.ics) files can be imported into Microsoft Outlook and Google Calendar, and many other calendar applications. It does NOT offer a traditional month/week view except as a module, but that should be fine. Take a look at this recent calendar I did for the Brooklyn Music School.
• JCal Pro, the aptly named Events Calendar (a.k.a. JEvents), for displaying a month, week, or more at a time. JEvents also integrates with DT Register and Community Builder to allow for paid event registrations.
• Take a look at the calendar extensions at Joomla’s site.

Rounded form elements with CSS3

Modern CSS3-compatible browsers such as Firefox and other Mozilla flavors now support rounded corners for form elements. While Internet Explorer 8 may be an improvement over 7, it still does not support the CSS3 standard as well as might be hoped for. Here is an example of what can be achieved:

Without CSS3:

With CSS3:

Note that the second textarea element has a thicker white border, different background color, and different text color. It is easily possible to assign different border colors and radiuses to different elements. It is important to set a background color, even if it is to be the same as the page background color. I have found that if you don’t, your rounded borders may not be displayed.

Sample HTML/inline CSS code:

<form>

<input style=”-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color:#444;color:#fff;border: 1px solid #CCC;” name=”subject” type=”text” />

<textarea style=”-moz-border-radius: 10px;-webkit-border-radius: 10px;background-color:#222;border: 2px solid #fff;color:#fff;” name=”subject”></textarea>

<input type=”submit” value=”submit” />

</form>