Documentation

Installation

Installing the particle on your website is a really simple process. You just need to follow the below instructions depending on the platform you are on.

This Particle requires the "UIkit for Gantry5" Atom to be loaded. Make sure you have installed and enabled the "UIkit for Gantry5" Atom before proceeding with the instructions below!

Installing on Joomla

  1. Download the modal-search-particle.zip file.
  2. UNZIP it on your computer. You will find three files - modal-search.html.twig, modal-search.yaml and _modal-search.scss.
  3. Copy the modal-search.html.twig and modal-search.yaml files to root/templates/TEMPLATE_DIR/custom/particles (if the particles folder does not exist, you will need to create it manually). Basically, this step is the same as the one described in the Creating a New Particle chapter in the Gantry 5 Documentation.
  4. Copy the _modal-search.scss file to root/templates/TEMPLATE_DIR/custom/scss (if the scss folder does not exists, you will need to create it manually).
  5. Add the following code in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

    // Modal Search Particle
    @import "modal-search";

The following video shows the above steps in details (watch it in Fullscreen and FullHD for better quality). The video is for the "Slideshow" particle but the installation process is pretty much the same.

Watch the Video


Installing on Wordpress

  1. Download the modal-search-particle.zip file.
  2. UNZIP it on your computer. You will find three files - modal-search.html.twig, modal-search.yaml and _modal-search.scss.
  3. Copy the modal-search.html.twig and modal-search.yaml files to root/wp-content/themes/TEMPLATE_DIR/custom/particles (if the particles folder does not exist, you will need to create it manually). Basically, this step is the same as the one described in the Creating a New Particle chapter in the Gantry 5 Documentation.
  4. Copy the _modal-search.scss file to root/wp-content/themes/TEMPLATE_DIR/custom/scss (if the scss folder does not exists, you will need to create it manually).
  5. Add the following code in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

    // Modal Search Particle
    @import "modal-search";

The following video shows the above steps in details (watch it in Fullscreen and FullHD for better quality). The video is for the "Slideshow" particle but the installation process is pretty much the same.

Watch the Video


Installing on Grav CMS

  1. Download the modal-search-particle.zip file.
  2. UNZIP it on your computer. You will find three files - modal-search.html.twig, modal-search.yaml and _modal-search.scss.
  3. Copy the modal-search.html.twig and modal-search.yaml files to root/user/data/gantry5/themes/THEME_DIR/particles/ (if the particles folder does not exist, you will need to create it manually). Basically, this step is the same as the one described in the Creating a New Particle chapter in the Gantry 5 Documentation.
  4. Copy the _modal-search.scss file to root/user/data/gantry5/themes/THEME_DIR/scss/ (if the scss folder does not exists, you will need to create it manually).
  5. Add the following code in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

    // Modal Search Particle
    @import "modal-search";

The following video shows the above steps in details (watch it in Fullscreen and FullHD for better quality). The video is for the "Slideshow" particle but the installation process is pretty much the same.

Watch the Video

Usage

All particles by nature are really intuitive and easy to use. Also, most of the fields in the particle have a tooltip text that explains what it is about.

Anyway, you might want to watch the Demo Video, which explains everything!

Watch Demo Video

Download

You can download all particles from our Download Section.

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!