How can we help you today?

How to Customize the Date List Design Element in Live Mode

In this article, you will learn how to customize the ShortPoint Date List Design Element. You will also learn more about the features you can modify using this Design Element.


Date List


TABLE OF CONTENTS


Before we begin


  • You must have the latest version of ShortPoint installed for your SharePoint environment.
  • You must be a ShortPoint Designer with an active license.

Step-by-step tutorial

Follow the steps below to customize the Date List Design Element:


Step 1: Insert the Date List Design Element


Get Started on the interactive video below to learn how to insert a Design Element:



NOTE: Check out ShortPoint Basics: How to Insert a Design Element to learn more about inserting elements.

Step 2: Edit the items on the list


Go through the interactive tutorial below to learn how to edit your content:



NOTE: For more ways to edit the Date List in the Items tab, check out Date List Features.

Step 3: Customize the design 


Click Get Started to learn how to customize the design of the Date List Design Element:



NOTE: The customizations above are optional. You can customize the Date List however you want. Check out Date List Features to learn more about the options you can edit in the Design tab.

Step 4: Insert and Save


Start the interactive tutorial to insert and save:



Date List Features

A. Design tab


The Design tab allows you to customize how the Date List will appear on your page. It has the following options:


Design tab


Theme colorTheme color 
allows you to customize the color of all the events in your Date List.
Date StyleDate Style
allows you to customize the style of the Date List. You can choose from Plain, Mini-bar, and Bar.
Date SizeDate Size allows you to change the text size.  You can adjust it by moving the slider or by typing the value you desire in the field provided. You can set the size in number or pixels (e.g., 7 or 140%).
SeparatorSeparator
allows you to set or remove the line between each item in your Date List.
Separator colorSeparator colorallows you to change the color of your separator line.
Separator sizeSeparator size allows you to change the size of your separator line.
Horizontal viewHorizontal view
allows you to horizontally align the items on the list. Find out more about this feature in our solution article: Horizontal Alignment for ShortPoint Lists.

B. Items tab


The Items tab allows you to add, delete, arrange, edit, and duplicate the items on your Date List. It has the following functions:


Items tab


Duplicate iconDuplicate icon
allows you to duplicate an item in the list
Cogwheel iconCogwheel icon
allows you to further edit an item
Trash iconTrash icon
allows you to delete an item
Add NewAdd New
allows you to add a new item
Drag and DropDrag and drop
allows you to arrange the order of the items in the list

C. Advanced tab


The Advanced tab provides more customization options for the Date List Design Element. It has the following features:


Advanced tab


MISCELLANEOUS


Text alignment
Text alignment
allows you to customize the alignment of the items in the Date Lists. You can choose from justify, left, center, and right.
Vertical alignmentVertical alignment
allows you to change the vertical alignment of your event items in the Date List. You will only notice the change in vertical alignment if your subtitle or description field is empty. If all fields are filled in, the vertical alignment won't be visible.
SpacingSpacing
allows you to change the space between the title, subtitle, and description.
Fix date format related issuesFix date format related issues
allows you to fix any date format issues.



DATE STYLES

Date boldDate bold
allows you to change the format of the date to bold.
Date colorDate color
allows you to change the color of the date.

Date location
Date location
allows you to adjust the position of your date. You can choose from left or right.



TITLE STYLES


Title Text Size
Title text size 
allows you to change the text size of your events' titles.

Bold Title
Bold title
allows you to change the title format to bold.

Title Color
Title color 
allows you to customize the title color.

Title hover color
Title hover color
allows you to customize the color of the title whenever a user hovers over it.

Title max lines
Title max lines
allows you to control the number of lines your title covers.

SUBTITLE STYLES

Subtitle text sizeSubtitle text size
allows you to change the size of the subtitle text.
Subtitle colorSubtitle color
allows you to change the color of the event's subtitle.
Subtitle locationSubtitle location
allows you to adjust the position of your subtitle. You can choose from above or below.
Subtitle max linesSubtitle max lines
allows you to control the number of lines your subtitle covers.



DESCRIPTION STYLES

Description text sizeDescription text size 
allows you to change the size of the description text.
Description colorDescription color
allows you to change the color of the event's description.
Description max linesDescription max lines
allows you to control the number of lines your description covers.


LINK SETTINGS

Link styleLink style
allows you to customize the style of your link.

Link text
Link text
allows you to add a link text. By default, the link text is Read More.


ITEM BACKGROUND STYLES

Item background colorItems background colorallows you to change the background color of an item.

Item background hover color
Items background hover color 
allows you to change the background color of an item whenever a user hovers over it.

D. Custom CSS tab


The Custom CSS tab allows you to create your own CSS for the Date List Element. 


NOTE: Check out the basic and advanced Custom CSS tutorial in case you need additional information on the Custom CSS tab


Custom CSS tab


NOTE: The Visibility and Connect tabs are currently only available in Grid Mode. Switch to Grid Mode to access these tabs.

That is it! Enjoy adding Date Lists to your SharePoint 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 1 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