0

Through the webpart I inject my own CSS into the Sharepoint Online site. I can do a lot to site branding this way, but I'm looking for a better way to target the sections. What I do now is that I am targeting them by their order:

.CanvasZone:nth-of-type(2) {
  // styles for second section of the page
}

But this way I can't change order of sections without changing CSS.

Is it possible to assign new CSS classes for selected sections without using some JS-injecting webparts? If not, are there any SPFX webparts or extensions to achieve this goal by extending configuration fields for sections OR by adding whole new section type?

Improve this question
2
  • what do you mean by section here?
    – Rajat Sahani
    Dec 1, 2022 at 8:56
  • @RajatSahani, when I edit a page, I can add areas called "sections" which are containers for webparts and can organize them in layouts. I can choose from many section layouts: one column, two column, one-third left, vertical section. "Section" is a name used formally in SharePoint documentation.
    – Grzegorz Adam Kowalski
    Dec 1, 2022 at 23:33

1 Answer 1

Reset to default
0

For the modern experience, using custom CSS to override SharePoint Online's out-of-the-box styles is not supported:

Customizing "modern" site pages

Please use custom themes to customise the modern experience:

SharePoint site theming

Improve this answer
2
  • So called "custom themes" are an extremely limited way to customise modern SPO pages. Older Sharepoint versions didn't have such restrictions and my employer expects me to mantain old, artistic level of company branding on SP pages.
    – Grzegorz Adam Kowalski
    Dec 6, 2022 at 16:15
  • I would check out the SharePoint lookbook, there are loads of beautiful examples of SharePoint sites on there which you can achieve via configuration/custom themes: lookbook.microsoft.com for now, I would stick to the supported customisation methods (in the first link from my answer)
    – Callum Crowley
    Dec 6, 2022 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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