What is CSS?
CSS (Cascading Style Sheets) is a simple language used to control how your website looks. It lets you change things like colours, fonts, spacing, and layout without altering the underlying content.
Each CSS rule targets a specific element on your page and tells it how to appear. For example, you can change the colour of a button, the size of a heading, or add spacing around an image.
How to add CSS in WordPress
To add custom CSS in WordPress:
- Go to Appearance → Customize in your WordPress dashboard
- Click on Additional CSS at the bottom of the menu
- Paste your CSS code into the editor
- Click Publish to save your changes
You'll see a live preview of your changes before publishing. If something doesn't look right, simply remove or adjust the code.
Here is some CSS for styling the event, performance and venues pages plus checkout windows generated by the Eventotron plugin. This is just a guide and you will need to make changes to font names and hex colours to suit your design.
/*Events Archive page*/
/*change the font, text style, size and colour of the filer options*/
.etron-filter {
font-family: "sofiapro";
text-transform: uppercase;
font-size: 25px;
color: #a3248e;
}
/*change the font, text style, size and colour of the Results header*/
#etron-results-header {
font-family: "Poppins";
text-transform: uppercase;
font-size: 25px;
color: #a3248e;
}
/*change the font, text style, size and colour of the individual result tiles*/
.etron-archive-item-title a {
font-family: "Poppins";
text-transform: uppercase;
color: #a3248e;
}
/*change the background, border, border radius, padding, colour, font-family, size and weight of the More details button on results tiles*/
.etron-archive-item-book a {
background: #DEE8FF;
border: 1px solid #DEE8FF;
border-radius: 10px;
padding: 10px;
color: #F2644E;
font-family: Open Sans;
font-weight: 400;
font-size: 18px;
}
/*add space above the More Details button*/
.etron-archive-item-book {
margin-top: 20px;
}
/*put a background on the result tiles when hovered over*/
.etron-archive-item:hover {
border: none;
background-color: rgba(163,36,142,.1);
border-radius: 10px;
}
/*Event page*/
/*change the font, text style and colour of the event title on event pages*/
.etron-event-title {
font-family: "Archivo Black";
text-transform: uppercase;
color: #a3248e;
}
/*change the background colour, border colour, border radius colour of text and font weight of text of the find performances button*/
.etron-button-book {
background: #f28100;
border: #f28100;
border-radius: 10px;
color: #fff;
font-weight: 500;
}
/*change the border radius, border width, border colour and padding of the keyword search filter*/
#etrontitlefilter {
border-radius:5px;
border-width: 1px;
border-color:#f28100;
padding: 10px;
}
.etron-description {
font-family: inherit;
line-height: 18px;
}
.sidebartitle {
font-family: "Archivo Black";
color: #a3248e;
}
.etronsidebaritem {
font-family: inherit;
line-height: 28px
}
.etron-button-tickets {
background-color: #f28100;
border-color: #f28100;
border-radius: 10px;
color: #fff;
}
.etron-perf-date {
font-family: inherit;
font-size: 23px;
}
.etron-perf-time {
font-family: inherit;
}
.etron-perf-venuename, .etron-perf-venueaddress, .etron-perf-accessitems {
font-family: inherit;
}
.etron-pay-button {
background-color: #F15921;
border-color: #F15921;
border-radius: 10px;
color: #fff;
}
.etron-addon-details-title {
text-align: left;
}
.etron_complete_payment_button {
background-color: #F15921;
border-color: #F15921;
border-radius: 10px;
color: #fff;
}