Custom section layouts and styling in SharePoint Online

Question

Hello,

I have a question about SharePoint Online (SPO). I want to add more flexible layout changes and customization to SPO (like being able to specify section split ratios or change image proportions).

Is it possible to make such changes directly to the source using JS and CSS through SPFx? If possible, I'd like to know specifically what methods can achieve this. (I've researched but honestly haven't been able to understand it well.)

Please note that I'm not including questions about risks related to keeping up with SPO updates in this inquiry - I just want to know if it's possible, and if so, what methods can be used.

I apologize if the translation isn't perfect, but please help me with this.

Answer 1

In the SharePoint modern page, if you want to customize section layout and styling by injecting CSS codes, you need to develop modern script editor web part in the site collection, then add CSS codes in the modern script editor web part.

First, download a compiled version from here, then enable this app and add it to all sites.

Go to the site collection, add the modern script editor web part on the page, add CSS codes in the modern script editor web part.

Reference:
https://sharepoint.handsontek.net/2023/03/15/use-script-editor-modern-sharepoint-sites/

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.