Building a SharePoint intranet with ChatGPT and Bing – Branding modern sites

By João Ferreira Mar 2, 2023 Branding, Intranet 0 Comments

SharePoint branding has a soft spot in my heart, changing the way SharePoint looks like was how I started my career creating custom themes for SharePoint 2007 and SharePoint 2010. This is the reason why I’m starting this project by creating the intranet branding with the help of Chat GPT and Bing.

In the modern days of SharePoint branding means a completely different thing than it meant in the past, the available options are limited but this doesn’t mean we can’t apply a solid corporate brand to a SharePoint site with a bit of creativity.

What does ChatGPT says about SharePoint branding?

Branding modern SharePoint sites involves customizing the look and feel of the site, including its colors, logos, and other visual elements. Remember, modern SharePoint sites are designed to be responsive, so make sure that your branding looks good on different screen sizes and devices.

What does Bing says about SharePoint branding?

With SharePoint branding, you can tweak the layouts, themes, colors, logos, and overall “look” of your SharePoint sites. Branding gives you more control over the SharePoint user experience and helps to promote your corporate culture.

Applying a corporate branding to a modern SharePoint site

Both ChatGPT and Bing, mentioned the available options to brand a modern SharePoint sites and that includes:

• Company logos
• SharePoint themes
• Other visual elements (This included header background images)

With the 3 components in mind and before starting the implementation make sure you have at hand the branding guidelines of the company. In the following image you can see the guidelines for the fake company I’ll be using for this project, with the logos, color combinations and other visual elements.

Creating and installing a SharePoint custom theme

Once you get the colors of the company the first step is create a custom SharePoint theme that will be available under the change look for modern sites.

In order to accomplish the steps described in this article you must install the latest version of the PnP PowerShell module, more information about how to do it can be found here.

To create the theme, grab the main color from branding guidelines and do the following:

1. Navigate to the Fluent UI theme designer web site
2. Define your Primary color, Text color and Background color
3. Make sure things look good in the demo components, this site is a preview of how things will look like in your SharePoint site once the theme gets applied
4. Click in the Export theme button
   
5. Select the PowerShell tab and copy the code in the text box
   

   

6. Copy the following script and update the $tenantName, $themeName with your own values

   $tenantName = "handsonsp"
   $themeName = "Explorer"
   $theme = @{
       "themePrimary" = "#080e47";
       "themeLighterAlt" = "#d0d3e9";
       "themeLighter" = "#a9aed5";
       "themeLight" = "#868cc1";
       "themeTertiary" = "#676eac";
       "themeSecondary" = "#4c5498";
       "themeDarkAlt" = "#353d84";
       "themeDark" = "#222a70";
       "themeDarker" = "#131a5c";
       "neutralLighterAlt" = "#faf9f8";
       "neutralLighter" = "#f3f2f1";
       "neutralLight" = "#edebe9";
       "neutralQuaternaryAlt" = "#e1dfdd";
       "neutralQuaternary" = "#d0d0d0";
       "neutralTertiaryAlt" = "#c8c6c4";
       "neutralTertiary" = "#a19f9d";
       "neutralSecondary" = "#605e5c";
       "neutralPrimaryAlt" = "#3b3a39";
       "neutralPrimary" = "#323130";
       "neutralDark" = "#201f1e";
       "black" = "#000000";
       "white" = "#ffffff";
       }
   
   Connect-PnPOnline -Url ("https://{0}-admin.sharepoint.com" -f $tenantName) -Interactive
    
   Add-PnPTenantTheme -Identity $themeName -Palette $theme -IsInverted $False -Overwrite
   

7. Replace the $theme value by the one you just got from the Fluent UI theme designer
8. Open the PowerShell console and execute the script, to get the theme installed you must authenticate using the SharePoint tenant administrator account

The process gets completed in just a few seconds and your new theme gets ready to be used in any SharePoint site collection across the tenant.

Applying a custom SharePoint theme to a site

With the new theme installed in your SharePoint tenant, now it’s time to get it applied to your new intranet landing page. In this project I’m starting with an empty communication site but the process is the same for any modern SharePoint site.

To apply the theme to the site do the following:

1. Click in the cog icon in the suite bar
2. In the settings menu click on Change the look
   
   
3. Click on Themes
   
   

   

4. Under the company themes select your newly deployed theme

If like me you are starting with an empty SharePoint site, with the new theme applied you will not see a lot changing, to make the site reflect the organization branding you need to continue to customize the site.

5. Get back to the change the look menu and this time click on Header
6. Select extended for the layout, this will allow you to apply a background image to the header related to the company branding
7. In the background section, I’m choosing the main color from the style guide as I want to make display the menu with this color. Adjust it to your needs and make sure you test your logo is desktop and mobile resolution with the background color you select.
8. Upload the background image for the header
9. Choose if you want to have the intranet site title visible for the users. As I’m branding the site according to the company style guide I’ll hide the site title to make the brand name standout in the header
10. Upload the logos from your branding style guide
    
11. Select the position of the logo in the header, as I’m not showing the title of the site I’m centering the logo in the header

At this point you should see your corporate branding applied to the SharePoint site, but you can still customize the footer to display the company logo and colors.

12. Get back to the change the look menu and this time click on Footer
13. Toggle it on to make it visible, the footer is a location where you will be able to show the colors of your branding, the logo and most importantly relevant links that are shown in all the pages of the site
14. Select the Layout, for this intranet project I’ll use the Simple layout that adds a small footer to the bottom of the page
15. Upload the company logo and select the color for the background of the footer, make sure you select a logo that is compatible with your design guidelines and is readable in this tiny section
16. If you want to display a text next to the logo, use the Display name text bot to add it
17. Click Save to apply all your changes
    

By following these steps you are able to make your brand visible in your intranet site, making it aligned with the company image and values while at the same time you are promoting your corporate culture.

Applying a corporate theme to the Microsoft 365 suite bar

As you probably noticed in the previous image after applying and configuring the branding of the modern site, the SharePoint suite bar remained with its original color and was not affected by any customization.

This bar and its branding is common to all the Microsoft 365 applications and it needs to be configured globally by the administrator, to create a corporate theme you should do the following:

1. Open the Microsoft 365 admin center
2. In the vertical menu expand the Settings and then click on Org settings
3. Once in the Org settings page, click on Organization profile and then Custom themes
   
   
4. Create a new theme or edit the default one if you want to make it available to all the users
5. Click in the Logos tab and upload the company logo, the size of the logo should be 200×48 pixels and cannot exceed 10kb
6. Click in the Colors tab and define the colors of your company, for the branding of this project I’ll use a secondary color for the color of the bar to make it look good with the primary color already defined in the SharePoint intranet site
   

   

7. Click Save to apply the new branding to all the Microsoft 365 applications

By now you should have a completely different SharePoint site ready to start creating the perfect intranet landing page according to ChatGPT and Bing. In the image below you can see how mine looks like.