How to Customize the Look of the Events Design Element using Custom CSS

 .shortpoint-event-item {
    padding: 10px 0 0 !important;
    padding-bottom: 10px !important;
}
.shortpoint-event-time {
    position: relative !important;
    padding: 10px 0 !important;
}
.shortpoint-event-day {
    position: relative !important;
    margin-bottom: 10px !important;
    font-size: 30px !important;
    font-weight: bold !important;
    color: #f4f4f8 !important;
}
.shortpoint-event-month {
    position: relative !important;
    font-size: 14px !important;
    color: #f4f4f8 !important;
}
.shortpoint-event-title {
    position: relative !important;
    font-size: 20px !important;    
    font-weight: bold !important;
    color: #4c4b4b !important;
}
.shortpoint-event-description {
    font-size: 16px !important;
    color: #adadac !important;
}
.shortpoint-event-colorbar {
    right: 0 !important;
    background-color: currentColor !important;
    border-radius: 4px !important;
    border-width: 0 !important;
}
.shortpoint-event-content {
    padding-left: 30px !important;
}

NOTEBefore proceeding, make sure you already have an Events Design Element on your page. You must also have [1] Style 1 as the main design style, have [2] Enable Color by Category turned on, and have [3] Group by day disabled. 

• Click the Events tag:

• Select the cogwheel icon:

Step 3: Copy the Code

• Copy the Custom CSS Code:

 .shortpoint-event-item {
    padding: 10px 0 0 !important;
    padding-bottom: 10px !important;
}
.shortpoint-event-time {
    position: relative !important;
    padding: 10px 0 !important;
}
.shortpoint-event-day {
    position: relative !important;
    margin-bottom: 10px !important;
    font-size: 30px !important;
    font-weight: bold !important;
    color: #f4f4f8 !important;
}
.shortpoint-event-month {
    position: relative !important;
    font-size: 14px !important;
    color: #f4f4f8 !important;
}
.shortpoint-event-title {
    position: relative !important;
    font-size: 20px !important;    
    font-weight: bold !important;
    color: #4c4b4b !important;
}
.shortpoint-event-description {
    font-size: 16px !important;
    color: #adadac !important;
}
.shortpoint-event-colorbar {
    right: 0 !important;
    background-color: currentColor !important;
    border-radius: 4px !important;
    border-width: 0 !important;
}
.shortpoint-event-content {
    padding-left: 30px !important;
}

NOTEYou are free to modify the values inside the code block according to your preferences. You can change the padding, font-size, color, and many more.

Step 4: Paste the Code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code in the field provided.

Step 5: (Optional) Customize Block Colors

NOTEThis step is only applicable for static Events Design Element. If you’re using a connected Events Design Element, you may proceed to step 6.

• Click the back icon:

• Go to the Items tab.
• Click the cogwheel icon of the item you want to modify:

• Go to the Design tab.
• Select the color you want to use by adding a [1] HEX code, using the [2] drop-down, or using the [3] color picker.

• Click the back icon and repeat step 5 for all the items you want to modify:

Step 6: Save

• Click the green check mark to apply your changes.
• Click the eye icon to see your page in real-time:

• Save your changes:

• Publish your page:

Congratulations! You now have an additional design style you can use for the Events Design Element:

Related articles:

• Introducing ShortPoint Events Design Element 
• Adding, Duplicating, Moving and Deleting Items in ShortPoint Design Elements
• How to Map Events Categories with Colors and Icons in ShortPoint
• How to Connect Events to a SharePoint Calendar
• Connection Type: My Events (Outlook)
• Connection Type: Shared Events (Outlook)
• Connection Type: Group Events (Outlook)
• Custom CSS Tab for ShortPoint Design Elements
• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)