Search results stlying

I hope you are well today and thank you for your question.

You can makes some styling changes to the AJAX search results using Search Form Customizer displayed on the below path.

Admin Area -> Ivory Search -> Search Forms -> Edit Search Form -> Design -> Search Form Customizer

You have to develop CSS code Fto make more advanced styling changes.

If you are not a developer, you can consider hiring a developer to develop it. You can hire a developer from any freelance site or WordPress agency.

You can also consider me developing it for you using the form https://ivorysearch.com/custom-work/

Best regards,

Hi @vinod-dalvi

I am a developer, so know what I’m looking for, but struggling to understand your CSS or the changes I make impact other areas like removing the padding on the results frame.

I’ve done most of what I want it to look but the 3 tasks I sent, I cannot figure out how you’ve done them or your code is taking president over the Custom CSS that I input (eg. is-ajax-search-result-46 a, #is-ajax-search-details-46 a:not(.button) overrides whatever I try in .is-ajax-search-details a, .is-ajax-search-result a:hover)

Could you kindly send me the appropriate CSS selectors to accomplish what I want.

Thanks

You are using the correct selector but for CSS priority please learn how CSS specificity works as described below.

https://www.w3schools.com/css/css_specificity.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://css-tricks.com/specifics-on-css-specificity/

Hi @vinod-dalvi

Finally got it to work by removing the setting within Customizer which was superseding anything i put in.

My idea doesn’t work anyway as the text stays black until you hover over the text rather than when you hover over the whole search result.

How can I Reduce/remove the border size of the ajax results frame. Looks like its set to 5px padding on div.is-ajax-search-details, div.is-ajax-search-result, but when i reduce the value it off sets the frame on the right hand side.

Thanks

Could you please share screenshots of what you want to achieve so I can help you?

For screenshots, you can simply provide a link to an image through Google Drive, Dropbox, screencast.com, https://imgur.com/ or other image service. ??

Hi @vinod-dalvi

In the screenshots below you can see the results frame border is set to blue, and when i change the padding setting shown in padding-change.png you can see the offset on the righthandside

https://www.racingpenguin.co.uk/screenshots/default-settings.png
https://www.racingpenguin.co.uk/screenshots/padding-change.png
https://www.racingpenguin.co.uk/screenshots/padding-change-closeup.png

CSS selector div.is-ajax-search-details, div.is-ajax-search-result

Thanks

You can change it as described below.

https://ivorysearch.com/topic/search-results-border-width/#post-12925

https://ivorysearch.com/topic/border-width/#post-13945

That code does exactly the same as i have been doing, and getting the offset on the right

Thanks

Then there is no other option than to develop custom code as described in my previous reply.