Filter Dropdown Menu – Alignment, Font, Background Colour

[YJUserParticipant]

Hi,

I’ve been going through all the options under Ajax Search Pro settings but I can’t seem to find the settings for the Filter Drop-Down Menu:

1) Alignment to centre
2) Font of Items in the Drop-Down Menu
3) Background Colour (grey by default)

** A screenshot is attached

Would like to find out where I can find these settings.

Thank you.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

I see you are using the filters in a block mode. In that case most styles are inherited from the theme for the maximum possible layout compatibility. The only way to change that is using custom CSS code.

1. Alignment to center
The filters box follows the parent element width and flow and the items are placed in a flex layout (or block depending on the settings). If you however want to center the box itself, you will need to change it to a fixed width and center it via margins. For example this custom CSS code:

div.searchsettings {
     width: 420px !important;
     margin: 0 auto !important;
}

You might have to experiment with the width to get it right.

2 – 3 Font and background color of the drop down items
Similarly, using a custom CSS to change the bg and the font color

div.ajaxsearchpro[id*='ajaxsearchprobsettings'] fieldset select {
    background: white !important;
    color: black !important;    
}

and the font:

div.ajaxsearchpro[id*='ajaxsearchprobsettings'] form * {
    font-family: 'Sans Serif';  
}

Just replace the font and the color values with the ones you need, and it should hopefully do the trick.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[YJUserParticipant]

Hi Ernest,

The font and background CSS worked as intended, thank you very much.

For the alignment, I am able to achieve the centre alignment only on Firefox.
On Chrome, the alignment is still to the left.
On Internet Explorer, the alignment is centre, but there seems to be a “scroll bar” to the right of each drop-down box.

Please let me know if there is a way to fix the alignment issue.

The screenshots are attached.

Thank you.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Can you please link me to an URL where I can see this?

From what I can see the width might not be enough for the chrome, but it’s impossible to tell without actually seeing it.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[YJUserParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Try something like:

.ajaxsearchpro form fieldset {
    float: left !important;
    min-height: 45px;
}

.ajaxsearchpro fieldset .categoryfilter div {
    min-height: 45px;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[YJUserParticipant]

Doesn’t seem to work. Never mind I’ll see if there’s another way to align it.

Thank you.

[Author]

Posts