• Join Now
  • Sign In
  • Cart
  • Instant Setup
  • Download
Logo
  • About
    • Try it Out
    • For Developers
    • For Agencies
    • For Designers
    • For Anyone
    • Testimonials
    • Showcase
    • History
    • Our Philosophy
    • Credits
    • What does free mean?
    • Blog
  • Community
    • Members
    • Forums
    • Chat
    • Karma
    • International
    • Jobs
    • eNewsletters
  • Developers
    • Download concrete5
    • Join Beta Team
    • Translate concrete5
    • Bug Tracker
    • Submit to Marketplace
    • Code Submissions
    • News
    • Community Leaders
  • Marketplace
    • Add-Ons
    • Themes
    • Add-on Installation
    • Deal Of The Day
    • Swag
    • Theme Contest 2012
  • Services
    • Hosting
    • Support Options
    • Consulting
    • Training
    • Enterprise
  • Documentation
    • Getting Started
    • Editor's Guide
    • Developers Guide
    • How-Tos
  • Add-Ons
  • Themes

Cool Input Search template

developed byinvision
2 Reviews

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.

INSTALLATION
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.

USAGE
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.

STYLING
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.

UNINSTALL
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.

Enjoy!

Current Version

1.0 Download Archive

Works With

5.4.1.1+

Average Support Response

Not enough data

Add to Cart

Free Add One Free Add Five
  • Screenshots Screenshots####
  • Demo Video
  • Demo Live Demo
  • Demo Used On Sites

Also Check Out

  • Audience Contribution
  • Custom Templates
  • Interface Elements
  • System Utilities
Thumbnail Expert

Learn More

  • Cool Input Search template Home
  • Pre-Sale Questions
  • Reviews
  • Support
  • License
  • Roadmap
  • Features
  • Documentation
  • Version History
  • Marketplace
  • Add-Ons
  • Cool Input Search template

Do you have questions

  • What are users saying?
  • Who is using concrete5?
  • What makes concrete5 easy?
  • Why develop on concrete5?
 

We’re on “The Twitter”

RT @katzueno: 今夜 22時も週刊 #concrete5 です http://t.co/80y6Bk0l ゲストが来るかも?それとも普通の放送かも?^KU

Follow concrete5

About

  • Try it Out
  • For Developers
  • For Agencies
  • For Designers
  • For Anyone
  • Testimonials
  • Showcase
  • History
  • Our Philosophy
  • Credits
  • What does free mean?
  • Blog

Community

  • Members
  • Forums
  • Chat
  • International
  • Jobs
  • eNewsletters

Developers

  • Download concrete5
  • Join Beta Team
  • Translate concrete5
  • Bug Tracker
  • Beta
  • Submit to Marketplace
  • Code Submissions
  • News
  • Community Leaders
  • User Doc Group

Marketplace

  • Add-Ons
  • Themes
  • Add-on Installation
  • Deal Of The Day
  • Swag

Services

  • Hosting
  • Support Options
  • Consulting
  • Training
  • Enterprise

Documentation

  • Getting Started
  • Editor's Guide
  • Developers Guide
  • How-Tos

Legal

  • Privacy Policy
  • Terms of Use
  • Refund Policy
  • Contact Us
© 2008 to 2012 Concrete CMS Inc. All Rights Reserved.

Sign In?

You must have a user account and be signed to perform this action.

  • Sign In
  • Register