13
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,915
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 ...
- 47.3k
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.4k
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.6k
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,755
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 SharePoint ...
- 45.4k
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
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
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,896
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 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 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,279
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.4k
4
votes
Accepted
JSON column formatting hover styling
I've been asking for hover styles for a long time. Unfortunately, as Michael Han_MSFT wrote in his answer the best you can get is the --hover classes.
Fortunately, you can get creative with them to ...
- 6,121
3
votes
Sharepoint 365 - Add Custom CSS to Modern Pages
Theres a modern script editor now that you can utilize: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor
Install it, add it to a page and you can add CSS ...
- 12.2k
3
votes
Hide Updated Pages list from left navigation wiki page but keep other list unhide
I am not a big fan of the separator line, I used this in Office 365 >> SharePoint Online to ditch it, put it either in your master page or per page in a content editor web-part:
<style type="text/...
- 408
3
votes
Accepted
Overwrite sharepoint css
Try to use !important as the following
<style>
.welcome-content
{
margin: 5px 0 20px -100px !important;
}
</style>
- 45.4k
3
votes
Accepted
Change input background color and text using Script Editor
Refer this -- https://api.jquery.com/attribute-equals-selector/
You can use selector this way for input button tag as well.
First change the background color as below:
$("input[value='Guardar']")....
- 2,963
3
votes
Why is it not working properly when I add JavaScript, HTML, and CSS code?
Try with the content editor or script editor webparts or else just create an HTML file, add that HTML file to your site assets, copy the link of the file, and place it in the content editor as shown ...
- 367
3
votes
Accepted
Css doesn't apply
Your main <div> should have the main class name of the SCSS module. In your case
<div class="${styles.slickCarousel}">
//whole webpart code resides inside this div
<div class="${...
- 293
3
votes
Responsive content to list view width in SharePoint 2013
With CSS it's hard to know for sure, but this might be a direction to find a solution. E.g. the CSS word wrap property: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
With a browser (I prefer ...
- 1,615
3
votes
Accepted
Sharepoint Custom Form : Modify font for description
You should be able to change the font of the field's description on the new or edit form with this css (this just changes the font color to red, so tweak it according to your needs):
<style>
....
- 3,706
3
votes
Accepted
CSS how to change font size only on a specific table not every tables on the page?
It should be
table.mmm th, table.mmm td
{ color: white; width: 100%; text-align: left; font-size: 12px; }
- 153
3
votes
How can I include the same JS and CSS files on multiple SharePoint Modern Page?
Application Customizer can be the better option to add script/css to Modern Page:
Inject Custom CSS on SharePoint Modern Pages using SPFx Extensions
SharePoint Online Branding Inject CSS
Script ...
- 2,583
3
votes
Accepted
SPFx SCSS - how do I reference third party classes along with my class to increase the specificity of my selector?
You can mix your SCSS classes with known classes by using the :global selector. So you should be able to modify your SCSS like this:
.myButton {
:global {
&.ui.button {
margin-top: 1em;...
- 6,121
2
votes
Accepted
How to dynamically display most visited links in a SharePoint Site to site visitors?
If you are using SharePoint 2010, you can use a Web Analytics web part to display most visited pages in Site on the page.
How to display most visited sites in SharePoint 2010 using Web Analytics web ...
- 6,661
Only top scored, non community-wiki answers of a minimum length are eligible