Gravatar for nemmett@financialforce.com

Question by nick emmett, Apr 13, 2018 2:23 PM

Styling the result list, file type icons

I managed to get different icons displaying dependent on which type of result comes up, thanks to @gminero :)

Now I want to style them - when I say style I just want to change the colour to match our corporate brand. I read here: https://docs.coveo.com/en/292/javascript-search-framework/customizing-svg-icons that this may be able to be done through css so checked out the console in Chrome and changed the colours there, however, when I add the css to my custom css sheet in Salesforce's Community Builder, it has no effect! I'm assuming I'm missing something, somewhere.

Original:

Target:

An example, I added the lines:

.coveo-sprites-salesforce-standard-post {
    background-color: #00a7ce;
}
1 Reply
Gravatar for gminero@coveo.com

Answer by gminero, Apr 13, 2018 2:37 PM

In your custom component, you can fetch the appropariate CSS class and scope accordingly in the Lightning Stylesheet (file) as follows:

.THIS span.coveo-sprites-salesforce-standard-article-small{
    background-color: red;
}

Notice the change in color of my icon:

Gravatar for nemmett@financialforce.com

Comment by nick emmett, Apr 13, 2018 2:51 PM

Nailed it! sorted - thanks so much @gminero

Ask a question