Customize the Doofinder Layer Look & Feel

or send an email to support@doofinder.com

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.

  .df-classic
    .df-classic__content.df-layer__content
      .df-aside
        .df-aside__header
        .df-aside__content
      .df-main
        .df-header
        .df-results
          .df-results__content
  .df-fullscreen
    .df-topbar
      .df-topbar__content
        .df-topbar__logo
        .df-searchbox
        ...
        .df-header
    df-fullscreen__content.df-layer__content
      .df-aside
        .df-aside__content
      .df-results.df-results__content

You can think of all these classes as components:

  • .df-topbar: Fullscreen only, holds the search box and the site logo.
  • .df-aside: A secondary column that holds all the search filters, if any.
  • .df-main: The main content of the layer (classic).
  • .df-header: The header of the layer. It includes things like the results count and icons to switch between list and grid layouts.
  • .df-results: The container for the result items.
  • .df-panel: Collapsible panels inside the sidebar that contains filter values.
  • .df-card: Each search result has this class.

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.

Custom Look & Feel Example

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.

.df-fullscreen .df-aside {
  background: #EEEEEE;
}