demo search not working as imagined – need centering

[nutriodol]

<?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

[nutriodol]

Image as reference

[Ernest Marcinko]

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:

[code]echo do_shortcode(‘[wpdreams_ajaxsearchpro id=1]‘);[/code]

Then on the Theme Options -> Overall box layout you can control the width: http://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:

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

that should do the trick.

[nutriodol]

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

[Ernest Marcinko]

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:

[html]p.asp-try {
color: #000000 !important;
}[/html]

and for the keywords colors:

[html]p.asp-try a {
color: #FF0000 !important;
}
[/html]

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

[nutriodol]

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

[Ernest Marcinko]

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”: http://i.imgur.com/ilegz7E.png

[nutriodol]

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

[Ernest Marcinko]

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:

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

let me know if that works!

[nutriodol]

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

[Ernest Marcinko]

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 🙂

[Author]

Posts