In this article

Doofinder results layer is seamlessly integrated in your webpage. This means it's part of your webpage HTML structure, so you can access and modify any element within the Doofinder layer, using CSS rules and selectors.

Before we get started, there are a few pointers to consider:

Doofinder comes by default in two flavours, Classic and FullScreen

You can have multiple layers on the same page, each one with a different CSS ID like dfclassic-0 or dffullscreen-1 so you can make use of them to force greater specifity in your CSS selectors.

In general, Doofinder has distinctive CSS classes for each elements. That means, for example, every result has the .df-card class and the title has the .df-card__title class. You can use those selectors to customize styles.

To make customization easier you can inspect your site's HTML structure via your browser's developer tools. That will help you finding the specific class of the element you want to modify.

Notice: If you want to complete redesign the layer template, check this article.

Layout

All Doofinder layers share almost the same layout with some differences.

Notice: Furthermore, Classic and FullScreen versions of the layer add extra classes and ids to allow more specific customizations.

Following, there is a schematics of how the whole thing looks like.

Learn by example

Change the color of the title in the results

.df-card__title{color:#FFBBCC;}

Change the left margin for each item's price in Grid View

.df-layer--grid.df-card__price{margin-left:20px;}

Change the background color for the facets panel on Fullscreen Layer

Important: Depending on the place you put your styles you may need more CSS specifity to make them applied instead of the default ones. Use the CSS id of the layer or a parent tag selector as a prefix for the CSS selector, or the (discouraged) !important keyword at the end of each rule to force specifity.