I work with Sharepoint 2013.

I want to know how to customize refinement web part with CSS?

enter image description here

I want e.g a background color or the refiners in bold.

What is the best solution?


You need to inspect the css classes that you like to customise using the IE Developer Tools and then add a custom style sheet to your search center.

For a more end user approach you can use a tool such as stylebot that is a google chrome extension. With this tool you can pick any element of any web site and apply a custom style too. The style will first be rendered on your local client. So you are the only one who sees the changes. Later on you can export the CSS and store it in SharePoint.

You will also find a good article on how to apply the style sheet. SharePoint Branding 101

  • I created a .css file, I found the classes/id and I overrided the styles. But I added the link in Control_Refinement.html of my .css file. Is it a good solution because I modify a sharepoint file? – Jayce Jul 9 '14 at 10:47
  • Better add it in a general css. If the refiner are not on the page nothing happens. If they are your style will be applied. It is always better to keep style adoptions in a central place. – Stefan Bauer Jul 9 '14 at 11:58

If you want to make style changes to an individual page on your SharePoint site and don’t want to go to the extent of making changes to master pages, existing style sheets etc. (which I don’t recommend), you can add a hidden Content Editor Web Part to the page in question and add your styles to it wrapped in a tag.

You can use browser development tools such as FireBug to determine the classes/id of the elements you want to override the styles for.

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.