SharePoint CSS Examples

In this SharePoint tutorial, we will discuss few SharePoint CSS examples.

We will see below SharePoint css and javascript examples:

• SharePoint hide approve/reject button
• Redirect to a different page after adding new list items in SharePoint
• SharePoint hide edit item ribbon
• Color code SharePoint list rows

We can use the same SharePoint CSS examples in SharePoint 2013/2016/2019 also. Finally, I will show you, some of the best practices of how to work in CSS in SharePoint.

SharePoint CSS Examples

Below are a few SharePoint CSS examples:

SharePoint hide approve/reject button

In this section, we will discuss how to hide the approve/reject button in SharePoint from the ribbon in SharePoint Online/2013/2016.

Below is the CSS code which you can add using a script editor web part, in page where you have to hide the approve/reject button. Maybe in AllItems, EditForm page in SharePoint.

By default, in the SharePoint list you can see the Approve/Reject button like below:

<style type="text/css">    
a[id="Ribbon.ListItem.Workflow.Moderate-Large"]  
{  
display:none;  
}              
</style>

Once you insert the code, you can see the Approve/Reject button will disappear from the ribbon in the SharePoint list.

SharePoint hide edit item ribbon

Now, we will see how can we hide edit item from ribbon in the SharePoint list. The code will work in SharePoint Online/2013/2016.

Below is the SharePoint CSS code which you can add inside a script editor page in SharePoint list.

<style type="text/css">    
a[id="Ribbon.ListForm.Display.Manage.EditItem-Large"]  
{  
display:none;  
}              
</style> 

Color code SharePoint list rows

Now this SharePoint CSS example, we will see color code SharePoint list rows. We will see how to give alternate row color in the SharePoint list.

<style type="text/css">  
  
table.ms-formtable tr:nth-child(even) {background: #d3d3d3;}  
table.ms-formtable tr:nth-child(odd) {background: #e1eaf4;}  
table td.ms-formlabel,td.ms-formbody {font-weight: bold}  
table td .ms-standardheader {font-weight: bold}  
  
</style>

The above code, you can add inside a script editor web part. And you can see how the alternate row color will appear like below:

CSS best practices for SharePoint

Below are some CSS best practices to follow while using SharePoint.

Validation:
Validating your CSS is always important. This is to make sure that your CSS is error-free and is interpreted the right way in all browsers.
You can also validate through http://jigsaw.w3.org/css-validator/ URL.

Comments:
Commenting code is always a best practice while working with any language. So it is always advertisable to give a comment in CSS. You can comment like below:
/this is css style comment/

Naming:
Naming is very much important. Naming classes according to their function rather than what they will look like is a best practice and the name should be meaningful.

Compression:
It is a best practice to remove the white space from your .css fi les before you put the fi les in production. Smaller .css fi les will make your site load faster in the browser. You can use a CSS compressor like the one at the following URL to automatically remove the white space for you: http://cleancss.com.

SharePoint designer helps us to create custom CSS files.

You may like the following SharePoint list view tutorials:

• SharePoint jslink Examples
• SharePoint Customization Examples
• SharePoint modern list view customization example
• Create SharePoint list view
• How to hide document library in SharePoint Online
• SharePoint Online calendar web part
• How to add parent site navigation to subsite in SharePoint?

Here in these SharePoint CSS examples, we saw, how to hide approve/reject button from the ribbon in the SharePoint list.

We also discussed Color code SharePoint list rows, how we can give alternative row colors in SharePoint list views.