Overriding Ajax Search Pro CSS

[Yans]

Hi,

I am trying to write custom CSS in my theme to override Ajax Search Pro but, there are lots of Ajax Search Pro CSS code that is using “!importnat” and is impossible to override.

For example, I am tying to set padding in the search box input element but it is not possible because the padding property of “div.asp_m.asp_m_4 .probox .proinput input.orig” is set with “!important”.

When trying to add custom CSS via the Ajax Search Pro interface (Theme & Styling > Custom CSS), the CSS code I add there is not being added to the search page or elsewhere.

How can I override those CSS properties or maybe set the search input padding via the Ajax Search Pro interface?

Thanks!

Yan

[Ernest Marcinko]

Hi Yan,

Some rules are indeed enforced to ensure maximum compatibility, as many themes do override paddings and margin (and other rules as well) very agressively.

You can still override these by making higher specificity CSS rules, for example:

div#ajaxsearchpro4_1 .probox .proinput input.orig,
div#ajaxsearchpro4_2 .probox .proinput input.orig {
    padding: 12px !important;
}

However if you are looking to increase the spacing between the search input and the container, you can use this option too: https://i.imgur.com/zvBqmyQ.png

[Yans]

Hi Ernest,

Thanks for the prompt replay.

The only problem I had with that solution, it is targeting a specific search instance, and I need CSS for all 4 search instances I have.

So, I used something called attribute selectors.

Instead of:

div#ajaxsearchpro4_1 .probox .proinput input.orig,
div#ajaxsearchpro4_2 .probox .proinput input.orig {
    padding: 12px !important;
}

I used:

div[id*="ajaxsearchpro"].probox .proinput input.orig {
    padding: 12px !important;
}

It works also with classes:

div[class*="asp_m_"].asp_m.asp_main_container .probox .proinput input.orig {
	color: #1A213D !important;
	font-size: 1rem !important;
}

It does not work 100% of the time, I had one case that I had to use specific ID selector.

Hopefully, this will help someone.

Ernest, this ticket can be closed.

Best,

Yan

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts