Creating personalized CSS for Sharepoint online site customization

Question

Creating personalized CSS for Sharepoint online site customization

While looking into supported and unsupported customization options and custom CSS for branding in SharePoint online, I found myself perplexed by the vague and confusing information provided by Microsoft's articles.

Specifically, I was studying the application of custom CSS through alternate CSS in a publishing site and came across this article:

https://msdn.microsoft.com/en-us/pnp_articles/portal-branding

Within this article, there is a point under "General Principles" that lacks clarity and detailed explanation.

General Principles

When it comes to branding portals in a SharePoint Online environment, developers should consider the following general principles:

The SharePoint Online service is constantly evolving. Updates to the service may impact the DOM structure of out-of-the-box pages and the content of out-of-the-box files (such as master pages). Developers need to be aware of this and avoid relying on unsupported customization methods (e.g. positioning of specific elements within the DOM structure of a page).

In the above point, it states: Developers need to avoid relying on unsupported customization methods, such as positioning specific elements within the DOM structure of a page. - But what does this really mean? Does this pertain only to custom CSS applied through alternate CSS URL on certain web part pages, where the CSS is limited to web part zones and out-of-the-box web parts within?

Can someone provide clarification? I am seeking an expert opinion. Does the aforementioned statement only relate to the Office 365 bar DOM and its CSS, or does it also apply to the DOM of out-of-the-box web part pages? If so, how? Could someone offer an example? I have written custom CSS and applied it through an alternate CSS URL, mostly changing the appearance of web part zones and out-of-the-box list view web parts within them (e.g. color, width, larger fonts, etc).

html css dom office365 sharepoint-online

Answer 1

Answer №1

This discussion doesn't seem to be directly related to SharePoint or the use of an external CSS stylesheet. Let's take a moment to analyze the language:

"Developers [...] should not rely on [...] position of specific element in DOM structure of the page"

It seems like Microsoft is cautioning against targeting elements based on the DOM structure using CSS or JavaScript, rather than using element ID or class. For example, the selector p + div targets any <div> element immediately following a <p> element.

Here's a scenario where it works:

p + div {
  color: red;
}

<p>Text</p>
<div id="div">More text</div>

And here's a scenario where it doesn't work:

p + div {
  color: red;
}

<p>Text</p>
<a>Link</a>
<div id="div">More text</div>

Simply shifting the position of the #div element in the DOM caused the selector to stop functioning. This seems to be the concern raised by Microsoft.

Instead, it may be safer to directly target the desired element using # for ID selection:

#div {
  color: red;
}

<p>Text</p>
<a>Link</a>
<div id="div">More text</div>

Of course, there will be instances where you may not have an ID for an element, in which case you can utilize class selectors, attribute selectors, or type selectors. Focus on specificity and adapt accordingly, aiming to minimize dependence on context as much as possible.

I hope this explanation is helpful! :)

Answer 2

This discussion doesn't seem to be directly related to SharePoint or the use of an external CSS stylesheet. Let's take a moment to analyze the language:

"Developers [...] should not rely on [...] position of specific element in DOM structure of the page"

It seems like Microsoft is cautioning against targeting elements based on the DOM structure using CSS or JavaScript, rather than using element ID or class. For example, the selector p + div targets any <div> element immediately following a <p> element.

Here's a scenario where it works:

p + div {
  color: red;
}

<p>Text</p>
<div id="div">More text</div>

And here's a scenario where it doesn't work:

p + div {
  color: red;
}

<p>Text</p>
<a>Link</a>
<div id="div">More text</div>

Simply shifting the position of the #div element in the DOM caused the selector to stop functioning. This seems to be the concern raised by Microsoft.

Instead, it may be safer to directly target the desired element using # for ID selection:

#div {
  color: red;
}

<p>Text</p>
<a>Link</a>
<div id="div">More text</div>

Of course, there will be instances where you may not have an ID for an element, in which case you can utilize class selectors, attribute selectors, or type selectors. Focus on specificity and adapt accordingly, aiming to minimize dependence on context as much as possible.

I hope this explanation is helpful! :)

Creating personalized CSS for Sharepoint online site customization

Answer №1

Similar questions

Enabling visibility of overflowing text in dynamically inserted divs without using scroll bars

Exploring the power of pseudo elements within Angular5

Navigate through the contents of a table featuring intricate colspan and rowspan elements, while keeping both headers and left columns in

Tips for keeping the hover effect of a sibling element in Material-UI

invoke two JavaScript functions without displaying any message

Convert Python strings into HTML JavaScript blocks using Jinja2

Issues with the OnChange function not properly functioning in duplicate input fields

Guide on making a custom page by substituting specific text with user-provided input based on an existing sample page

Adjust the height of the outer div automatically

Unable to transmit form information using HTML/JavaScript/Express Node application

Are inline styles being utilized in a Styled component?

Ensure each list item is directly aligned when swiping on a mobile device

What is the best way to center align and add an icon to the header in Ionic?

A clock for counting down on statically produced websites

How to specify columns when storing data in a CSV file using Scrapy

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

Maintain the active menu open when navigating to a different page on the website

Eliminate borders for text input in Bootstrap 3 styling

Empty gaps separating two divs nested within another div within a div (unable to function)

Div that scrolls independently without affecting the position of other elements