Formatting issues

This topic contains 14 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #15163
    colum
    colum
    Participant

    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

    #15171
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15179
    colum
    colum
    Participant
    You cannot access this content.
    #15181
    colum
    colum
    Participant
    You cannot access this content.
    #15182
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15184
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15189
    colum
    colum
    Participant
    You cannot access this content.
    #15191
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15192
    colum
    colum
    Participant

    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!

    #15193
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15194
    colum
    colum
    Participant
    You cannot access this content.
    #15195
    colum
    colum
    Participant

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

    Thanks

    #15197
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15202
    colum
    colum
    Participant
    You cannot access this content.
    #15203
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.