Doofinder results layer has been well integrated into your webpage such that it forms part of your webpage HTML structure. This way, you can access and modify any element within the Doofinder Layer using CSS rules and selectors. 

📌 Note: This article requires one to have prerequisite knowledge of CSS.

Before we get started on the customisation, here are some points to consider:

  • Doofinder Layer by default comes in two flavours: Classic and Fullscreen
  • You can have multiple layers on the same page, each with a different CSS ID like dfclassic-0 or dffullscreen-1, which you can use to force greater specificity in your CSS selectors. 
  • In general, Doofinder has distinct CSS classes for each element. For example, every result has the  .df-card_class , and the title has the .df-card__title class. You can use these selectors to customise styles.
  • To make customisation more manageable, you can inspect your site’s HTML structure via your browsers developer tools. This will help you find the specific class of the element you want to modify.

📌 Note: If you want to redesign the layer completely, see the Classic Layer Reference (v7)

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 classic layer.
  • .df-header: The header of the layer. It includes things like the results count and icons to switch between the list and grid layouts. 
  • .df-results: The container for the result items. 
  • .df-panel: Collapsible panels inside the sidebar that contain filter values. 
  • .df-card: Each result has this class. 

📌 Note: Classic and FullScreen versions of the layer add the extra classes and ids to allow more specific customisations. 

The image below shows schematics of how the whole thing looks like:

Custom Look & Feel Example

Learn by example

Change the colour 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 colour for the facets panel on Fullscreen Layer

📌 Note: Depending on the place you put your styles, you may need more CSS specificity 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 specificity.

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

Change the colour of the discounted price.

df-card__price df-card__price--new{
  color: #EEEEEE;
}

Change the colour of the title to match your website style.

df-card__title {
  color: #EEEEEE;
}