Wednesday, December 30, 2015

How to apply css to a web part in share point 2013/Office 365


How to apply css to a particular web part in share point 2013/ office 365 using share point designer 2013

you need to find a web part id in order to apply css to that particular web part.

open that page right click on the page select View page source

search for MSOZoneCell_WebPartWPQ and there will be an id associated with it. for example,

MSOZoneCell_WebPartWPQ2, MSOZoneCell_WebPartWPQ3 etc so lets consider you want to apply css to the web part having id MSOZoneCell_WebPartWPQ2


Now, edit that page with share point designer 2013





Open page with advanced mode.




search for this code:



after

.s4-ca{margin-left:0px;
}

copy paste following code (remember, you can always change it as per your need !)

#MSOZoneCell_WebPartWPQ2 .ms-webpart-chrome-title
{
background: rgba(73,155,234,1);
background: -moz-linear-gradient(left, rgba(73,155,234,1) 0%,
rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%,
rgba(73,155,234,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%,
rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(255,255,255,1)
100%);
background: -ms-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(255,255,255,1)
100%);
background: linear-gradient(to right, rgba(73,155,234,1) 0%, rgba(255,255,255,1)
100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea',
endColorstr='#ffffff', GradientType=1 );
font-size: 15px;  
font-weight: bold;
color: white;
padding: 5px 5px;
border: 0.1em yellow;
 border-top-left-radius: 1em;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
display:block;
//your css styling goes here
}
save and click on preview in browser . you are done !

here is the result-