demo search not working as imagined – need centering

Home Forums Product Support Forums Ajax Search Pro for WordPress Support demo search not working as imagined – need centering

This topic contains 10 replies, has 2 voices, and was last updated by

 
Keymaster
6 years, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #7033

    Participant

    <?php echo do_shortcode(‘[wpdreams_ajaxsearchpro_two_column id=1 search_width=50 results_width=50 invert=0 element="div"]‘); ?>

    Hi guys,

    I am really struggling to get this working. The problem is that it just does not want to center it the same way as on demo page.

    How to make it entered with the search bar in the middle of the page 300px wide and the search result to display under it?

    Thank you,

    PS: please go in through http://www.liveukdeals.co.uk/wp-admin
    Pavel

    #7034

    Participant

    Image as reference

    Attachments:
    You must be logged in to view attached files.
    #7036

    Hi!

    I suggest rather using the defautl shortcode not the two column one. The demo has been recently updated and it’s actually using the default shortcode. The two column shortcode is used to display the search on the left (or right) and the results on the other side. In your case it’s simply:

    echo do_shortcode('[wpdreams_ajaxsearchpro id=1]');

    Then on the Theme Options -> Overall box layout you can control the width: https://i.imgur.com/5TWRCUU.png

    The position depends on the parent element, but if you want to force centering, then use this custom CSS, it will push the search box to the center relative to the parent element:

    
    .asp_main_container,
    p.asp-try {
        width: 300px !important;
        margin: 0 auto !important;
    }
    

    that should do the trick.

    Best,
    Ernest Marcinko

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


    #7039

    Participant

    Hi ernest,

    Thank you very much!

    The custom CSS did the job perfectly. However for someone that has the same issue and wants to keep the responsiveness intact, play with the with as % instead of px I think.

    Ernest, I have another issue in changing the colour of recommended terms under the search bar. (phrase 1,phrase 2 etc.)

    In the back end the colour has changed, but front end stays the same?

    Any fix for that, please?

    Thank you,

    Pavel

    Attachments:
    You must be logged in to view attached files.
    #7041

    Great, I’m happy it works.

    Hm, I think it’s a bug. I checked the code, and I made a mistake there, so it only works on the back end. For now I suggest using a custom CSS for this as well.

    For the text color:

    p.asp-try {
        color: #000000 !important;
    }

    and for the keywords colors:

    p.asp-try a {
        color: #FF0000 !important;
    }
    

    Just replace #000000 and #FF0000 with the desired color codes or color name. I hope this is going to work.

    Best,
    Ernest Marcinko

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


    #7042

    Participant

    wow yeah, that is just swell!!!!

    Worked perfect.

    Ernest, while I have you on the line here…

    Could you tell me, how to make the results display as on the demo page, please?

    I want it to move the content down and show underneath the suggested terms.

    Thank you,

    Pavel

    Attachments:
    You must be logged in to view attached files.
    #7044

    Oh sorry, I forgot to tell how in the first reply.

    On the Layout Options -> Results layout panel, change the Results layout position option to “Block – pushes content”: https://i.imgur.com/ilegz7E.png

    Best,
    Ernest Marcinko

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


    #7048

    Participant

    Thank you very much, got that too. I don’t know, how I could miss that.

    One more question for you please?

    I got the results, but how do I contain them in the same width as the search bar ( same as demo?)

    Thank you,

    Pavel

    Attachments:
    You must be logged in to view attached files.
    #7053

    Do you use the results shortcode? If so, then you should not use it in your case, it forces an automatical width.

    Also, if not, then similarly to others, this CSS should force to override the inherited width:

    
    div[id*="ajaxsearchprores"], div[id*="wpdreams_asp_results"] {
        width: 300px !important;
        margin: 0 auto !important;
    }
    

    let me know if that works!

    Best,
    Ernest Marcinko

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


    #7054

    Participant

    Hi Ernest,

    That worked a treat.

    You are one of the few that go the one step further in helping your customers, even outside your working hours.

    I am fighting with some other mods, but hopefully will be able to get it done on my own.

    Thank you,

    Pavel

    #7055

    You are welcome Pavel.

    I’m doing my best to help you all, as much as I can. I’m not always this fast, sometimes it takes even 48 hours to respond (during support time) if I get a large amount of tickets in a short period of time 🙂

    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.