Changing appearance of web parts in SharePoint 2013 using CSS

csssharepoint-2013

I have built a site in SharePoint and would now like to change the appearance of web parts (document libraries) using CSS.

Whenever I add the following CSS code:

<style type="text/css">
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
background-color: darkblue; 
font-size: 18px;   
font-weight: bold; 
color: white;
padding: 5px 5px;}
</style>

…I find that the preview window in my web browser shows a change has taken place.
enter image description here

Unfortunately, when I apply the changes and view the page again, the web part has reverted to the default appearance.

enter image description here

Does anyone have any ideas what could be causing this to happen?

Best Answer

What is likely to be happening is that wherever you are loading that CSS, it is being overridden by the standard CSS.

You can try adding the !important tag to the end of the entry. You should check out the code using web developer tools in the browser to make sure that the CSS is actually being loaded and not dropped by SharePoint and find out what might be taking preference to your code. Using Firefox with the Firebug addin should assist greatly.

Let us know:

  • Exactly what webpart you are trying to change
  • How & where you are inserting the CSS
  • What page layout and master page you are using
Related Question