Styling the Coveo JavaScript Search Framework

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 does not 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 are 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 are encouraged to create your own files and reference them in your search page.
  • As a best practice, you should add a class to your CoveoSearchInterface component, as such:

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

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

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

What’s Next

Topics in this section: