The Modern experience is great, but sometimes it is the little things that trip you up. Let’s take a look at how we solved a real-life problem for one of our clients - how to add custom CSS to a Modern SharePoint page.

Add Custom CSS to Web Parts

A client in the education field in the Netherlands recently reached out to us for help customizing one of the web parts included in their BindTuning Build subscription plan. The RSS Feed web part is one of 19+ web parts in our Build Feature. It allows clients to gather multiple news feeds on a single page and control how those external feeds appear on the page.

This client had a very specific, multi-line layout for how they wanted their feeds to display. While their specific needs fell outside the scope of the product, our support team was there to assist them to find an immediate solution and in this particular case, custom CSS script could be quickly added to the page to extend the functionality of the web part to meet their needs.

Let’s walk through how to add CSS code to add multiple lines to the BindTuning RSS Feed web part:

As we explained earlier, this code was for a client with a very defined layout. But don't despair. You can similarly add your own CSS code to both Classic and Modern environments. Below, we show you the steps and explain how and where you can do it.

How to add CSS code to Classic SharePoint

If you are using the Classic Experience, you need to change the Alternate CSS URL. How? See instructions below. To link this file to your site collection:

• Go to Site Settings
• Select Master Page
• Expand the Alternate CSS URL option
• Add the reference to the customStyle.css
• Refresh your browser using CTRL + F5

It’s also possible to add a script editor/content editor in the page to include those extra styles on the page. Follow these steps to add this little CSS code that will allow you to have the full summary displayed on the RSS Feed Web Part.

How to add CSS code to Modern SharePoint

If you are using the Modern Experience, well, it is a bit more difficult. You cannot insert custom CSS on a Modern page.

We understand that having a RSS Feed is a great add to your SharePoint pages, and for that reason we have a solution to add custom CSS on a Modern Site. With BindTuning Themes you will be able to have a custom web part that allows you to add CSS to it. BindTuning Themes are part of our Design Feature and are powerful for branding your intranet. Each theme features a very easy interface that enables you to quickly add custom CSS to any page – Classic or Modern.

The newly revamped settings panel on all BindTuning Themes feature a text box that can be maximized for custom CSS to not only control the look of the page, but to also alter the look of the web parts on the page as well. Go ahead, add entire JS and CSS files.

The input fields for custom JS and CSS scripts are maximizable, meaning you can use the entire real estate of your screen while coding. You can even load an entire framework if you wish to do so. The scripts will load synchronously, one after the other. Custom scripts (code added to the text area) load after the individual javascript files are added in the Additional Resources section. This way you’ll, for example, be able to use resources from “file X” inside “file Y” as well as within the custom scripts field itself.

If you’re a developer, you can change how your BindTuning RSS Feed web part appears on the page by adding those styles to your application. If you have a custom Web Part that allows you to inject HTML/CSS code on your Modern pages, you can also add this code to change the BindTuning RSS Feed web part.

Get started with CSS coding on Modern SharePoint