--- title: Insert custom CSS slug: '2342' canonical_url: https://docs.coveo.com/en/2342/ collection: coveo-for-sitecore-v5 source_format: adoc --- # Insert custom CSS > **Legacy feature** > > The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations. > > To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries. > To get started, see the [Build search](https://docs.coveo.com/en/2473/) article. 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 `
` elements nested in the **Coveo Search Interface** `
`, 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](https://docs.coveo.com/en/423/)). 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. > **Important** > > 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 `\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. .. Select your Coveo-powered search page item in the **Content** section of the Sitecore content tree. .. Select **Presentation** in the Sitecore menu, and **Details** in the ribbon. .. 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. ![Device editor showing the location of the basic search interface layout item | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/linked-layout-item-name-and-location.png) .. Navigate to the location of the layout item and select it. ![Screenshot showing the value of the Path field for the Basic Search Interface Layout item | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/linked-layout-layout-file-location.png) .. 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`. ![Screenshot of the Windows file system showing web.config and CustomCSSLayouteshtml files in the Custom Layouts folder | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/custom-layout-folder-contents.png) . Open the `CustomCSSLayout.cshtml` file using your preferred text editor. . In the `` section, add a `` tag that references the custom CSS file you will create later in this procedure. ```html ``` . 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`. ![Screenshot of the Sitecore content tree showing the Custom Layouts folder | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/custom-layout-folder.png) . Locate the layout item your Coveo-powered search page is currently associated with. If necessary, follow the steps below. .. Select your Coveo-powered search page item in the **Content** section of the Sitecore content tree. .. Select **Presentation** in the Sitecore menu, and **Details** in the ribbon. .. 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. ![Layout details and device editor interface showing assigned layouts controls and placeholders | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/linked-layout-item-name-and-location.png) . 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. ![Screenshot of the Copy item to dialog with the custom layouts folder selected | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/copy-to-custom-layouts.png) . Click **Copy**. . Right-click the new layout item and select **Rename**. . Rename your new layout item `CustomCSSLayout`. ![Screenshot of the layout item renamed in the Sitecore content tree | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/layout-item-renamed.png) ## 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. ![Search page item selected in content tree | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/search-page-selected-in-content-tree.png) . 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. ![The Sitecore layout details dialog showing the selection of the basic search interface layout | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/search-page-switching-layout.png) . In the **Device Editor** dialog, select your new layout item using the Droptree field. ![Screenshot showing the selection of the new layout item in the Device Editor | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/search-page-layout-selection.png) . 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`. ![Screenshot showing the data source of the component with the value of the custom CSS classes field | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/custom-css-classes-field.png) . Click **OK**. The **Coveo Search Interface** component now renders as `+
+`. ## Creating and editing your custom CSS file . In your file explorer, navigate to the `` folder. . Create a folder named `Custom`. You should now have the folder structure below. ![Screenshot showing a custom folder in the Windows file system | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/css-folder-structure-sc-8.png) ![Screenshot showing a custom folder in the Windows file system under the Sitecore instance root folder | Coveo](https://docs.coveo.com/en/assets/images/c4sc-v5/css-folder-structure-sc-9.png) . In your `Custom` folder, create a text file. Name it `CustomCSS.css`, in accordance with the layout file `` tag `href` attribute value added earlier. . Open your `CustomCSS.css` file with your preferred text editor. . Add selectors as in the example below. ```css .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 `+
+`. 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 `+
+` element). You can therefore target specific Coveo component `
` 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 `+
+` element through the **Coveo Search Interface** data source (see [Specifying a Custom Class in the Coveo Search Interface Data Source](#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](#creating-and-editing-your-custom-css-file)).