How can we help you today?

CSS Customized Look for Events Design Element

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.


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

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 12 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more