Unable to customize the appearance in SharePoint Online

I've been experimenting with various approaches to implement custom CSS on our SharePoint Online site, but unfortunately, none have been successful. Here is a summary of what I've attempted:

  1. Created a custom master page using the Seattle template and referenced the CSS under corev15.css as shown below:
    <!--SPM:<SharePoint:CssRegistration  Name="https://oursharepointsite.com/sites/new/SiteAssets/CSS/Custom.css?v=3"  runat="server" After="corev15.css"/>-->
  2. Tested different locations for the custom.css file, such as the Style Library folder.
  3. Attempted using an alternate URL for CSS.
  4. Added "!important" to all rules in the CSS file (although I am aware this is not recommended).
  5. Inserted web parts onto a page and tried incorporating CSS there (via Script Editor), but saw no results. I even experimented with applying styling using JavaScript, yet still no impact. Even when I added custom buttons and paragraphs with specific ID's and classes, I was unable to style them as intended.
  6. Logged in as a Global Administrator and made changes as indicated above.

The only method that seems to work is inline styling, which is clearly not practical. Despite scouring multiple forums, I have yet to find a solution to my issue.

csssharepoint-online

Answer №1

If your site isn't completely classic, it's time to explore new avenues for customization.

Traditional methods won't work for the Modern experience. To change styling in the new Modern look, utilize the Theme capability or SPFx Extensions.

Learn more about the new theming options here: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview

For creating themes, check out this handy tool: https://developer.microsoft.com/en-us/fabric#/styles/themegenerator

Get started with Modern customization by visiting this site:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting CSS colors from RGBA to hexadecimal format: A step-by-step guide

Within my selenium code, I am faced with the challenge of verifying that the background color code is #192856. However, when obtaining the CSS property of the element, it returns the color in rgba format. How can I retrieve the values in hex format? quick ...

c#cssselenium-webdrivercolors

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312 Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby After imple ...

javascriptcssreactjsmaterial-ui

What is the most effective method for integrating additional CSS/JS libraries into a GitHub repository?

I would like to integrate FontAwesome, Bulma, jquery, and jquery-ui into one of my Github repositories for the front-end section. Currently, I am including the JS files or CSS files from these projects in my own JS/CSS folders, but I believe there might ...

javascriptjquerycssgitgithub

Determine the number of inputs within a div and increment each one by +1 using jQuery

I am currently working on developing a slider and have successfully completed most parts of it, except for the challenge of counting input fields using jQuery and assigning an incremented number to each of them upon action completion. On my slide, I have ...

javascriptphpjqueryhtmlcss

Challenges with formatting the <legend> tag and grid setup in bootstrap 4

My intention was for it to be displayed like this: But unfortunately, it is appearing like this instead: You can see that the word "fruit" is misaligned. I am currently using Bootstrap 4 alpha v6. Here is the code snippet: <fieldset class="form- ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Consistent HTML spacing problem across all web browsers

After creating this sample gallery, I noticed some unwanted vertical spacing between the images that I am looking to eliminate. Despite my efforts, I couldn't find a way to do so: ...

javascriptjqueryhtmlcss

Include a stylesheet as a prop when rendering a functional component

Using Next.js, React, Styled JSX, and Postcss, I encountered an issue while trying to style an imported component for a specific page. Since the stylesheets are generated for a specific component at render time, I attempted to include custom styles for the ...

javascriptcssreactjsjsxnext.js

Inserting pictures onto Bootstrap SVGs

Currently working on a website using Bootstrap 5 and incorporating an element from BS5 templates: <div class="col" data-aos="fade-up" data-aos-delay="200"> <div class="card shadow-sm"> ...

htmlcsstwitter-bootstrapsvgbootstrap-5

Background color of a scrolling overflow-x panel-primary in Bootstrap

Seeking help with a CSS issue related to a Bootstrap panel. When the overflow-x property is activated, the blue background color of the panel-heading transitions to white instead of staying blue. Any suggestions on how to maintain the blue color while keep ...

csstwitter-bootstrap

JS/Electron Insert items individually

Apologies if my explanation is unclear. I have a function (shown below) that parses a JSON file and creates a grid of 1550 items. How can I add them one by one instead of all at once? Loading all 1500 items together is taking too long. function addItem () ...

javascripthtmlcssnode.jselectron

Incorrect .offset().top calculation detected

Within a webpage, I have multiple sections. Positioned between the first and second section is a navbar menu. As the user scrolls down and the navbar reaches the top of the page, a function is triggered to fix it in place at the top. While this functionali ...

javascriptjqueryhtmlcss

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

javascriptcss

spinning div content in a manner reminiscent of a roulette wheel

I am looking to create a roulette game that randomly selects numbers and displays them. Initially, I attempted to use images and backgroundOffset, but it caused significant lagging issues and difficulty in checking the rolled number. Therefore, I have impl ...

javascripthtmlcss

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

I am in the process of creating a navbar that includes select, input, and button elements. Below is the code I have written: <nav class="navbar sticky-top navbar-light p-0"> <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupp ...

csstwitter-bootstrapbootstrap-4

The button icon fails to display correctly on the iPhone X, despite appearing correctly in the DevTools

Recently, I designed a "Scroll to top" button for my application. During testing using Chrome and Safari DevTools, the button appeared correctly on all devices: https://i.sstatic.net/Apb8I.png However, upon opening it on an iPhone X, I noticed that the i ...

htmlcssiosangularmobile

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...

javascriptphpcsstwitter-bootstrapsymfony

Is it essential to have the bootstrap4 column 12 DIV for optimal performance on mobile devices?

Is it necessary to use bootstrap4 DIV col-12 for mobile devices? Even if a DIV takes up full width on mobile without col-12, why is it still recommended to include it? ...

csshtmltwitter-bootstrapbootstrap-4

Transform the infoBox into a jQuery dialog modal window

In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively? Below is the code snippet that includes the implementat ...

javascriptjquerycssjquery-uijquery-ui-dialog

Tips for adding a class to an SVG when clicked

I want to make an SVG change color to white when clicked and its container (icon_container) to change to blue. How can I achieve this? Below is the code snippet: state = { active: false, }; click = () => { this.setState({active: !this.state.active ...

csssvg