Insert custom CSS

This is for:

Developer System Administrator

In this article

Creating and editing the new .cshtml layout file
Creating the new layout item
Linking your Coveo-powered search page item to your new layout item
Specifying a custom class in the Coveo Search Interface data source
Creating and editing your custom CSS file
Using this solution with many Coveo-powered search pages

Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

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 lets you 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 create narrow CSS selectors referencing the added Coveo Search Interface class attribute value which, in effect, override the broader, default Coveo CSS selectors (see Style the Coveo JavaScript Search Framework).

The general steps in implementing the solution are the following:

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.
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.
Linking your Coveo-powered search page item to your new layout item in the Content Editor presentation details.
Specifying your custom class in the Coveo Search Interface component data source.
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

In your file explorer, open the <SITECORE_INSTANCE_ROOT>\layouts folder.
In the layouts folder, create a new folder called Custom Layouts.
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.
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.
Change the name of the new layout file to CustomCSSLayout.cshtml.
Open the CustomCSSLayout.cshtml file using your preferred text editor.
In the <head> section, add a <link> tag that references the custom CSS file you will create later in this procedure.
```
<link rel="stylesheet" href="/Custom/CustomCSS.css" />
```
Save your changes.

Creating the new layout item

In the Sitecore Content Editor, right-click the Layouts item and select Insert > Layout Folder.
Name your new folder Custom Layouts.
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.
Right-click the layout item your Coveo-powered search page is currently associated with and select Copying > Copy To.
In the Copy Item To dialog, select the Custom Layouts folder.
Click Copy.
Right-click the new layout item and select Rename.
Rename your new layout item CustomCSSLayout.

Linking your Coveo-powered search page item to your new layout item

In the Sitecore Content Editor, select your Coveo-powered search page parent item.
Select Presentation in the Sitecore menu, and Details in the ribbon.
In the Layout Details dialog, click the name of the layout item your search page is currently associated with.
In the Device Editor dialog, select your new layout item using the Droptree field.
Click OK twice to close both dialogs.

Specifying a custom class in the Coveo Search Interface data source

Open your Coveo-powered search page in the Sitecore Experience Editor.
Select the Coveo Search Interface component.
Click the Edit the rendering’s data source button. It should be the leftmost in the floating toolbar.
In the Custom CSS classes field, type CustomClass.
Click OK.

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

Creating and editing your custom CSS file

In your file explorer, navigate to the <SITECORE_INSTANCE_ROOT> folder.
Create a folder named Custom. You should now have the folder structure below.
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.
Open your CustomCSS.css file with your preferred text editor.
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 added the CustomClass value to the Coveo Search Interface class attribute before, 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.
Add properties and values in your CSS file, in accordance with your styling requirements.
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:

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).
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).