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'
UPDATE: Adding the CSS seen here to the (new) plone custom css control panel should work:
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!