How can we help you today?

How to Customize the File List Design Element in Live Mode

This article will demonstrate how to insert and customize the File List Design Element in Live Mode.


file list template



TABLE OF CONTENTS


Prerequisites


Step-by-step Tutorial


Follow the steps below to learn how to customize the File List Design Element:


Step 1: Insert the File List Design Element


Click Get Started to learn how to insert a Design Element:



NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Live Mode for more details.

Step 2: Add Content to the File List


Go to the Items tab (1), and click the cogwheel icon (2). 


Items tab and cogwheel


Add a Title (1), Subtitle (2), and a Description (3).


Title, Subtitle, Description


Specify the File Type (1) and add the file Link (2). 


File Type and Link



Once satisfied, click the back icon to customize other items on the File List.


back icon


Repeat the same steps for the other items. 



(Optional) Click Add New to add new items.


Add New


(Optional) Click the Trash icon to delete an item.


trash icon


(Optional) Click the Duplicate icon to duplicate an item.


Duplicate


(Optional) Drag and drop to arrange the order of the items. 


Drag and drop



Step 3: Customize the File List


Go to the Design tab and choose the Theme color.


Theme color


(Optional) Customize File Icon Size, File Icon Style, Separator, Separator Color, and Separator size.


Design settings



Step 4: Insert and Save


Once satisfied, click the green checkmark


Green checkmark


Click Save.


Save


Then, click Republish.


Republish



File List Features


There are many ways to customize the features of the File List Design Element. In the settings window, you will find the following tabs:


A. Design Tab


You can modify the default design of the element in the Design Tab. Below are the settings you can configure:


Design tab


Theme colorTheme Color
customize the main color of your File List.
File Icon SizeFile Icon Size
adjust the size of your icon.
File Icon StyleFile Icon Style
choose from a list of icon styles including Normal, Square, Circle, Outline-Square, and Outline-Circle.
SeparatorSeparatoradds a separator in between items. You can choose from Line and None.
Separator ColorSeparator color 
customize the color of the separator.
Separator sizeSeparator size
customize the size of the separator.
Horizontal viewHorizontal View
display items horizontally.
Maximum Items Per RowMax Items Per Row 
customize the number of items per row.



B. Items tab


The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:


Items tab


  • ITEMS ACTION ICONS
DuplicateDuplicateduplicates the item selected.

Cogwheel
Cogwheel
opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
TrashTrashdeletes the item selected.
Add NewAdd New
adds a new item.

Drag and Drop
allows you to re-arrange the position of the item.


  • COGWHEEL ICON SETTINGS

Title


Titleadd item title.

Subtitle


Subtitle
add item subtitle.
DescriptionDescriptionadd item description.
File TypeFile Type
add the file type of the document (doc, pdf, ppt, etc.). ShortPoint will show the file type icon automatically.
LinkLink
add the link to your file.

C. Advanced Tab


This tab allows you to further customize the File List Design Element. Below are the options available:


Advanced tab


  • MISCELLANEOUS
Text alignmentText Alignment 
set how the list item text is aligned on your page. Choose between, justified, left, center, or right alignment options.
Vertical alignmentVertical Alignment
set how the text will appear vertically on your page. Choose from Top, Middle, and Bottom.
SpacingSpacingcontrol the overall spacing between list items


  • FILE ICON STYLES
No icon styleNo Icon Style

modify what you want ShortPoint to do when there is no icon associated with an item. You can choose from: 

  • Letter: the first letter of the title will be the default icon
  • None: no icon will appear but the spacing will be kept as is
  • Empty: no icon will appear and the space will be removed
Default iconDefault iconcustomize the icon you want to show for all items by default.
Icon colorIcon colormodify the color of the icon.
Icon locationIcon locationmodify the location of the icon. Choose from Left or Right.


  • TITLE STYLES
Title Text SizeTitle text sizemodify the size of the title in px, em, or %.
Bold TitleBold titlebold the title of each item.
Title ColorTitle colorcustomize the color of the title.
Title hover colorTitle hover color customize the color of the title when a user hovers over it.


  • SUBTITLE STYLES

Subtitle text size
Subtitle text sizemodify the size of the subtitle in px, em, or %.
Subtitle colorSubtitle colorcustomize the color of the subtitle.
Subtitle locationSubtitle locationcustomize the position of the subtitle. You can choose to show it Subtitle below or above the Title.


  • DESCRIPTION STYLES
Description colorDescription colormodify the color of the item Subtitle text. This is set to the primary color of your color palette by default.
Description max linesDescription max lines set the maximum lines of text of the Description to show in the list. This is set to show all text by default with no line limit.




  • LINK SETTINGS

Linking options
Linking optionsselect how item links will be opened. This is set to launch within the current window by default. You can choose between opening the link in a new window, a lightbox, or a dialog window.

Link style
Link stylechoose how users will access the link. By default, the Title of the item will be the link. You can choose to display your preferred Link text as the link by selecting the link option.
Link textLink text

set what text will show as a link on your list. This is set to “Read More” by default.


  • ITEMS BACKGROUND STYLES


Item background color


Item background color set the background color of your list items. This is set to the primary color of your color palette by default.

Item background hover color


Item background hover colorcustomize the background color of an item when your mouse is over it. This is set to the primary color of your color palette by default.

D. Custom CSS Tab


This tab allows you to use your own CSS, HTML, and Javascript code to customize the File List Design Element. 


NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.


Custom CSS tab


NOTE: The Connect and Visibility tabs are currently not available in Live Mode.



And you’re done! Start customizing your File List Design Element in Live Mode now.




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 41 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