Overriding Ajax Search Pro CSS

This topic has 3 replies, 2 voices, and was last updated 1 year, 10 months ago by Ernest Marcinko.

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

Author

Posts
September 12, 2024 at 9:32 am #49253

Yans
Participant

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

September 12, 2024 at 9:37 am #49254
Ernest Marcinko
Keymaster
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
September 12, 2024 at 5:37 pm #49268
Yans
Participant
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
September 13, 2024 at 10:49 am #49269

Ernest Marcinko
Keymaster

You cannot access this content.
Author

Posts

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

The topic ‘Overriding Ajax Search Pro CSS’ is closed to new replies.