Using custom CSS you can modify the look of ShortPoint Design Elements. In this article we will show you how to get the following style for Events Design Element:


Please, follow the steps below.

Step 1: Copy the Events design element from our demos page


Visit the Events Element Page in ShortPoint Demos Website.  

Enable Allow to copy parts option at the top of the page:



Scroll to the Colors by Category section and copy the Style 1 example:


Step 2: Add copied Events design element to your page


Edit the page. 
Open ShortPoint editor and paste the copied code, as shown in the animation below:



Note: Check our solution article ShortPoint Live Demos with Copy and Paste Magic to know more about this feature and its functionality.

Step 3: Modify Events


Click the cog wheel icon to open the Events' settings.

Switch to the Items tab to add events' description, change titles, categories etc. to your preference.


Alternatively, you may dynamically connect your Events to the calendars (using the options in Connect tab) and then map the items. Check the articles below on the connection options for Events:

Connect to Outlook calendar:

Connect to SharePoint calendar:

Step 4: Add custom CSS to Events


Switch to Custom CSS tab. 



Copy the following 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-tag-line {
    display: none !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;
}


Note: you can modify the colors, font sizes and weights and other stylings in the custom CSS code to your own preference.


Paste the copied code to the Custom CSS field, as shown below:



Note: Check our basic and advanced custom CSS tutorials to know more about using custom CSS for styling the ShortPoint design elements: 


Step 5: Update the element


You may Preview the result:



Click Update button:



Save the page.

Result


That's it. Here is an example of how it may look on your page:


Related articles: