- This topic has 14 replies, 2 voices, and was last updated 8 years, 7 months ago by
.
-
Posts
-
The search bar isnt working as I’d like and I have to present this page on Monday can you please help me out?
– I want this style of search bar https://ajaxsearchpro.com/vertical-layout/ with the settings hidden until the settings button is clicked
– The color of the search bar: #dd8808 if accent color is needed: #227bf7When the settings are clicked and appear I dont ant it to push the other content down I want it to cover it… hopefully this makes sense and hopefully you can help me with this.
Ive tried 2 different themes and nothing seems to be looking right for me.
Thanks
Hi,
You can change this behavior on the Frontent search settings -> General panel, the third option: https://i.imgur.com/q4WPcT6.png
A bit more information you can find in this relevant documentation: Frontend Search Settings – Layout & Position
I hope this helps!
Hi,
I’m sorry, somehow I didn’t post the theme and color related answer there, I might have closed the browser window without checking if the post went through.
So, the theme on that page search is the ‘Demo – Vertical blue’: https://i.imgur.com/ekmkPx0.png
But I guess you probably figured that out. To change the bar color, make sure to both change the overall box and the input field gradient color background as well.I have also noticed that there is some sort of custom script adding label and span elements to some of the search input fields (text and checkbox). I highly suggest disabling this script (I can’t see which one it is though), as it may lead to detached event handlers, and could very likely conflict with the search functionality.
Alternatively, you could try these custom CSS rules to hide those additional elements:
[html]
.proinput form label {
display: none;
}.option label span {
display: none !important;
}[/html]These will fix the input fields pushing randomly by the additional label and span elements.
If the preview window is different from the actual front-end page, then it is very likely that the styles have been cached.
Make sure to:
– Clear any cache you have (assets, page, minify etc..)
– Clear the browser cache
– Cloudflare or any equivalent
– Reload the page with CTRL + SHIFT + R to enforce reloading of assetsUnfortunately caching is independent from the plugin, it cannot control that. It does send a query string change and request, but then it’s up to the caching solutions to actually clear their cache data.
Hi,
1. That is because of that weird script that ‘creates’ labels before input fields. It appears that the placeholder text is moved to one of these labels, but of course that is not visible. The best solution would be to simply disable that script, or at least make an exception to not randomly modify the nodes within the search bar.
Alternatively, you I have made a small script that may help, which replaces the placeholder text after page load.
Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!This should hopefully do the trick, but please note that this is only a bypass solution, so I cannot guarantee it will work in all possible cases.
2. I think so. This custom CSS code seems to do the trick on my end:
[html].wpdreams_asp_sc-3 {
background: transparent !important;
}
div.wpdreams_asp_sc-3.ajaxsearchpro div.probox {
background: transparent;
}[/html]It looks like this to me: https://i.imgur.com/cgJOI3c.jpg
Since there are multiple elements stacked, I believe browsers automatically place white backface below stacking background, but this should work out in most cases.You will have to clear your cache to see the changes.
Hi This code did work but it affected the settings and results
.wpdreams_asp_sc-3 {
background: transparent !important;
}
div.wpdreams_asp_sc-3.ajaxsearchpro div.probox {
background: transparent;
}Anything else you can do do help with this?
Thanks for all your help!
Hi,
You are welcome 🙂
I think this one should only affect the main bar:
[html].asp_main_container.wpdreams_asp_sc-3 {
background: transparent !important;
}
div.asp_main_container.wpdreams_asp_sc-3.ajaxsearchpro div.probox {
background: transparent;
}[/html]Hi,
You could use some sort of conditional widget, or use a custom code within the footer that executes the shortcode everywhere, except the home page, like so:
Make sure to change the shortcode on line 6 to the correct search ID.
- You must be logged in to reply to this topic.