Doofinder Mobile Layer Customization

or send an email to support@doofinder.com

In this article

In this article, we show how to customize your mobile layer in order to integrate it with your brand and style code.

Doofinder Mobile 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 Mobile Layer is loaded in screens with width lower than 767 pixels. You can modify this width in order to show it in tablets. Click here, for further info.
  • 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.
  • You can specify different styles for your desktop and mobile versions. To do this, you should use the .df-mobile to specify you are customizing mobile version. Take a look at the class hierarchy below.

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

Layout

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

.df-mobile
  .df-mobile__wrapper
    .df-mobile__header
      .df-mobile__header__image (optional)
      .df-mobile__searchbox
      .df-mobile__header__actions (optional)
    .df-mobile__content
    .df-mobile__action-button
  .df-mobile__overlay
  .df-mobile__aside

You can think of all these classes as components:

  • .df-mobile__header: contains the header, included the search box.
  • .df-mobile__header__image: holds a branding image.
  • .df-mobile__searchbox: holds the search box.
  • .df-mobile__content: The main content of the layer.
  • .df-card: Each search result has this class.
  • etc…

Notice: Furthermore, Mobile Layer adds extra classes and ids to allow more specific customizations.

Learn by example

Add branding images to the Mobile Layer

The latest version of the mobile layer adds support for header and body images in the default template so customizing the layer to your branding is easier.



You only have to add the URL of your images to the templateVars display attribute of the mobile options inside your Doofinder Script:

var dfClassicLayers = [{
  ... (other layer options)
  mobile: {
    display: {
      templateVars: {
        images: {
          header: 'http://yoursite.com/media/logo.png',
          body: 'http://yoursite.com/media/watermark.png'
        }
      }
    }
  }
}]

You can see more info about these and other mobile configuration options at this reference

Change the color of the title in the results

.df-mobile .df-card__title{
  color: #FFBBCC;
}

Change the left margin for each item's price

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