1

I am using O365. I created a custom theme and a custom spcolor file. Is it possible to set a background color in the webpart titles? Something like this:

enter image description here I try something like this in the developer toolbar and works fine. But the target is now to implement it in my custom theme/spcolor file.

#DeltaPlaceHolderMain .ms-webpart-chrome-title {
    background-color: #008ad9;
}
1

You would need to create a CSS file and attach it to the master page (if you want this globally all over the site to be the same) or you can create a script editor webpart on a specific page and put the CSS code in there. Put the code between <style></style> tags.

You can use selectors like these:

.ms-webpart-titleText.ms-webpart-titleText, 
.ms-webpart-titleText a {
    background-color: #4daea9 !important;
}
.ms-webpart-titleText.ms-webpart-titleText, 
.ms-webpart-titleText a:hover {     
    background-color: #FFF !important;
}
.s4-wpcell > .ms-webpart-chrome, 
.s4-wpActive > .ms-webpart-chrome {
    border-color: transparent !important;
}

Notice that in SP, you would sometimes need to write !important behind a value in order to make it work.

  • So the answer is that it is not possible in a custom theme/spcolor file? A workaround is to implement this in a custom css file or script editor webpart. – Ola Jul 7 '17 at 11:06
  • In themes, you can only set the basic font, colors, accents, background picture and choose Oslo/Seattle masterpage. I wouldn't call using CSS a workaround. It is the only and best way if you want to go beyond basic styling and branding. – Murphy Jul 10 '17 at 7:43
0

You can create a copy of your masterpage and rename, using Sharepoint Design and edit her. Add a new CSS file reference, like this:

        <sharepoint:cssregistration name="/sites/dev/siteassets/content/layout_cliente.css" after="corev4.css" runat="server"/>

In your CSS file, you need to add this code: .ms-webpart-chrome-title { background-color: #efefef !important; }

you need to add !important in some properties.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.