How can we help you today?

How to Create a Border for Tiles Design Element

The ShortPoint Tiles Design Element does not have a border by default.


default tiles design element


If you want to frame your Tiles with a neat border, follow the steps in this tutorial. Here is the result you will achieve at the end (these are the ShortPoint Tiles with a 5px grey border):


tiles with borders


TABLE OF CONTENTS


Prerequisites

  • You have the latest ShortPoint SPFx version installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.
  • You already inserted a Tiles Design Element that you want to customize on your SharePoint page.

Interactive Tutorial

Go through this interactive tutorial to learn how to add a border to the Tiles Design Element:




We used the following custom CSS in the tutorial.

.shortpoint-tile {
   border: 5px solid black !important;
}

You can increase the border width value in pixels and replace black with the color that you want to use.


Step-by-step Tutorial

Here are the detailed instructions to add borders to the Tiles Design Element:


Step 1: Edit the ShortPoint web part

  • Edit your SharePoint page.


edit the page

  • Click the ShortPoint web part and enter edit mode by pressing the pencil icon.


enter ShortPoint edit mode


Step 2: Open the settings of the Tiles Design Element

  • Navigate to the Tiles Design Element on your page.
  • Press the EasyPass tag to show the action buttons.
  • Click the cogwheel icon to open the settings window.


open settings window


Step 3: Copy and paste the custom CSS code

This is the custom CSS code that we will be applying to the Tiles Design Element to add the borders.

.shortpoint-tile {
   border: 5px solid black !important;
}

You can increase the border width value in pixels and replace black with the color that you want to use.


  • Copy the custom CSS.
  • In the settings window, switch to the Custom CSS tab.
  • Paste the code into the space provided.


Copy and paste custom CSS


Step 4: Apply changes and hit Save

  • Once complete, press the green checkmark button.
  • You have the option to preview the page by hitting the eye icon on the Action toolbar.
  • Finally, remember to Save your changes.


Now all your tiles will have neat borders. This trick works with all the Tiles Design Element styles.


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