Formatting issues

[columParticipant]

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: #227bf7

When 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

[Ernest MarcinkoKeymaster]

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!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[columParticipant]

You cannot access this content.

[columParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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:

.proinput form label {
    display: none;
}

.option label span {
    display: none !important;
}

These will fix the input fields pushing randomly by the additional label and span elements.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Ernest MarcinkoKeymaster]

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 assets

Unfortunately 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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[columParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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:

.wpdreams_asp_sc-3 {
    background: transparent !important;
}
div.wpdreams_asp_sc-3.ajaxsearchpro div.probox {
    background: transparent;
}

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[columParticipant]

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!

[Ernest MarcinkoKeymaster]

Hi,

You are welcome 🙂

I think this one should only affect the main bar:

.asp_main_container.wpdreams_asp_sc-3 {
    background: transparent !important;
}
div.asp_main_container.wpdreams_asp_sc-3.ajaxsearchpro div.probox {
    background: transparent;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[columParticipant]

You cannot access this content.

[columParticipant]

Hi how would I add the compact box layout to the whole site except for the home page?

Thanks

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[columParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

You have an incorrectly set date filter. Both from and to dates are set to 01-01-2016.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts