-
Posts
-
Hello.
A lot of the big microstock sites have a big search bar in the middle of their homepage. A lot like on BigStock, at http://www.bigstockphoto.com. As a microstock customer, I admit that it is something I like when visiting a site and searching for images.
Have any of you added such a search bar on your site? I would love to add one somewhere below my header. I think it would help our customers, and make a site look more like the microstock sites people are used to.
Is it even possible to add such a search bar?
Thanks!
NateThis should be the minimum of what you need – styling left to your creative insight though 😀
Wouldn’t it be cool if there were a dedicated widget for it 😉
@leo wrote:
This should be the minimum of what you need – styling left to your creative insight though 😀
Wouldn’t it be cool if there were a dedicated widget for it 😉
There is a plugin done by plran but that stopped working “perfectly” with the latest theme.
Thanks Leo and nikd90!
I added a search bar to my homepage using that code. I altered it a bit to be centered, and have a set width. You can see it at snapvectors.com.
One final question on this thread:
What code can I insert so that the “search” button aligns directly to the right of the search bar? Currently, it sits below the search bar.
Thanks!
NateSo you could use the following to get the boxes side by side (you can look at my home page – temporarily – to see what this looks like; I haven’t decided if I’ll keep it or not)
I put this into a text widget and put it into the Home Page Below Content sidebar. If you have tons of spacing and padding, you can remove the margin-bottom – I just have very little padding and thought there should be some here.
Thank you Jo Ann!
I tweaked it, and now the “Search” button is to the right of the search bar, but it is not aligned with it. You can see it at: http://snapvectors.com. Any idea why it is not aligning with the search bar?
Also, do you know where the root CSS file is located that controls the color of the search buttons?
Thanks!
NateIt doesn’t line up because you put in a line break (
) . I took that out and it lines up just fine (click for full size).
It depends on which theme you are using, but you can use Edit CSS (Jetpack) or, if you’re using Dragonfly, Appearance->Editor and edit style.css
You can look at my long post about my css edits to take a look at Dragonfly changes:
http://www.symbiostock.org/post/4860/#p4860
There’s a comment towards the end titled “button colors” with changes based on those Christine did for her site (thanks to her for the leg up there!)
Jo Ann,
Thank you so much for taking a personalized look at my code! I looked at the code and can’t find a line break (
) anywhere on the homepage or on my style.css sheet.Am I looking in the wrong place?
Thanks,
Nate@Snap Vectors wrote:
Jo Ann,
Thank you so much for taking a personalized look at my code! I looked at the code and can’t find a line break (
) anywhere on the homepage or on my style.css sheet.Am I looking in the wrong place?
Thanks,
NateShort answer is that I don’t know – I searched the code for
and don’t see anything obvious adding it directly (doesn’t mean it isn’t code adding it in though). My site doesn’t add these and I’m running 2.9.4 and DragonflyAre you still running 2.6.5? (I did check that code too and didn’t see anything materially different there)
If you put this into a text widget, do you have automatically make paragraphs checked? If so, turn it off 🙂
If none of the above explain it, can you be specific about where you inserted the code in your site?
Jo Ann,
I am running the Clean Theme, version 2.0.0.
I just added that snippet of code you shared earlier in this thread directly on my homepage.
I tried putting it in a text widget first – and it WAS aligned correctly – but I didn’t like the border around it. When I put it in a text widget, it put the search bar inside one of the borders like my “Featured Images” and “New Images”. I want it to be above there, so it looks like it is part of the upper part of the homepage.
Thanks,
NateWhen you pasted it in, were you using the Visual or the Text tab in the editor on your home page? I’m assuming it was visual, and if you go look in the text tab you may see some additional stuff – I hope including the
If you’re editing HTML, do it in the Text tab so the editor doesn’t try to format it for you
I was in the Text Editor, and I pasted your code snippet directly in. I don’t see a
anywhere.Here is something interesting:
When I use a text widget, it aligns correctly.
When I don’t use a text widget, and just paste it in directly in the Text Editor, it aligns wrong. With the search bar being slightly above the search bar.It would be easy if I could use a text widget, but the text widget adds a border that throws off the layout.
Weird. What could cause it to work in a widget, but not by itself?
Thanks,
NateI tried it in my own home page and could see the extra line – it’s the text editor being “clever”. I think the fastest way to make it right if you do add the code to the text editor is to make the search box move back up a line. I used 1.4em as the amount (one em is the current point size and the line height is typically larger than that, but I don’t think css units include lines):
http://www.w3schools.com/cssref/css_units.asp
<input class="form-control field" type="text" placeholder="Enter search text…" value="" name="s" style="margin-top:-1.4em; -moz-outline-radius: 15px; outline: 0px none; outline-offset: 5px;”>
Here is the code. It is directly in my homepage.
P.S. I also just added it in a text widget, so you can see what I mean with the borders.
@cathyslife stockphotos wrote:
I really like the looks of that! Nice work. Will you take it out of the top part then, or leave both?
Thanks Cathy. I think I’ll probably leave the one on top as well for now. It might help the “look” of the design to remove the top one, but might help customers more to leave it. We’ll see.
Nate
You must be logged in to reply to this topic.