Styling

This is for:

Developer

In this article

Customizing SVG icons

To visually change how the Coveo JavaScript Search Framework is displayed, you need to style it using standard CSS rules (see CSS documentation).

The Coveo JavaScript Search Framework doesn’t offer any special way to change its styling. However, the following tips can help you when adding custom style rules:

All Coveo components have a class that starts with Coveo followed by the component name. You can find a list of all the components in the JavaScript Search reference documentation (see Coveo JavaScript Search Framework - Reference Documentation).
The default styling is available in the JavaScript Search GitHub project, in the sass file (see Coveo JavaScript Search UI Framework). The CSS is written using Sass (see Sass).
You’re strongly discouraged from changing the css files that come out of the box with the Coveo JavaScript Search Framework, as they can be overwritten when upgrading. Instead, you’re encouraged to create your own files and reference them in your search page.

As a leading practice, you should add a class to your CoveoSearchInterface component:

<body id="search" class='CoveoSearchInterface MyCustomClass'>

This allows you to be more precise when adding CSS rules:

.MyCustomClass.CoveoSearchInterface {
  /*
    This CSS rule will only be applied to one specific CoveoSearchInterface.
    Also, since it's narrower, it will easily override the default CoveoSearchInterface css.
  */
}
.MyCustomClass .CoveoFacet {
  /*
    The same principle applies to all the Coveo components inside that search interface.
  */
}

Customizing SVG icons

All icons in the Coveo JavaScript Search Framework are SVG (see SVG: Scalable Vector Graphics). You can easily customize or replace these icons using your own CSS rules.

Styling the default icons

To achieve a great looking integration with the Coveo JavaScript Search Framework, you may need to modify the default SVG icons.

It’s possible to alter any visual aspect of an SVG (color, size, hover effect, etc.) using CSS rules. All Coveo JavaScript Search Framework SVG icons (except for the result file type SVG icons, which are displayed by the ResultList component) are inlined in the HTML. This gives you maximum control over the SVG styling, and allows you to inspect the HTML of your page to see how each SVG is built, and what style is currently being applied to it, so that you can customize it to better suit your needs.

Each SVG and its container has a CSS class that you can use to override the default styling. Some icons, such as the ones that have a hover effect, have extra CSS classes on their inner SVG elements to allow for more customization.

Remember that in order to correctly override the default styles, you need to achieve higher CSS specificity (see Specificity).

Suppose you want to style the default SearchButton icon (the magnifier icon) in your search page to make it red.

If you inspect this icon, you can see that its markup currently looks like this:

<svg class="coveo-search-button-svg" enable-background="new 0 0 20 20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor">
    <path class="coveo-magnifier-circle-svg" d="m8.368 16.736c-4.614 ..."/>
    <path d="m18.713 20c-.329 0-.659 ..."/>
  </g>
</svg>

Most Coveo JavaScript Search Framework SVG icons have their fill attribute set to the currentColor value to determine their color. When this is the case, you can change the color of the SVG by setting its color property.

In this case, since the SVG element you want to modify has the coveo-search-button-svg CSS class, you can use use this class to override the default color styling:

.CoveoSearchButton .coveo-search-button-svg {
  color: red;
}

You could also want to modify the hover effect on the SearchButton icon. By default, the circle of the magnifier becomes yellow. Suppose you want it to become black instead.

SVG icons are built using <path> elements. In this case, you can see that the SVG icon you want to modify has a <path> element with the coveo-magnifier-circle-svg CSS class. This element identifies the circle of the magnifier icon.

You can use the coveo-magnifier-circle-svg class selector along with the :hover pseudo-selector to modify the hover effect:

.CoveoSearchButton:hover .coveo-magnifier-circle-svg {
  fill: black;
}

SVG icons with hover effects always have an additional CSS class for the changing SVG element. You can use this class to override the default hover effect.

You should always use your web development tools to inspect the page and verify what the current style of the SVG is. This will help you know which CSS selectors to use and also what you need to override.

Replacing the default icons

Each SVG icon has its own container element. If you want to replace an SVG icon, you can use the background of this container to display the graphic of your choice.

Suppose you want to completely replace the default SearchButton SVG icon (the magnifier icon) in your search page.

If you inspect the SearchButton, you can see that its markup currently looks like this:

<a class="CoveoSearchButton" aria-label="Search">
  <span class="coveo-search-button">
    <svg enable-background="new 0 0 20 20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="coveo-search-button-svg">
      <g fill="currentColor">
        <path class="coveo-magnifier-circle-svg" d="m8.368 16.736c-4.614 ..."></path>
        <path d="m18.713 20c-.329 ..."></path>
      </g>
    </svg>
  </span>
  <span class="coveo-search-button-loading">
    <svg enable-background="new 0 0 18 18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" class="coveo-search-button-loading-svg">
      <g fill="currentColor">
        <path d="m16.76 8.051c-.448 ..."></path>
        <path d="m9 18c-4.238 ..."></path>
      </g>
    </svg>
  </span>
</a>

The element with the coveo-search-button class is the container for the SVG element with the coveo-search-button-svg class. If you hide the SVG element and display your own icon in the container instead, you can replace the magnifier icon with your own:

.CoveoSearchButton .coveo-search-button-svg {
  width: 0;
  height: 0;
}
​
.coveo-search-button {
  // Your CSS to display your icon.
}

Working with file type icons

The icons that indicate the file type of a result aren’t inlined in the HTML like the other icons. Instead, the background-image CSS property is used to display these icons. This allows for icon assignation using CSS classes. Since these icons aren’t inline in the HTML, it’s impossible to modify them using CSS as in the previous examples.

The Icon component is responsible for setting the correct icon in a result template. This component has a value option which lets you set your own icon rather than the auto-selected one. To use this option, you should take a look at the icon list which is available in the Coveo JavaScript Search Framework bundle or here on our CDN. It displays all the icons and their corresponding CSS class (if one is available).