Styling ASP Filter Select Dropdowns and Results

[xcentricParticipant]

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!

[xcentricParticipant]

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.

[xcentricParticipant]

Re-uploading screenshot.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

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

[xcentricParticipant]

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!

[Ernest MarcinkoKeymaster]

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

[xcentricParticipant]

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.

[Ernest MarcinkoKeymaster]

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

[xcentricParticipant]

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.

[Ernest MarcinkoKeymaster]

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

[xcentricParticipant]

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.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts