Customizing Your Upcoming Events Widget Using CSS and Template Files

Overview

There’ll be times that you find you want to customize various elements of Event Espresso’s front-end design and interface to suit your own needs. With a bit of knowledge of CSS, HTML and PHP you should be able to hack away at Event Espresso to turn it into whatever type of beast that you need.

This tutorial will give you a very basic introduction to customizing Event Espresso. It will introduce you to the basic concepts, and to the steps that you need to carry out a safe customization.
[s2If current_user_can(access_s2member_ccap_vip_membership) OR current_user_can(access_s2member_level1)]

CSS or Templates?

There are two main ways that you can customize Event Espresso:

1. Using CSS
2. Using Template Files

CSS is used if you want to make changes to design elements. We have provided a file called espresso_default.css where you can make style changes specifically for Event Espresso. This includes changes to design elements such as fonts, colors and spacing. In this tutorial we will use CSS to change the link colors in our sidebar widget.

Template Files are used for any more complex editing. You can use them, for example, to insert additional elements, or to make changes to the PHP. We will make a very basic change to the widget.php file, using it to add a separating line between events.

If you make any changes to your template files or any of our pre-installed stylesheets it’s important that you copy them to another folder. This will prevent your changes from being overwritten when you update Event Espresso.

Let’s get started!

Step 1: Editing Your Styles

To make simple design changes to your events widget you can use CSS. You can do this by adding styles to the espresso_default.css file.

Unless you are using one of Event Espresso’s pre-made css templates we recommend that you use espresso_default.css to make any changes to Event Espresso elements. This can be found in the event-espresso/templates/css/ folder. Once you’ve made changes to the css file you will need to copy it to prevent it from being overwritten when you update Event Espresso. You’ll see how to do this in step 2.

Note: If you are using a pre-installed Event Espresso template located in Template > Settings such as the grid layout or any of the themeroller styles you should make any changes to your CSS in your theme’s stylesheet – style.css. This will prevent any potential problems.

If you are using any of the highlighted styles you should add custom changes to style.css!

Open your espresso_default.css file to make changes to it.

The class you need for styling the elements in your widget is

.events 

So to edit the body text within the widget you would use

.events p 

To change the links you would use

.events a, .events a:link, events a:visited,
events a:hover, events a:active

Here’s the sidebar to widget to begin with:

I’m going to apply the following CSS:

.events a, .events a:link, .events a:visited {
color: #A3173A;
line-height: 13px;
padding 4px 0px 6px;
text-decoration: none;
}

.events a:active {
color: #2C17A3;
font-weight: bold;
line-height: 13px;
padding: 4px 0 6px;
text-decoration: none;
}
.events a:hover {
color: #FFFFFF;
font-weight: bold;
line-height: 13px;
padding: 4px 0 6px;
text-decoration: none;
background-color:#A3173A;
}

And here it is with the new CSS:

Nice and easy, right?

Step 2: Moving Your Template Files

When you install Event Espresso your template files are stored in wp-content/plugins/event-espresso/templates/

Every time Event Espresso is updated these files are overwritten. To ensure that any changes you make to your template files don’t disappear, you need to copy over any template files you have edited. The correct location for edited templates files is:

wp-content/uploads/espresso/templates

Event Espresso will first check in here to see what it should do, it always takes precedence. If there are no modified files it’ll check out the original templates folder in plugins/event-espresso/templates.

We want to copy over two files:

• espresso_default.css, which we just made changes to.
• widget.php, which we will edit in the next step to make changes to the upcoming events widget.

Navigate to wp-content/plugins/event-espresso/templates/ and find the two files.

Copy the files to wp-content/uploads/espresso/templates They should look something like this:

That’s it! Any changes that you make are now safely tucked away.

Step 3: Editing Your Template File

You’re now ready to edit your template file.

We’re going to make a very simple edit that shouldn’t cause you much problems. We’ll add a separator so that there is a line between each event in the widget.

Open widget.php in your favorite text editor.

On line 132 you’ll find the line:

<a href="<?php echo $registration_url; ?>"><?php echo stripslashes_deep($event->event_name) ?> - <?php echo event_date_display($event->start_date) ?></a>

Here’s how it looks in a text editor:

Line 132 selected in a text editor

Underneath this we want to add a

<hr />

tag. Like so:

<a href="<?php echo $registration_url; ?>"><?php echo stripslashes_deep($event->event_name) ?> - <?php echo event_date_display($event->start_date) ?></a> <hr />

The separator inserted into the code in the text editor

Save the file and close it.

Your upcoming events widget should now look like this:

For more information about template files check out this glossary of what they all do.[/s2If]
[s2If !current_user_can(access_s2member_level3) OR !current_user_can(access_s2member_ccap_vip_membership)]

[/s2If]