6

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

enter image description here

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?

Improve this question
7

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

Improve this answer
2
  • Thanks for the information. It kind of irritates me that Microsoft wouldn't allow for JS and CSS customization knowing how many of it customers use these features. Anyways, how exactly can I revert back to the Classic Experience for my Site Pages? I can't seem to find the option to change it.
    – Jacob Caldwell
    Jul 21 '17 at 15:11
  • @JacobCaldwell the option is available for list and library but for team site to switch back to Classic experience, you should use PowerShell and CSOM as mentioned at learningsharepoint.com/2016/07/28/… Please don't hesitate to inform me if you need further information :)
    – Mohamed El-Qassas MVP ♦
    Jul 21 '17 at 17:40
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.