‘Allo, fellow artists/programmers. I just visited the Juxtapoz website and I really like their search bar, here. I would like to create something similar, but I can’t seem to get my head around it. I am using WordPress for my website, here, which is currently broken because I added the get_search_form PHP. This is what I have figured out thus far…
WordPress uses the following PHP for its search form:
< ?php get_search_form(); ?>
Or at least, that is what it looks like within my Starkers theme. So I looked at the codex, here, and discovered that I do not have a searchform.php anywhere in my theme, which means that WordPress will render its built-in search form. Now, what do I need to do to style everything the way I would like to? In the codex, they give examples, but I only see one div encapsulating a label class and two input types. I need a way to physically position the search bar, then add a magnifying glass as the search button, and finally have the bar ease-in and out on rollover. Any help would be greatly appreciated! Thank you in advance!
Edit: Also, I inspected the element on the Juxtapoz website in Google Chrome and they have some funky stuff happening. Overflowing with input types.
Okay, here is my progress thus far. I had to place get_search_form within the ribbon-content, which makes sense because it quite literally is part of the content within the ribbon. Doh! But the menu is still outside of the ribbon, because I couldn’t get it to work otherwise. I also created a searchform.php. The code is as follows…
So, I have the SVG of a magnifying glass as the search button, which is then centered within the ribbon. I have the search bar, which is just your plain, old search bar (not interactive), and finally, I have the word “Search” as a placeholder.
Any suggestions on how to level the search bar with the ribbon would be appreciated. And lastly, any tips on how to make the search bar interactive on scroll over would be awesome as well.