RapidWeaver Forums

The Seeker
Animated Searchbar Snippet Pack and Workshop

If you’ve been looking under chairs and tables, trying to find the key to the pop-up searchbar fable… then your search is over. The Seeker is here. And it’ll help you find what you’re after. With style.

Visit The Seeker’s dedicated website where you can learn how to easily create your own animated searchbars and incorporate them into your RapidWeaver projects.

In The Workshop You Will Learn How To:

◦ Work with Snippets
◦ Create Your Own Snippets
◦ Combine HTML, CSS and jQuery
◦ Move your parts with Fresh Me’s Move Parts Snippet
◦ Enhance Your Seeker Searchbar with RapidSearch
◦ Easily Create Your Own Animated Searchbars

Download the Seeker Project Pack and use the included Photoshop templates to create and customise your own searchbar styles or choose from more than fifty ready-to-use styles. 

Snippet Pack Contents:

◦ 1 Searchbar jQuery Header Snippet
◦ 1 Searchbar HTML Snippet
◦ 1 Searchbar HTML (RapidSearch) Snippet
◦ 1 Fresh Me Move Parts Snippet
◦ 1 Searchbar CSS Snippet
◦ 58 Search Icons
◦ 3 Search Icon PSDs
◦ 50 Searchbar PNGs
◦ 3 Searchbar PSDs
◦ 1 RapidSearch 3 Demo Plugin
◦ 1 RapidWeaver Project File
◦ 1 Tutorial URL

So here it is, RapidWeaver Central’s first workshop. Have fun.

Marten

Two words. Absolutely awesome.

Cheers,
Conrad

Very nice implementation.  Thanks for this! 

@marten Great job! Very nice and extremely helpful tutorial for those needing to implement search on a RapidWeaver website.

Best,
Josh

Very many thanks for this Marten - brilliant!

Best regards,

Pete

Thanks for this huge effort: I am looking forward to having a few spare hours to take a look at the workshop!

Thanks Marten!!

Very nice! Thanks for sharing.

Marten....Two words: You da Man!

Math is not my strong subject

...and the site for The Seeker is awesome too!

Brian

This looks SWEET! Downloaded. Will have to give it a try.

Thanks Marten.

Just an awesome amount of work you’ve put into this, Marten. And to echo Brian, the Seeker website is killer. looking forward to using this. Great work.

Jamie

Bloody marvelous work Marten. Many, many thanks.

this is very cool, for a while i have been wanting to either try to build a plugin or have someone do it but basically have a search bar designer.  its something that has been missing for RW.  You could take a great plugin like rapidsearch, use the designer plugin to style the search bar how you want it and you are set.

I have styled a few of mine with CSS but for all the newbies and others that don’t have the time it would be awesome.  I am still learning how to use a combination of images and CSS to style a sharp search box, it really shouldn’t be this hard.  We have plugins for sliders, kwix, accordions, these are more involved than just styling a search box but not as important in my opinion.  just thinking out loud, great job on this one..

? i can’t see immages in this url:

http://www.workshop.rapidweavercentral.net/searchbar/variations/Apper/apper.html

it’s a problem of mine or......

im loving this new plugin/snippet.  everyone needs to make a donation for this one.

i am trying to implement it on a new site im building.  it working perfectly except for a couple of issues, issues that im sure
other people will want answers for as well.  ive posted some screenshots and a link below to show what i am talking about.

http://outletpurse.com/designers/searchbar/searchbar.html

i just need three things to make it perfect:

1) how to put the term “search” level with the “search icon” i keep playing around with it and can’t make it work.
2) when the search bar pops up, it shifts downward, my logo text and the “Search” text im trying to align.
3) this one isn’t super important but i like this feature a lot.  thats the ability to get the “on click” function to work, in other words, when you click on the search box the text disappears so you can begin inputting your search term instead of having to highlight the “Search this site...” text and then type over it.  i have been able to use it on my personal site here:

http://mwarnold.com/

but not able to figure it out using seeker, it might be some sort of code conflict…

if anyone can help with any of these i will post the results to help other people as well.  thanks!

mark

Image Attachments

Click thumbnail to see full-size image

 Signature 

Hayden Christensen - To merely call him wooden is an affront to puppets everywhere…
Member:  LinkedIn Rapidweaver xperts group

 

Hi Mark,

1. If it was me, I’d probably integrate the search term in the graphic. I’ll add this as a feature request and if I get enough requests, I’ll add it in the next update.

2. I had the same problem with the Gotem theme at RapidWeaver Central. My solution was to ‘hardcode’ it into the index.html file. You can see how and where if you examine the source code.

3. You’re not the only one who has asked for this but the strange thing is it works perfectly for me. Nevertheless try the following HTML in place of your current code and see if that makes the difference. If it does I’ll update the snippet pack immediately.

Marten