Joomla Website Builder Gridbox 2.0 Released!

View More

How To Make Full Screen Overlay Search with Gridbox

How To Make Full Screen Overlay Search with Joomla! Website Builder Gridbox

Here is a new Tip! Today we gonna show you how to configure your standard Joomla Search Module and make incredible full screen overlay search with Joomla! website builder Gridbox!

As you know few days ago, we have updated Gridbox to version 1.2.7. which allows to use Joomla search functionality, Gridbox pages are displaying in the search results. More details you can find here: Gridbox 1.2.7 Joomla! Search Integration.

To create a full screen search as on the animation above, we will use Gridbox Plugin "Overlay Section", standard Joomla! Search Module and we need a bit of CSS code to customize default style of the search module.


Contents

  • Create and Configure a Joomla! Search Module;
  • Import and Configure Gridbox Plugin "Overlay Section";
  • Configure "Overlay Section" Background;
  • Insert and Customize Joomla! Search Module.

Step 1: Create and Configure a Joomla! Search Module

Go to Extensions >> Modules >> Click on the green button "New" >> from the list select "Search".

Configure your search module and press on the button "Save and Close"


  • Title - Search Module;
  • Box Text - Search;
  • Search Button - Yes;
  • Button Position - Right;
  • Search Button Image - Yes.

Step 2: Import and Configure Gridbox Plugin "Overlay Section"

2.1. Add Overlay Section Plugin

By the clicking on the icon "+" open "Select Plugin" dialog window and select "Overlay Section" Plugin.

NOTE: If Gridbox plugin "Overlay Section" is not installed, please follow this tutorial: How to install Gridbox Plugin.


2.2. Configure Overlay Section Button

Configure overlay section button as on the screen below and press on the button "Save".

NOTE: Icons are available if Gridbox plugin "Icon" is installed.


2.3. Configure Overlay Section Options

Configure overlay section plugin as on the video below and press on the button "Save".

Step 3: Configure "Overlay Section" Background

3.1. Configure Section Options

Open overlay section by clicking on the button search. Now you need to Configure Background Options of Section.


3.2. Add Class Suffix and Custom CSS for the Section Background

In order to center position (Row) for the Search Module, you need to add Class Suffix "full-screen-search-overlay" for section background.

Copy CSS code below and paste into Gridbox CSS editor

.full-screen-search-overlay {
	display: flex !important;
  	display: -webkit-flex !important;
}

Step 4: Insert and Customize Joomla! Search Module

4.1. Insert Joomla! Search Module

By the clicking on the icon "+" open "Select Plugin" dialog window and select "Joomla! Modules" Plugin. From the list select created search module (Step 1).


4.2. Add Class Suffix and Custom CSS for the Search module

Unfortunately, standard Joomla! search not allows to customize style in the same way as the Gridbox Plugins. In this case we need to add Class Suffix "custom-search".

Copy CSS code below and paste into Gridbox CSS editor

.custom-search .form-inline  {
    display: block;
}
 
.custom-search input[type="search"] {
    background: transparent; 
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-family: Roboto;
    font-size: 72px;
    font-weight: 100;
    height: auto;
    line-height: 92px;
    padding-right: 50px;
    position: relative;
    width: 100%!important;
    z-index: 1;
}
 
.custom-search input[type="search"]::-webkit-input-placeholder {
    color: #fff;
}
 
.custom-search input[type="search"]::-moz-placeholder {
    color: #fff;
}
 
.custom-search input[type="search"]:focus {
    border-color: transparent!important;
    border-bottom-color: rgba(255,255,255,0.2)!important;
}
 
.custom-search button.btn{
    background: transparent;
    border: none;
    bottom: 15px;
    color: #fff;
    cursor: pointer;
    font-size: 48px;
    position: absolute;
    right: 0;
    z-index: 2;
}


That's all! Now you have modern and nice looking Search on your Joomla! website.

If you have any questions or recommendations please write below in the comments form. We'll always happy to know your opinion and ready to help you!

Have a nice day and Good luck with your Projects! Create a beautiful websites with Gridbox!