Adding CSS Reference on Site Page
-
28-12-2020 - |
Pregunta
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?
Solución
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
Otros consejos
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