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: Adding CSS to a Modern SharePoint page.

A recent submission to our BindTuning User Voice forum provided us with this great example of how we can help you make the most of our products to meet your needs.

Add Custom CSS to Web Parts

An 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 – RSS Feed web part. RSS Feed, one of 19+ web parts in our Build Feature, allows clients to gather multiple 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.

---

Suggest a feature

As a BindTuning client, you can submit feature requests, like this one above, by visiting BindTuning User Voice and if this is voted for by other users, we can include this little improvement on the Feed Web Part fairly quickly. Every month, our clients get critical and feature updates as part of their subscription plan.

Get started with CSS coding on Modern SharePoint with a free 30-day trial.

Get a completely new UX experience for customizing and branding both Classic and Modern SharePoint. Start a free 30-day trial today with unlimited customizations on unlimited themes! To set up your trial, schedule a quick meeting with our sales team.