Search Block Header disappearing |
|
Kayla
|
I know that this issue has been addressed before but I am still lost. I may need my hand held on this with step by step instructions. Hopefully the end result will help others in solving this issue.
The search block looks fine when I export it and upload it to my Wordpress theme (I use Hostgator). BUT, when I go to the sidebar and add ANY widget, the search block disappears. When I add it back via widgets, the header in the search block is gone but everything else is fine (color, search button shape, etc.) with the exception, of course, of the added line of text above the the white search box (search for). I am aware that this is an issue with WP and a correction/repair/fixxxx can be done via CSS (I believe it's in the CSS or PHP or something to do with adding an image).
So, this is the part where I need my hand held (please don't squeeze to hard though caused I'm fragile). This seems so minor, but to me, I just want all those blocks to look consistent. The search block is going in the upper right hand corner (the most logical and majority position).
I hope that I made my request clear. If not, I'll be back to follow up on answers. I do love this program of which I have purchased.
I look forward to all replies, even Marc Smith's  , of which I believe I've read most of his/your posts--so very helpful.
|
| |
Carlo
|
Hi Kayla,
I trust you are well. This is my first time answering a question here so forgive me if I am unclear.
I stumbled upon the same problem as you and with a little investigating, either here or on the WP forum (I'm not too sure), I found a solution.
Basically what you need to do is add a TEXT widget to your sidebar, name it whatever you want, and place the following search code in it:
<form method="get" id="searchform" action="http://INSERT-YOUR-WEB-ADDRESS-HERE">
<input type="text" value="Search here..." onClick="this.value=''" name="s" id="s" style="width: 100px;" />
<button class="Button" type="submit" name="search">
<span class="btn">
<span class="t">Go</span>
<span class="r"><span></span></span>
<span class="l"></span>
</span>
</button>
</form>
You might have to edit this code to display correctly with your theme.
I hope this helps.
Regards,
Carlo
|
| |
Kayla
|
Carlo, you are a gem  . Your solution worked perfectly. You were very clear in your post.
Here is an elaboration on code changes that others should take note:
Don't forget, as I did at first, to change your URL here--INSERT-YOUR-WEB-ADDRESS-HERE (see code above). If you don't, an error page will appear and your first instinct may be that the code is wrong as I did. I also made another mistake in this same area--I forgot to add (include) the final quotation mark.
In regards to this code snippet: <input type="text" value="Search here..."
If you keep it as it is, inside the white box you will have the words "Search here." You have the option of changing that text to whatever suits you or do as I did--I took out this section of code (value="Search here..."). I did leave the "text" part. I believe you have to be careful to not eliminate any of the extra spacings.
With the code as it is above, you will have the word "Go" instead of the word "Search" under the search box. Another simply fix with this same code and it has to do with this code snippet (<span class="t">Go</span>). I'm sure you see what has to be done here--simply change the word Go to whatever suits your site. I chose the word Hunt because my site deals with bears. Genius, HUH?
Now for the size of the size of the search box. The code above generated a box to small for my taste. I wanted a little better symmetry.
Now, where pray tell in the code above will I be able to change this? (FYI, I'm better with bears then humor). Once again, here is the code snippet (style="width: 100px;" />). My belief is that any one that doesn't know what part of the code--within the parenthese--to change to adjust the width (Blue's Clues) of the search box, will fail at whatever they are trying to accomplish from the the website that they are trying to create.
I hope that this information (with a heap of help from Carlo--Thank YOU, Carlo) helps in your website's design. It sure helped me.
Special thanks to Artisteer for this program.
Live well and prosper!
|
| |
Carlo
|
Well done Kayla!
Thank you for the kind words. I am glad you learnt some html & css in the process.
Regards,
Carlo
|
| |
|
|