Eversports Manager offers you the possibility to personalize the view of your widget by using CSS codes. CSS is a computer language used to customize the style and format of the elements of a website.

Where can I style my widget?

You can personalize the widget view in the menu Settings > Widget > Adjust styling.

  • Here you can change the colors of the font and of the buttons.

  • If you wish to change the colors of the activities, you do not do this here, but directly in this Activity Groups.

  • Here you can also enter CSS codes to further style your widget overview.
    We recommend you to do this together with a web developer.

  • You can use the following CSS code to change the text color on your widget.

.class-calendar-block .calendar li {list-style: none; color: #000000;}

In order to find the color code, you can use the field above with the colors.

  • In order to change the color of the widget title, use this CSS code:

#widget h4 {color: #000000;}

  • In order to change the color of the activity descriptions, use this CSS code:

#widget #multi-session-detail-container .showmore-box { margin-top: 10px; max-height: 120px; min-height: 60px; position: relative; overflow: hidden; color: #000000; }

  • In order to change the color of the descriptions of online classes, use this CSS code:

#widget #multi-session-detail-container .event-online-stream-information { margin-top: 10px; max-height: 120px; min-height: 60px; position: relative; overflow: hidden; color: #000000; }


In order to customize the product overview, follow these steps:

1) Modify the border colors

  • In order to change the border color of the products, use this CSS code.
    Example: changing the border color of all time cards.

.time-card-border {
 border-top:5px solid;
 border-color: #e135e8;
}

  • Of course, you can do this for all product types. Just copy the CSS code above and substitute the string corresponding the correct product type.

.time-card-border
.block-card-border
.membership-border-color
.abo-card-border
.season-card-border
.credit-card-border
.subscription-card-border

2) Modify the background color of the products

  • In order to change the background color of the products, use this CSS code.
    Example: changing the background color of all time cards.

.time-card-color {
 background-color: #e135e8;
}

  • Of course, you can do this for all product types. Just copy the CSS code above and substitute the string corresponding the correct product type.

.time-card-color
.block-card-color
.membership-color
.abo-card-color
.seasonal-lesson-color
.credit-color
.subscription-color

Did this answer your question?