Filter Dropdown Menu – Alignment, Font, Background Colour

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Filter Dropdown Menu – Alignment, Font, Background Colour

This topic contains 6 replies, has 2 voices, and was last updated by YJUser YJUser 5 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #11111
    YJUser
    YJUser
    Participant

    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.
    #11120
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #11137
    YJUser
    YJUser
    Participant

    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.
    #11165
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #11186
    YJUser
    YJUser
    Participant
    You cannot access this content.
    #11201
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #11212
    YJUser
    YJUser
    Participant

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

    Thank you.

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

You must be logged in to reply to this topic.