THIS IS ARCHIVED DOCUMENTATION

Inserting Custom CSS in Coveo for Sitecore

This is for:

Developer System Administrator

It’s generally recommended to overwrite the CSS of the Coveo for Sitecore components so that they match the look and feel of your website.

The solution described below allows you to easily link one or several Coveo for Sitecore search pages with the same CSS file while having each distinct search interface render its components differently. Additionally, you maintain the ability to upgrade Coveo for Sitecore without losing your search interface styling in the process.

The basic idea behind this solution is to add a class attribute value to the Coveo Search Interface component through its data source and to reference a custom CSS file in the search page .cshtml layout file. This custom CSS file leverages the added class attribute value. Since all visible Coveo-powered search page components are <div> elements nested in the Coveo Search Interface <div>, you can easily create narrow CSS selectors referencing the added Coveo Search Interface class attribute value which, in effect, override the broader, default Coveo CSS selectors (see Styling the Coveo JavaScript Search Framework).

The general steps in implementing the solution are the following:

  1. Creating a new .cshtml layout file based on your current Coveo-powered search page .cshtml layout file, and in the new layout file, adding a reference to the CSS file that will contain your custom classes.
  2. Copying your current Coveo-powered search page layout item in the Sitecore Content Editor, and adjusting its Path field value to associate it with the new .cshtml layout file.
  3. Linking your Coveo-powered search page item to your new layout item in the Content Editor presentation details.
  4. Specifying your custom class in the Coveo Search Interface component data source.
  5. Creating and editing your custom CSS file.

The sections below provide more details for each of these steps.

Instructions regarding the creation/duplication of files and items outside Coveo Hive folders are provided to avoid any risk of having your customizations overwritten upon a Coveo for Sitecore upgrade. Some instructions may be skipped if your current search page implementation is already consistent with this leading practice.

Creating and Editing the New .cshtml Layout File

  1. In your file explorer, open the <SITECORE_INSTANCE_ROOT>\Website\Layouts folder (for Sitecore 8 instances), or the <SITECORE_INSTANCE_ROOT>\Layouts folder (for Sitecore 9 instances).

  2. In the Layouts folder, create a new folder called Custom Layouts.
  3. Locate the .cshtml layout file your Coveo-powered search page is currently using. If necessary, follow the steps below.
    1. Select your Coveo-powered search page item in the Content section of the Sitecore content tree.
    2. Select Presentation in the Sitecore menu, and Details in the ribbon.

    3. In the Layout Details dialog, click the name of the layout item to bring up the Device Editor dialog. The location of the layout item in the content tree is then displayed.

    4. Navigate to the location of the layout item and select it.

    5. See the Path field value for the name and location of the .cshtml layout file.
  4. Copy the .cshtml layout file your search page is currently using, and the Web.config file located in the same folder, into the Custom Layouts folder.

  5. Change the name of the new layout file to CustomCSSLayout.cshtml.

  6. Open the CustomCSSLayout.cshtml file using your preferred text editor.

  7. In the <head> section, add the following <link> tag.

    • For Sitecore 8 instances

      <link rel="stylesheet" href="/Css/Custom/CustomCSS.css" />

    • For Sitecore 9 instances

      <link rel="stylesheet" href="/Custom/CustomCSS.css" />
  8. Save your changes.

Creating the New Layout Item

  1. In the Sitecore Content Editor, right-click the Layouts item and select Insert > Layout Folder.

  2. Name your new folder Custom Layouts.

  3. Locate the layout item your Coveo-powered search page is currently associated with. If necessary, follow the steps below.
    1. Select your Coveo-powered search page item in the Content section of the Sitecore content tree.
    2. Select Presentation in the Sitecore menu, and Details in the ribbon.

    3. In the Layout Details dialog, click the name of the layout item to bring up the Device Editor dialog. The location of the layout item in the content tree is then displayed.

  4. Right-click the layout item your Coveo-powered search page is currently associated with and select Copying > Copy To.

  5. In the Copy Item To dialog, select the Custom Layouts folder.

  6. Click Copy.
  7. Right-click the new layout item and select Rename.

  8. Rename your new layout item CustomCSSLayout.

Linking Your Coveo-Powered Search Page Item to Your New Layout Item

  1. In the Sitecore Content Editor, select your Coveo-powered search page parent item.

  2. Select Presentation in the Sitecore menu, and Details in the ribbon.

  3. In the Layout Details dialog, click the name of the layout item your search page is currently associated with.

  4. In the Device Editor dialog, select your new layout item using the Droptree field.

  5. Click OK twice to close both dialogs.

Specifying a Custom Class in the Coveo Search Interface Data Source

  1. Open your Coveo-powered search page in the Sitecore Experience Editor.
  2. Select the Coveo Search Interface component.
  3. Click Edit the rendering’s data source. It should be the leftmost in the floating toolbar.

  4. In the Custom CSS classes field, type CustomClass.

  5. Click OK.

The Coveo Search Interface component now renders as <div id="<ID>" class="CoveoSearchInterface CustomClass ..." ... >.

Creating and Editing Your Custom CSS File

  1. In your file explorer, navigate to the <SITECORE_INSTANCE_ROOT>\Website\Css folder (for Sitecore 8 instances), or the <SITECORE_INSTANCE_ROOT> folder (for Sitecore 9 instances).

  2. Create a folder named Custom. You should now have the folder structure below.

    Sitecore 8 folder structure

    Sitecore 9 folder structure

  3. In your Custom folder, create a text file. Name it CustomCSS.css, in accordance with the layout file <link> tag href attribute value added earlier.
  4. Open your CustomCSS.css file with your preferred text editor.

  5. Add selectors as in the example below.

    .CustomClass.CoveoSearchInterface {
  ... ;
  ... ;
}

.CustomClass .coveo-facet-header {
  ... ;
  ... ;
}

    In this example, the .CustomClass.CoveoSearchInterface selector is applied to HTML elements whose class attribute contains the CustomClass and CoveoSearchInterface values. Given that you previously added the CustomClass value to the Coveo Search Interface class attribute, this selects <div id="<ID>" class="CoveoSearchInterface CustomClass ..." ... >. You can therefore set the properties that are inherited by the components nested in the Coveo Search Interface component under this selector.

    As for the .CustomClass .coveo-facet-header selector, it’s applied to HTML elements whose class attribute contains the coveo-facet-header value if the element is located within another element whose class attribute contains the CustomClass value (in this case, the <div id="<ID>" class="CoveoSearchInterface CustomClass ..." ... > element). You can therefore target specific Coveo component <div> elements in a given search interface using a selector syntax similar to this one.

  6. Add properties and values in your CSS file, in accordance with your styling requirements.
  7. Save your file.

Using This Solution With Many Coveo-Powered Search Pages

The solution presented in this article is easily extensible. For all distinct Coveo-powered search pages, you can proceed as follows to apply custom classes:

  1. Open your search page in the Experience Editor and add a unique class attribute value to the <div class="CoveoSearchInterface ..." ...> element through the Coveo Search Interface data source (see Specifying a Custom Class in the Coveo Search Interface Data Source).

  2. Add selectors that reference the newly added class attribute value in the CustomCSS.css file and the appropriate styling property values for each (see Creating and Editing Your Custom CSS File).