WARNING: concrete5 5.6 and earlier are end-of-life. Sales from the marketplace have now ended. Click here to learn more about this transition.

Cool Input Search template

This add-on is an Adaptation of Alex Weber's jQuery "CoolInput" plugin for Concrete5 -- it puts a prompt inside your search text field that disappears when the user clicks in the text field, reappears when the user clicks outside the box. The default styling also displays a magnifying glass icon inside the text field.

Unzip & copy the block to your /packages/ folder. Login to your site, go to the Dashboard > Add Functionality panel, you should see the Cooledit add-on in your New section. Click the Install button to install the block to your Concrete5 site.

1. Navigate to the page where you'd like to add a search block.
2. Put the page in Edit mode.
3. Add a standard Concrete5 Search block to your page.
4. In the "Add Search" dialog that appears, enter text in the Title field. Text in that field will appear in the text field in the search box.
5. You must also add text for "Submit Button Text", choose a "Search Within Path" option, and whether or not you want to redirect results to another page (recommended).
6. Click the "Add" button when you're satisfied with the settings in the "Add Search" dialog. The dialog will disappear, and you'll receive a success message from Concrete5.
7. Once the block has been successfully added, click on the Search block again and choose "Custom Template".
8. Select "CoolInput" from the available templates & click the "Update" button.
9. Save the page by clicking the "Exit Edit Mode" button in the upper left corner, then choose "Publish My Edits" to publish the page.

Now you have a nicely styled, jQuery-driven search box. The title you entered will appear in the text field when you click there. When you click outside the text field of the search box, the original text will appear. In addition, a nice little graphic magnifying glass appears in the left side of the text field.

To change the styling, i.e. text color or size, or to remove the magnifying glass icon from the text field, edit packages/coolinput_search/blocks/search/templates/coolinput/view.css. You'll need a basic understanding of Cascading Style Sheets and a text editor to edit the file.

To uninstall the package, visit the Dashboard>Add Functionality panel, click 'Edit' for this block, then uninstall.

This is my first block submission to Concrete5. Please post a message on the Concrete5 site if you have any issues or questions.


Add to Cart

Sales have ended due to EOL

Approved by PRB

Our 30 Day Support Policy

  • Replies to tickets every few days.

Support Hosted

  • On marketplace.concretecms.com