Custom styling run.events Tickets Widget

run.events Tickets Widgets has a basic black and white style when used out of the box, without any additional styling applied. Black and white will usually fit well in any web site color scheme, and Verdana, the font used when no custom styling is applied, is a quite neutral and web-safe font.

However, if you want to style the widget to perfectly fit your web site styles, there are quite some styling possibilities with CSS. Here are the main CSS classes that you will probably want to use to achieve your desired look and feel:

.re-tickets

The main widget element uses this CSS class.

.re-tickets .side

Ticket widget has two sides, left (with tickets and prices) and right (with the order summary), and both of those sides have the .side CSS class applied. You can of course use first-child and last-chald to target only left or only rigt side.

.re-tickets .section

This class is applied for title DIVs, and can be used to target elements within those divs.

.re-tickets .section H2

For example, all titles are using H2 styling within the DIV that has the .section style.

.re-tickets H4

H4 elements are used for ticket type names in the left side.

.re-tickets small

Small text is used for ticket descriptions in the left side

.re-tickets .redirect-footer

Redirect footer is used to style the "You will be redirected to run.events" DIV.

You can of course go deeper, and target all the HTML elements nested within those main elements, and thus make the tickets widget to blend perfectly with your web site.

Here is one relatively simple CSS script that makes the widget fits nicely into a green-themed web site.

/* Styling the widget*/
.re-tickets {
    padding: 20px 20px 20px 20px !important;
    background-color: #FFFFFF44;
    border-radius: 14px !important;
    font-family: Open Sans,Arial,Helvetica,sans-serif;
}
.re-tickets h4 { 
    white-space:initial;
}
.re-tickets .btn {
    background-color: #BECD28 !important;
    color: #fff;
    border: 2px solid #BECD28 !important;
    font-size: 16px;
    line-height: 24px;
    padding: 11px 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: .3s all;
  border-radius: 6px !important;
}
.section h2 {
    font-size: 24px;
    font-weight: 700;
}
/* end of styling the widget */