Styling ASP Filter Select Dropdowns and Results

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Styling ASP Filter Select Dropdowns and Results

This topic contains 11 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 5 years ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #13525
    xcentric
    xcentric
    Participant

    Hello,

    Thanks for a truly inspired product. ASP is among the best conceived, implemented and supported software components I have encountered. I placed this request on the code canyon discussion area; but I am on deadline for a major client review in 6 hours and am I hoping for a reply in time to address this issue before then.

    I set up a front-end parametric search using separate search and filter short codes to place the search box and filters in separate columns within a common row/container, with the results presented in a row/container below. This is working as desired.

    Now I am having problems styling the filters (two dropdown selectors – one taxonomy and one custom field). Both selectors are output by ASP as black dropdowns in a single div. However, their horizontal and vertical placement within the div is haphazard and needs to be corrected. And I also need to style these drop downs to match the site design.

    I’ve checked the theme options settings and see many settings for search box and results box styling; but no options to style filters.

    So, how do I target each dropdown selector to (a) position them vertically and horizontally within the div, and (b) style them — set border and background colors, border radius to match the attached design comp?

    Also, I would like to place the Title, Description fields beneath the featured image — not overlaid. How can I accomplish this.

    I am sure there is a way to do all of this, I just need some guidance on how.

    Thanks again for such a well conceived, implemented and supported resource!

    #13526
    xcentric
    xcentric
    Participant

    There was a file upload error – attaching screenshot and design comp.

    NOTE: FTP access requires sFTP protocol with port 2222.

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    #13528
    xcentric
    xcentric
    Participant

    Re-uploading screenshot.

    Attachments:
    You must be logged in to view attached files.
    #13535
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Thank you for your kind words and the details, it helps me a lot!

    I think we can solve the first one quickly for sure:
    The first alignment issue looks like only an invisible ‘legend’ element somehow being visible, this custom CSS should get rid off that:

    .wpdreams_asp_sc form[name=options]>fieldset legend {
        display: none !important;
    }

    ..and then the items should be centered correctly.

    The second one is much more problematic. I will get back to you once I find something usable, as soon as I can.

    Best,
    Ernest Marcinko

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


    #13536
    xcentric
    xcentric
    Participant

    You are welcome Ernesto — I’m happy to praise someone who works as hard as you do to deliver with excellence. Thank you for the excellent product, service and inspiration!

    Your suggestion corrected the drop down vertical centering issue. Thank you.

    I’m looking forward to additional guidance on styling these drop-downs to match the design (drop-down width, border color, background color, border radius, text color for drop-down options, etc.), and placement of title and description container beneath the featured image if possible when you are ready to share them.

    I’m also having some issues retrieving values in custom some fields; but I will open a separate ticket for these items.

    Standing by …

    Thanks!

    #13545
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    I believe I managed to find a way to show the content below the image with some custom CSS code, that I have already added to the search option, and additionally, these options had to be turned off in order to make it work: https://i.imgur.com/7uJRRSR.png
    I believe this is as close as it gets.

    The select drop-down styling is somewhat inherent, to change that I recommend the following custom CSS rule (applies for only instance 11):

    div.wpdreams_asp_sc.wpdreams_asp_sc-11 form select {
      font: arial !important;
      background: red !important;
      border-radius: 0px !important;
      color: black !important;
      border: 0px solid black !important;
    }

    While it’s not advised to use the ‘!important’ modifier, in this case it’s neccessary, to make sure the rules do apply, as the generic search CSS has higher specificity selectors.

    Best,
    Ernest Marcinko

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


    #13546
    xcentric
    xcentric
    Participant

    Thank you so much Ernest. This was extremely helpful. We are almost there. We are seeing some issues with the drop down styling in Safari Mac and Firefox Windows. Please see attached screenshots.

    Here is the CSS I’m using:

    
    div.wpdreams_asp_sc.wpdreams_asp_sc-11 form select {
      font: arial !important;
      font-weight: bold;
      color: #fff !important;
      background: #3884A9 !important;
      width: 100%;
      height: 48px;
      -webkit-border-radius: 24px;
      -moz-border-radius: 24px;
      border-radius: 24px !important;
      //border: 3px solid #3884A9 !important;
    }
    

    Thoughts?

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    #13556
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    For the vertical alignment, try forcing 0 margins on the fieldset, it may do the trick:

    div.ajaxsearchpro.searchsettings[id*="ajaxsearchprobsettings"] fieldset {
        margin: 0 !important;
        width: 50% !important;
    }

    The border radius may not be possible to overrule, I have only found this possible solution on the web:

    div div.wpdreams_asp_sc.wpdreams_asp_sc-11 form select {
        width: 100% !important;
       -webkit-appearance: none; 
       -webkit-border-radius: 24px !important;    
       -moz-border-radius: 24px !important;   
       border-radius: 24px !important; 
    }

    These also contain the width fixes.

    Apparently safari has a very strict built in rule for the select boxes, and it’s extremely hard to style. The ‘-webkit-appearance’ rule may help though.

    Best,
    Ernest Marcinko

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


    #13565
    xcentric
    xcentric
    Participant

    Thank you Ernest. This CSS addressed the alignment and the rounded corners; however, it eliminated the drop-down icon on Safari Mac and Chrome Windows. Please see attached screenshot. Thoughts?

    Attachments:
    You must be logged in to view attached files.
    #13567
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    It’s because of this property in the last rule:

    -webkit-appearance: none;

    You can try removing this line to see how it changes, but it might remove the rounded corners as well. It was a known issue with safari before, I’m not sure if they fixed it already.

    Best,
    Ernest Marcinko

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


    #13581
    xcentric
    xcentric
    Participant

    You are correct. Removing the rule restored the dropdown control icons; but also lost the border radius on Safari. We can live with that while we try and find a solution though. Thanks so much for the responsive and comprehensive help Ernest.

    #13587
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.