Placeholder icon

[PrimeMedia]

Hello again Ernest lol :p

Is it possible to add an icon to the placeholder, like for example a maps/location icon?

Thanks in advance.

[Ernest Marcinko]

Hi again 🙂

Well only via custom CSS, something like this:

#ajaxsearchpro2_1 .probox .proinput input.orig {
    background-image: url("https://rioolspot.nl/wp-content/uploads/2024/06/cropped-rioolspot-favicon-32x32.jpeg") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    padding-left: 40px !important;
}

That should result in this: https://i.imgur.com/LYWjvYe.png

The icon has to be an image, optimally around 32x32px or smaller 🙂

[PrimeMedia]

haha even used my favicon, i didnt think about that, but awesome idea.

Thanks again for the great support:)

[PrimeMedia]

You cannot access this content.

[Ernest Marcinko]

Hi,

I don’t see the custom CSS anywhere on the page. If you have a cache of some sort (page, minify, Cloudflare etc..) make sure to clear them. Once it’s on the page it will have an effect 🙂

[PrimeMedia]

You cannot access this content.

[Ernest Marcinko]

Great, I can see it now. It’s only a minor specificity issue. Because it’s printed over the plugin CSS, it’s overwritted by the default CSS. Please use this modified version with higher specificity, it will work:

div#ajaxsearchpro2_1 .probox .proinput input.orig {
    background-image: url("https://rioolspot.nl/wp-content/uploads/2024/06/cropped-rioolspot-favicon-32x32.jpeg") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    padding-left: 40px !important;
}

[PrimeMedia]

You cannot access this content.

[Author]

Posts