Adjusting the component's look and feel

Though RSEvents!Pro comes with a well organized display, there may be times when you would like to improve / adjust the look and feel of a certain area. The RSJoomla.com team thought this through and designed RSEvents!Pro in such a way that almost every view can be adjusted via template overrides.

Template overrides offer tremendous flexibility in terms of content look and feel. Basically you can control any aspect - HTML output and CSS, without affecting the component's update process (changes to the source code would have been lost if an update occurred). As a drawback, this method requires a basic understanding of PHP, HTML and CSS.

This technique consists in duplicating the component's (this works for modules too) view files into the template's HTML folder. The following list explains what file controls what view:

• the event details page - components/com_rseventspro/views/rseventspro/tmpl/show.php
• the general event listing page (through the List events menu item) - components/com_rseventspro/views/rseventspro/tmpl/default.php
• the calendar layout view (through the Calendar layout menu item) - components/com_rseventspro/views/calendar/tmpl/
• the add/edit event view (through the Add event menu item) - components/com_rseventspro/views/rseventspro/tmpl/edit.php
• the general locations listing view (through the List locations menu item) - components/com_rseventspro/views/rseventspro/tmpl/locations.php
• the general categories listing view (through the List categories menu item) - components/com_rseventspro/views/rseventspro/tmpl/categories.php
• the user's subscriptions view (through the My subscriptions menu item) - components/com_rseventspro/views/rseventspro/tmpl/subscriptions.php
• the events map view (through the Events map menu item) - components/com_rseventspro/views/rseventspro/tmpl/map.php
• the calendar tooltip layout (through the Calendar menu item) - components/com_rseventspro/views/calendar/tmpl/tooltip.php
• the marker window, after you click on an event marker from your map - components/com_rseventspro/views/rseventspro/tmpl/mapinfo.php

If you are new to Joomla! development, then it is probably easiest to start with an existing view, and try modifying it to achieve the desired result. To do this, you should make a copy of the existing view in the html directory of your template, and then modify the copy. The directory structure would be similar to this:

For example, if you wish to change the way how the event details are displayed, then you should copy show.php file, maintaining the directory structure within the template's HTML folder:

As an example, if you would like to remove the event description from the vent details area, simply comment or remove the following piece of code:

    <?php if (!empty($this->options['show_description']) && !empty($event->description)) { ?>
      <span itemprop="description"><?php echo $event->description; ?></span>
      <div class="rs_clear"></div>
    <?php } ?>

The information that is displayed regarding each event is stored in variables(for example the $event in the above example), you can see all the information that can be used regarding an event in a certain view by using the var_dump() function:

    <?php var_dump($event); die();?>

This will return the event information in the following syntax:

    object(stdClass)#396 (29) { ["id"]=> string(1) "1" ["name"]=> string(7) "Test RS" ["start"]=> string(19) "2012-06-14 13:42:00"...
    

In order to display the start date of the event you will need to use $event->start, the event name with $event->name...

Template overwrites for general listing pages

When creating a template overwrite for a general listing page(for example the List events, List locations...), if the total number of items listed exceeds the limit set in the Default list limit option, then the listing will be broken in several parts using the Load more button. When using this button the layout will not be controlled from the same file, for example if you are using the List events menu item and you only create a template overwrite for the default.php file, the template overwrite will not be applied for the events that area loaded when you will click the Load more button. In order to apply the overwrite for these items as well you will need to create a template overwrite for the items_events.php as well.

• items_events.php - this controlls the items loaded by the Load more button on the List events page
• items_locations.php - this controlls the items loaded by the Load more button on the List locations page
• items_categories.php - this controlls the items loaded by the Load more button on the List categories page

Template overwrites for modules

Template overwrites can also be used for the modules available for the component. You can find a complete list of what files control each module below:

• Upcoming events module - this is controlled through the default.php file located in modules/mod_rseventspro_upcoming/tmpl
• Calendar module - this is controlled through the default.php file located in modules/mod_rseventspro_calendar/tmpl
• Categories module - this is controlled through the default.php file located in modules/mod_rseventspro_categories/tmpl
• Locations module - this is controlled through the default.php file located in modules/mod_rseventspro_location/tmpl
• Subscribers module - this is controlled through the default.php file located in modules/mod_rseventspro_subscribers/tmpl

For example if you want to create a template overwrite for the Upcoming events module you will need to :

• create a mod_rseventspro_upcoming folder in your template's html folder
• copy the default.php file from modules/mod_rseventspro_upcoming/tmpl
• edit the newly copied file in order to apply the overwrite to the module

 <img src="index.php?option=com_rseventspro&task=image&id=3&width=800&height=600" alt="event-image"/> 

Notice "id=3", the number, would be your event ID (found via backend > Components > RSEvents!Pro > Events > last column on the right).