Adding CSS Reference on Site Page

Question

So I have created a Site Page that has the "New Experience" look and I would like to change its style a little. Nothing major, just the height, width, color, etc. However, I can not seem to figure it out.

For example, I tried to change the height of the .pageHeader to a smaller value.

.pageHeader{ height: 150px !important } //for example of CSS in file

Here is a reference image of the page i'm trying to change

I tried adding

<link href="../SiteAssets/file.css" rel="stylesheet" type="text/css">

to the .aspx page using SharePoint Designer and it didn't work.

---

I also tried adding

<SharePoint:CssRegistration ID="CssRegistration" Name="SiteAssets/file.css" runat="server" />

to the .aspx page and it didn't work

---

I tried to use the "Embed" feature to add the CSS; however, it complains and says,

This embed code doesn't seem to work. We only support iframe based embeds.

Question:

How can I add custom CSS to this type page? I can't seem to figure it out and I'm not sure exactly why the page will not load the file. Is this even possible?

Answer 1

Unfortunately, in Modern Experience, you can't customize the page to add JS or custom CSS!

Supported customizations for Modern Experience Page

• Custom branding like custom themes

Note: Custom Themes is the available method to customize the modern page themes otherwise you will need to switch to Classic Experience to can use custom CSS/JS and customize your page as you did.

• Adding "modern" pages programmatically
• Adding, deleting, updating client side web parts on "modern" pages

Unsupported customizations for Modern Experience Page

• Custom master pages
• More extensive branding will be supported later using alternative options
• Custom page templates (layout templates) and Alternative layouts
• Adding "classic" web parts on "modern" pages
• Custom CSS via AlternateCSSUrl web property
• Custom JavaScript embedded via User Custom Actions

For more details check

• Customizing "modern" site pages
• Add javascript code to Document Library default view

Answer 2

We can add JS & CSS to modern pages only through SharePoint Framework. You can develop an SPFx extension to add your custom CSS definitions to the page.

I believe this is still in Developer Preview. More details can be found here - https://dev.office.com/blogs/announcing-availability-of-sharepoint-framework-extensions-developer-preview