On this page

Custom CSS

NEW IN 3.10.0

You can enter your own custom css to add color coding to your event categories. With this custom css you can mark events in different colours so that my users can quickly find their way around even if there are a lot of events.

How do I access the advanced section to add my custom css?

You can put your custom css in the Advanced section within the Linchpin Theme configuration. To get there, click on the rack icon, then on "General Configuration", scroll down until Theme and click on "Configuration". Then scroll down until the "Advanced" tab. Open it and you find Custom CSS and Custom JS.

In the Custom CSS section can add your own custom css, for example the following code:

.event-category-5 event-card-header .eventheader {    

    border-left: rgb(200,10,325) solid 5px !important;

} 

.event-category-5 .fc-event-title-container {   

    border-left: rgb(200,10,325) solid 5px !important;

}

.event-category-5 .event-list-row {   

    border-left: rgb(200,10,325) solid 5px !important;

}

.event-category-5 .datebox {

    border: rgba(200,10,325) 2px solid !important;

    border-radius: 20% !important;

}

How to find out the event ID

Switch to the events configuration within your Confluence administration. There's a table listing all existing events categories. Hover with your cursor over the event category you want to use in your custom css. 

Alternatively, you can use your browser's tool for inspecting the code. There's an entry "event-category-id". That's the information you are looking for.

In our example the ID for category "event-category" is 1. To set CSS stylings for events from this category, you'll use the class "event-category-1".

How does this new color coding look like?

This custom css code results in a stripe on the left in a color of your choice as well as a border around the date.

Futhermore, you can see color coding when you click on an event.