Create a Fabric UI card layout on modern SharePoint pages

By João Ferreira Sep 3, 2019 Branding, Development, Office 365, SharePoint 6 Comments

I’ve spent most of my professional life building custom intranets using classic publishing sites with custom page layouts and one of the features that was often requested was the card effect around the web parts.

While this was very simple to implement with custom page layouts on classic SharePoint, on modern SharePoint things are a bit different and require a different approach that I’ll explain in this article.

The instructions on this article will provide you a card layout like what is available on the modern Admin Portal.

How to add custom css to modern SharePoint pages

To add custom css to the modern pages I’m using the modern script editor web part built by Mikael Svenson.

The installation file for the web part is not available on GitHub but you can download it from here, this package was built using 1.0.0.13 and is compatible with SharePoint Online and SharePoint 2019.

Install the script editor web part

To install the script editor solution, do the following:

1. Open your app catalog and upload the sppkg file
2. Click on deploy
   

   

3. Open the site collection where you want to create the card layout
4. Go to Site Contents and click New App
5. Search for script and then click on Modern Script Editor web part by Puzzlepart
   

Add the custom css to the pages

Now that you have the web part installed navigate to the page where you want to create the card layout effect and do the following:

1. Edit the page
2. On any web part zone click on the icon
3. Scroll to the other section and click on Modern Script Editor
   
4. Click on the web part and open the settings pane
5. Select the Remove padding option
   

   

6. Click on the Edit Snippet and paste the code below

7. Click on Save, you will notice immediately a shadow around your web parts but if your theme has a white background the card will be very subtle, to make it stand out read the next section to create a custom SharePoint theme to be used with your card layout
   

Add a custom css theme with a gray background

1. Open the Theme Designer, an online tool from Microsoft that will help you to build SharePoint themes
2. Define your Primary Color, Text Color and Background Color. The background must be gray e.g.#faf9f8
3. Once you have the theme built click on Export theme and select the PowerShell tab
   
4. Connect to your SharePoint Online environment open PowerShell and execute the command:

   Connect-SPOService -Url https://contoso-admin.sharepoint.com

5. In the console create a PowerShell variable with the generated color pallet

   $customTheme = @{
   	"themePrimary" = "#008299";
   	"themeLighterAlt" = "#f1f9fb";
   	"themeLighter" = "#c8e9ef";
   	"themeLight" = "#9dd6e0";
   	"themeTertiary" = "#4eb0c2";
   	"themeSecondary" = "#148fa5";
   	"themeDarkAlt" = "#00758a";
   	"themeDark" = "#006374";
   	"themeDarker" = "#004956";
   	"neutralLighterAlt" = "#f3f2f1";
   	"neutralLighter" = "#efeeed";
   	"neutralLight" = "#e5e4e3";
   	"neutralQuaternaryAlt" = "#d6d5d4";
   	"neutralQuaternary" = "#cccbca";
   	"neutralTertiaryAlt" = "#c4c3c2";
   	"neutralTertiary" = "#bab8b7";
   	"neutralSecondary" = "#a3a2a0";
   	"neutralPrimaryAlt" = "#8d8b8a";
   	"neutralPrimary" = "#323130";
   	"neutralDark" = "#605e5d";
   	"black" = "#494847";
   	"white" = "#faf9f8";
   	}

6. To deploy the theme run the command below, define the custom Name that will be visible on SharePoint online and in the Palette argument reference the variable created on step #5

Add-SPOTheme -Name "Contoso Theme" -Palette $customTheme -IsInverted $false -Overwrite



7. On SharePoint click on Settings and then change the look
8. Select Theme and pick your new theme

The final result will be similar to the image below with your web parts inside the card.

Business vector created by freepik – www.freepik.com