Team sites are great and offer many ways to share & collaborate. But sometimes we miss some of the UI features of the Communication sites.

One of the things I don’t like in the team sites is how they look in large/high resolution screens. Looks like a part of the screen is not used…

Team site

In communication sites, things look better in large screen/resolutions:

Communication site

How to change the look of your team site?

We all know the OOB options when editing pages: sections, section layouts, webparts, header configuration, etc. We can also hide the Quick Lauch menu in Site settings > Navigation Elements and remove the Enable Quick Launch option.

In this post we show how to manipulate some styles to make a team site look like (kind of…) a communication site.

A page contains one or more sections, that is the place where we add the webparts. In communication sites there is a section layout called “full-width column” that will have a 100% width in the page. We can only use webparts that have the Full Bleed property (more info here) in this section layout. In team sites we don’t have this section layout available.

In the following example we do some style manipulation and apply the following:

  • Make the first section of the page a 100% width section, without any margins;
  • Make all the other sections more “wide”/remove the width limit of 1284px and centered in the page
  • Hide the loading element of the quick navigation menu

With these changes we can make out team site look like:

Team site with Hero webpart in first section
Team site with Image webpart in first section

Team site with Quick Launch Menu and with Image webpart in first section

In mobile/small screens the page will look as always, since we are not changing this.

You can find an SPFx Extension sample that deploys this css into the site collection in our GitHub at https://github.com/devscopeninjas/dvs-spfx-extensions.

See it in action in the gif:

This will affect all site pages in your team site, so if you need to just to apply this changes in a specific page, you can reuse this and adapt it to your own needs.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: