Changing Faceted Navigation Theme

Hello!

I am working on a custom theme for a website and was wondering if it was possible to customize the faceted navigation colours (for example, alphabetic search letter links and other links). I wanted to change to a new colour but the faceted navigation is using the default blue from the barceloneta theme. I tried to find a LESS file where I could change the colour, but didn't find anything.
Can someone please help me with this problem?

Thank you in advance

Hi Joao – you don’t say where you’ve looked yet, so if you aren’t familiar with Plone theming you might start by having a look through Theming — Plone Documentation v5.2 or Plone Theming — Plone Training 2021 documentation to understand how theming works.

In the end, a CSS file is sent to the visitors of your site.
Less will be "converted" to CSS at one point.

So, if your theme's CSS file (or in the LESS / SASS or whatever that 'makes the CSS' you can add your overrides). As long as you are 'more specific, your CSS will be used.

Alternative 1 (best):
If the css of a div in the add-on is for example
. someclass

An entry in your css will be used if it is like
div.someclass

Alternative approach (try to use the other if you can):
If you can not figure out why the colors does not change, this will usually work

div.someclass { color: red !important; }

Hi!
I have been working TTW, so I already customized several parts such as the header and footer in the appropriate less files and everything worked. But in the specific case of faceted navigation I don't seem to be able to customize because the css is inside the file "faceted-view.min.css" and I don't know where to find it

Hi!
Thank your for your answer. However, the css of the faceted-navigation is inside the file "faceted-view.min.css" which I can't find, thus I don't know if it is possible to overwrite it

does this help?

You don't need to overwrite the file itself. You can overwrite the CSS.

In other words: In the CSS of your theme, or in the (new) control panel for 'extra css', add css 'with more specific definition'

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

UPDATE: Adding the CSS seen here to the (new) plone custom css control panel should work:

1 Like

You are right, I was already acquainted with the concept of specificity and think I may have found a solution. Thank you very much!

And thank you for the video, also very helpful!

Plone Foundation Code of Conduct