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:

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.

Other articles you may find useful:

Did this answer your question?