Skip to main content
All CollectionsRegistrationWebsite
How to change the look and feel of your agenda using CSS
How to change the look and feel of your agenda using CSS

Learn how your program display can be customized using CSS.

Ben Dharmanandan avatar
Written by Ben Dharmanandan
Updated over 3 years ago

If you are using the "Eventsforce Responsive Standard Design" template, you can change the look and feel of elements of your agenda by adding CSS (cascading styles sheets) into the appearance settings for an event.

  1. Go to Website > Design > Appearance

  2. Scroll down the page and tick the checkbox for "Use custom CSS"

See the types of customization possible in the different sections below:

One session per row

If you want to change the layout of an agenda so that each session within a time block is on a single row rather than in blocks of up to 3, add the following code into the custom CSS field:

.ef-agenda-cell {

flex-basis: 100%;
}

Save the page and preview your agenda.

Before:

After:

Removing the time blocks and having one session per row

If you want to remove the time blocks, reduce the height of the rows and want one session per row, add the following into the custom CSS field:

.glyphicon-time {
display: none;
}
.ef-agenda-duration {
margin-bottom: 0px;
}
.ef-agenda-session-name {
float: left;
font-weight: normal;
}
.ef-agenda-detail-block {
padding-left: 25px;
padding-top: 3px;
position: absolute;
left: 60%;
}
.ef-agenda-cell {
flex-basis: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
.ef-agenda-time-block {
visibility: hidden;
height: 0px;
padding: 0px;
}
.ef-agenda-grid {
background: #EEEEEE;
}

Save the page and preview your agenda.

Example:

Changing color and font of session names on agenda page

Use the following code to customize the color and font of session names on the agenda page:

.ef-agenda-session-name {color: #e6e6e6;
font-family: Arial;
font-size: 18px;
}
.ef-agenda-session-name>a {color: #e6e6e6;
font-family: Arial;
font-size: 18px;
}

Note: Replace the "#e6e6e6" with the hex code of your preferred color. Similarly, font family and size can be changed as well.

Additional information

For general information about changing elements on other pages of your website, you can read our article How to change the look and feel of your event website using CSS.

Troubleshooting

Please be aware that we do not support CSS. If you have any problems you can disable your custom CSS code by deselecting the "Use custom CSS" check box. This will allow you to test whether the issue is caused by the custom CSS code.

Did this answer your question?