Settings customization

[adamsoandsoParticipant]

Hello! I recently purchased the plugin and have been working through its many great options and settings in order to make it fit well with our current site. But I’ve hit a bit of a snag with some customizations. I’ve been able to make a new template for the results layout and was wondering if the same was possible for the settings layout. I’ve attached a screenshot of what we’re looking to accomplish.

In the simplest of terms, I suppose I’m wondering if, 1) it’s possible to change the dropdown layout so that it’s using a CSS method rather than a standard HTML <option> method, and 2) if I can change the date filtering to only use the years, as the screenshot shows.

Oh, is it also possible to have the results layout automatically display a certain amount of results on the page load? This search/filter page is designed to show the latest posts, so I’m curious if there’s a way to make it display the most recent 6 or so posts by default until you start searching.

Thank you!

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

1. Filter style
The settings layout is more “fragile” as the results layout, that is why there is no template file available for them. The naming and the structure has to be very precise in order for the information processing.

However I believe that layout (or very similar) should be possible without making direct changes to the plugin, and using some custom CSS. I’ve come up with this after a bit of testing:

.wpdreams_asp_sc .asp_select_label::after {
    content: '';
    border: solid rgb(37, 219, 112);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 0px;
    position: absolute;
    right: -16px;
    margin-top: 3px;
}

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

.wpdreams_asp_sc select {
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}
.wpdreams_asp_sc select::-ms-expand {
        display: none;
}

It resulted in this: https://i.imgur.com/VtAKgaa.png
It’s not by any means a permanent solution, but it’s a good start I guess.

2. Datepicker
It might be possible to hide the unwanted elements via custom CSS, but I believe that it would still not work, as the datepicker requires all information to work.
A better solution in my opinion would be to create a custom taxonomy and the terms would be the years. Then simply make it a taxonomy term filter. With a proper filter, this could be automated on the back-end without the user knowing, when a post is saved.
It would be still less problematic in my opinion, than tweaking the date picker UI widget.

3. Auto populate
That is actually possible, there is a built in feature: Documentation – Auto populate

I hope this helps!

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

[adamsoandsoParticipant]

Thanks very much for your detailed response! And the CSS snippet you whipped up. Very helpful.

A couple follow-up questions: I appreciate the CSS snippet you made and it is indeed fairly close to the design. However I know it’s not possible to style the actual dropdown itself so would that require editing the plugin layout file itself, replacing the <select> structure with a

<li>

structure instead so that it can be styled?

Regarding the datepicker, that makes a lot more sense. Would this be possible by utilizing a custom field rather than creating a whole new taxonomy?

Thanks!

[Ernest MarcinkoKeymaster]

It could be replaced, but then it would not work – because the script serializes and sends the information from the form fields through the ajax request, and a list element is not considered as a form input in javascript, so it would be ignored. In order to include that information, the script also needs to be edited to include the specific list elements, convert them to the correct serialized object, and pass it onto the ajax handler. That is not an easy task, at all, definitely a lot of painful work.
Another possibility is to inject a list object via javascript into the settings box, then hiding the select element. Then adding another script to handle the changes to the list elements to the hidden select element. The the list is visible, and whenever the user makes a change, the select is changed in the background according to that as well. This is probably easier, but still requires a decent amount of work.

Datepicker: That could actually work. Making a custom field with the year value, and then making a filter on that custom field makes sense. It might be easier as the taxonomy term one.

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

[Author]

Posts