CM Live Deal Search module
To configure your Search module, you go to System -> Site Modules (under Manage section)
Joomla! creates a new module for you automatically after you install the package of CM Live Deal. You can see CM Live Deal - Search module in your module list.
Click on the module name to edit its settings. You can give the module a new name by modifying “Title” field. In the “Module” tab, you set “Status” to “Published” and select the position you want to put this module in “Position” option.
In “Options” tab, you can configure the main settings of the module.
- Display: How search form is displayed, there are 3 styles, “Inline”, “Horizontal”, “Vertical”. You can see how search form looks like in these styles in the screenshot below.
- Keyword field’s CSS: Custom CSS classes for keyword input field.
- Category list’s CSS: Custom CSS classes for category dropdown list.
- City list’s CSS: Custom CSS classes for city dropdown list.
- Search button’s CSS: Custom CSS classes for search button.
- Clear button’s CSS: Custom CSS classes for clear button.
- Display Clear button: Display or hide clear button.
- Button’s label:
- Use icon: Use only icons for search and clear buttons.
- Use text: Use only text for search and clear buttons.
- Use icon and text: Use both icon and text for search and clear buttons.
CSS fields are useful if you want to customize the element of search form to match your template’s style. This requires your skills in HTML and CSS.
In “Menu Assignment” tab, you configure what pages the module is displayed on.
After adjusting the settings, you can save the module and then you will receive “Module saved” message. If you change the module’s name, you can see its name is updated in the module list.
You can check on your front-end to see if the module is displayed properly. The below screenshot is how the inline search form is displayed in “sidebar-right” positon of Joomla!‘s‘ default Cassiopeia template.
Examples (the settings on the left side, the result on the right side)
Example of how inline search form is displayed. The Clear button is displayed and the buttons have only icons. The keyword field is customized by using “form-control-sm” class of Bootstrap 5.
Example of how vertical search form is displayed. The Clear button is displayed and is customized by “btn-light class of Boostrap 5. The Search button is customized by “btn-success” class of Bootstrap 5. Icon and text are both used in the buttons. The keyword field is customized by using “form-control-sm” class of Bootstrap 5.