I work with Sharepoint 2013.
I want to know how to customize refinement web part with CSS?
I want e.g a background color or the refiners in bold.
What is the best solution?
2 Answers
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?– JayceCommented Jul 9, 2014 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. Commented Jul 9, 2014 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.
