The Eventsforce "Responsive Standard Design" template ensures your event website will look good on any device whether it is a desktop, laptop or mobile device. However, you may want more control over specific elements of your website such as the colors, fonts, and images, to create the precise look and feel you are after.

The ability to add CSS to the website template is an advanced feature. We would advise that only web developers with HTML and CSS knowledge add CSS code into this field as they will also have to troubleshoot any issues that arise because of the code.

One option to achieve your required look and feel is to order a custom website template, the second option is to enter some CSS (cascading style sheets) code into the "Responsive Standard Design" template that will be outputted on all pages on the event website.

Accessing the custom CSS code field

In order to add CSS, you must be using the "Responsive Standard Design" website template. To access the CSS field in the template:

Go to Website > Design > Appearance
At the bottom of the page, select the check box to "Use custom CSS"

You will now be able to add your own CSS to customize your website.

You can click the "Preview" button to see the changes your CSS has made to your website. You will have to save the page and preview the website to see dynamic changes, such as the behavior of your menu.

To disable the CSS code, deselect "Use custom CSS".

Example CSS Code

Below is example code to demonstrate how you can customize the look and feel of your event website.

To change the color and font size of the h1 heading:

h1 {
  color:red; font-size:60px;
}

Tip: Replace "red" and "60px" with the font color and size you want to use.

To change the color of the page headings:

#ef-id-page-heading {
color: #000080;
}

Text

To change the paragraph font:

p {
  font-family: Verdana, Geneva, sans-serif;
}

Tip: It's best to list three different fonts in font-family as a back up to ensure maximum compatibility between browsers and operating systems.

To change the paragraph font and all field labels:

p, .ef-registration-section td, .ef-table td, div, .ef_frontend_button, 
.ef_progress_bar_text  {
font-family: libre-frankin;
}

To change the color of a divider:

.ef_form_divider {
background-color: #000080;
}

To change font and font size of registration questions:

.ef_proweb_form_prompt {
font-family: Arial, Helvetica, sans-serif; 
font-size: 16px;
}

To change the font color of registration questions:

.ef_proweb_form_prompt {
color: #000080;
}

To change the spacing between registration questions:

tr.draggableTR>td {
padding-bottom: 5em;
}

To change the font and font size of the answer alternatives within a radio button question:

label.ef-radiobutton-radio-label {
font-family: Arial, Helvetica, sans-serif; font-size: 14px;
}

To change the font and font size of the answer alternatives within a mutli checkbox question:

.ef-multicheckbox-checkbox-label {
font-family: Arial, Helvetica, sans-serif; font-size: 14px;
}

Hyperlinks

To remove the underline for hyperlinks:

a {
text-decoration: none;
}

To change color of a hyperlink:

a {
color: red;
}

To change color of hyperlink on hover:

a:hover {
color: hotpink;
}

To change color of the 'Request Login Details' link:

a.redbold12px {
color: #000080; 
font-size: 16px;
}

To change color of menu button text:

.ef_proweb_menu_ul li a {
  color: black;
}

To change the background color of menu buttons:

.ef_proweb_menu_ul li a {
background: yellow;
}

To change the color of menu links on hover:

.ef_proweb_menu_ul li a:hover {
color: red;
}

To make the menu buttons "pop out" on hover:

.ef_proweb_menu_ul li a:hover {
transform: scale(1.4);
}

Background Color

To change the background color of the entire page:

body {
  background-color: #666666;
}

To change the background color of registration questions:

.EF_inputBox {
background-color: #eedad8 !important;
}

Tip: In the above line of code you can replace "eedad8" with the hex code for the color of your choice.

To make the inner container on pages transparent:

.ef-template-container {
background-color:transparent;
}

Progress bar

To change the color of the progress bar during registration:

.ef_progress_bar_progress_div {background-color: #000080;}

To create a "pop out" effect on menu items:

.ef_proweb_menu_ul li a:hover {
  transform: scale(1.1);
}

To make menu pages span full width of the page (when using horizontal menu)

div.col-sm-12 {
padding: 0px !important;
} 

.ef_proweb_menu_ul>li {
width: 25% !important; text-align: center;
}

To increase size of menu tabs (the pixel numbers in the code can be adjusted as per preference) along with changing the size of the menu text:

ul.ef_proweb_menu_ul, ul.ef_proweb_menu_ul >li {
height: 60px;
}

.ef_proweb_menu_ul li a {
font-size: 40px; margin-top: 10px;
}

Background Image

You can replace the background color of the page with an image:

Upload the image to an event web page. (This page can remain hidden, it's simply to host the image on the Eventsforce server.)
Copy the image URL starting “/accountname”
Add the URL to the below CSS code:

body {
  background-image: url("/EXAMPLEACCOUNTNAME/media/uploaded/EVEXAMPLEACCOUNTNAME/event_42/20160903_130509_GD.jpg");
  background-repeat: tile;
  background-position: center top;
  background-color: #4A828E;
}

Event program/agenda

If you want to change the look and feel of the agenda in an event, read our article How to change the look and feel of your agenda 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.

Accessing the custom CSS code field

Example CSS Code

Header