Try ShortPoint nowUsing 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:
- Connection Type: My Events (Outlook)
- Connection Type: Group Events (Outlook)
- Connection Type: Shared Events (Outlook)
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:
- 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)
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:
- 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)