12
votes
Accepted
List of reusable CSS classes for Modern UI
I have extracted all Modern SharePoint CSS classess and made it available as a page. You can see all available classes and see what it looks like when applied to an HTML element. Enjoy!
- 9,752
7
votes
Accepted
Adding CSS Reference on Site Page
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 ...
- 45.3k
7
votes
Accepted
Sharepoint 365 - Add Custom CSS to Modern Pages
Probably not the answer you're looking for, but in the interest of letting you know that you're not crazy and possibly saving you some cycles: modern pages don't inherit from a master page that we ...
- 711
7
votes
How can I include the same JS and CSS files on multiple SharePoint Modern Page?
I think best way to include JS and CSS files into a SharePoint Modern page is using SPFx Application Customizer.
SPFx application customizer will be loaded on all existing and newly created modern ...
- 45.8k
6
votes
Accepted
Can i rearrange my Key Filter for a wiki page to appears on the top of the page instead of being displayed on the left hand side of the screen
I did some tests myself and it should be pretty straight forward.
You can use a local jQuery reference instead of a CDN.
This hides the Key filter Div and then moves the Div containg the filter to ...
- 9,831
6
votes
Accepted
Styling Sharepoint 2013 Quick Launch Headers
Try the below CSS in Script Editor Web Part
<style>
.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > LI > .ms-core-listMenu-item
{
font-weight:bold;
}
</style>
[OutPut]
...
- 45.3k
6
votes
Accepted
Modifying page layout TD width
The ordering rules of CSS is complex to start with, and to use !important makes it even harder. You can read more about it in the accepted answer to the question "In which order do CSS stylesheets ...
- 25.5k
5
votes
SharePoint 2010. The opportunity to edit the code
You will need Full Control permission level to be able to edit a MasterPage in SharePoint Designer 2010.
Reference: User permissions and permission levels (SharePoint Foundation 2010)
- 25.5k
5
votes
Change SharePoint 2016 site header
I added the following CSS to the "Site Setting > Look and Feel > Master Page" and in there I updated "Alternate CSS URL" to point to my CSS file:
.o365cs-nav-appTitle {
display: none !important;
}...
- 319
5
votes
Quick Launch selected item (which get bold font weight) is being wrongly determined
This is as per the design.
By default, links in quick launch does not accept query string parameters. when applying the 'selected' style it matches only the url component without parameters.
So all ...
5
votes
Accepted
Responsive content to list view width in SharePoint 2013
As Martijn was saying, CSS is fairly likely to work. Rather than using the .ms-forceWrap etc, try using .TextFieldClass { word-wrap: break-word !important; }. The !important component overrides any ...
- 1,745
5
votes
Accepted
CSS3 styles not getting applied
Is the SharePoint doesn't support CSS3, SVG
In short, The SharePoint support HTML5, CSS3, Bootstrap, Jquery, and SVG.
Please check
The Power of HTML5 and CSS3 in SharePoint 2013
Changing ...
- 45.3k
5
votes
Accepted
Hide element using css for a modern page
If you don't need left navigation , I would request you to use Communication site template,in this there has no left navigation.
Now , for your question the exact answer is ,there has no other way ...
- 122
4
votes
Accepted
Display datepicker on top of the forms's modal dialog
I did try to add 100 pixels to the modal dialogs height through jQuery once one of the calendar images are clicked (to open the datepicker) and then disable the jQuery to prevent any more height to be ...
- 9,831
4
votes
Accepted
Add custom.css to SharePoint 2016 masterpage
Regardless what's the way that you are using, but the following steps should be working in SharePoint 2016
Upload your custom CSS file to Style Library or Site Assets
Go to site setting > Look and ...
- 45.3k
4
votes
Hide Updated Pages list from left navigation wiki page but keep other list unhide
That is right - now you are hiding entire left hand navigation (#DeltaPlaceHolderLeftNavBar).
You can use this CSS to hide only "Updated Pages" section:
<style type="text/css">
.ms-...
- 172
4
votes
Accepted
Change left menu color
To change the background header in the left navigation try to add the following CSS to a file with CSS extension
.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > LI > .ms-core-...
- 45.3k
4
votes
SharePoint 2013 Show/Hide Form Fields
Yes you can show and hide theses fields on demand based on your choice field selected value via Jquery without using SharePoint Designer by doing the following :
Open your new form via the browser.
...
- 45.3k
4
votes
Accepted
How to change hover panel position
You should be able to override the element using some CSS. However, as the style is inside the HTML you would need to use the !important parameter to override the inline style.
.ms-srch-hover-...
- 9,831
4
votes
Accepted
Change the SharePoint 2013 default radio button and check box color
Each radio/checkbox button is input control with radio and checkbox type, so try to do the following:
Create a CSS file,
Add the below CSS
Style:
input[type="radio"]
{
background: red !...
- 45.3k
4
votes
Remove duplicate links from my navigation Breadcrumb inside my Enterprise wiki site collection
If you are trying to hide the element by just checking its text, then this jQuery code should work. I haven't tested it yet.
var $duplicateItem = $('#suitBarRight > span > span:nth-child(3)')
...
- 2,307
4
votes
How to put a reference for a css in aspx page layout in SharePoint 2016
The better way of loading CSS in SharePoint world is always using CssRegistration tags. You can always specify the order of script load, conditional script load, also when using same master page at ...
- 2,970
4
votes
Why is it not working properly when I add JavaScript, HTML, and CSS code?
Just try with content editor web part by editing the HTML Source `
<html>
<head>
<style>
div.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
...
- 1,722
4
votes
Sharepoint 365 - Add Custom CSS to Modern Pages
You could investigate writing a SharePoint Framework Application Customizer:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions
...
- 41
4
votes
Sharepoint 365 - Add Custom CSS to Modern Pages
Although this method is NOT supported by Microsoft, as Joel mentioned, you can build an SPFx Extension (application customizer). Not supported because Microsoft can change the DOM and/or class name, ...
- 81
4
votes
SharePoint Online: Change color of Modern QuickLinks
Deploy react-script-editor SPFx web part to your tenant, then, you could add CSS/JavaScript for this requirement.
For example:
<style type="text/css">
/*match by label, there is a blank*/
...
- 4,251
4
votes
Accepted
Is it possible to style a web part title?
In classic experience, If you already enabled the custom scripts, you can add script editor web part with the below CSS:
<style>
.ms-WPTitle {font-weight:Bold !important; }
</style>
...
- 45.3k
3
votes
Cursor moves to next line in the bullets list or number list SP 2013
This appears to be an issue with Chrome. I had the same problem using the standard content editor webpart in SharePoint 2013, so I tested it on three different servers, and the behavior was exactly ...
- 41
3
votes
Accepted
Add custom Css file to root site and subsites
If your site is publishing site follow the mentioned steps below:
Upload the CSS file to your style library then Go to Site Settings > Look and Feel > Design Manager > Publish and Apply design > ...
- 45.3k
Only top scored, non community-wiki answers of a minimum length are eligible