This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Customization of Search Page

#25675
danielecelsa07danielecelsa07
Participant

Hi Ernest,

thanks for your reply.

1. I think you are looking for the taxonomy terms as results feature.
Well, I think I wrongly explained the situation.
I actually does NOT want Taxonomy Terms as result, my results must be CPTs.
I just would like to have, in the dropdown as suggestions, the taxonomy terms but still have CPTs as results.

Example:
CPT: Watches
Taxonomy: Color

CPT#1: Watch1 -> Taxonomy term associated: Blue
CPT#2: Watch2 -> Taxonomy term associated: Red

In the search bar I type ‘Re‘ and, as a suggestion, in the dropdown I see ‘Red‘ -> so I type ‘Red‘ and search.
In the search result page, I find ‘Watch2

I got that on your website I misunderstood and it is not present this example.
How can I reach it (if it is possible to reach)?

2. Well, this might hive you something close to that:
.asp_r {
border: none !important;
border-left: 1px solid #dfe1e5 !important;
border-right: 1px solid #dfe1e5 !important;
border-bottom: 1px solid #dfe1e5 !important;
margin-top: -12px !important;
padding: 0 !important;
}

.asp_m .probox {
border: none !important;
box-shadow: none !important;
}

.asp_m {
border-radius: 12px !important;
border: 1px solid #dfe1e5 !important;
}

This is NOT really working right now because as you can see here -> https://idlike.app I add now some shadow on the focus of the input box, but I’ll come back to this point when the stuff with more priority will be fixed.

3. I think it is due to the results position is set to “block” instead of the default “hover” mode, and the results container is also part of that block, which is centred overall.
What I did is that I created a new section on Elementor with 4 column, first and last column are empty (for centring the whole layout), second column there is the dropdown, fourth one there is the search bar. I didn’t change the CSS property of any Div. I did a few tries but really I’m not being able to fix this..

4. Drop-downs are very hard to customize on cross platforms, so there is only a built in theme that we use. The chosen script drop-down is even more problematic sometimes. You can start off with something like this:
.chosen-container,
.chosen-container .chosen-single {
background: none !important;
border-radius: 12px !important;
}

.chosen-container .chosen-single {
min-height: 58px !important;
line-height: 45px !important;
}

Ok, now I know which selector to work with thank you. But the problem is that right now, both with this CSS both without any CSS the dropdown is really not clearly visible as you can See from the screenshot here: https://imgur.com/LXc68p8

5. I’m afraid that is not possible. It is not possible to tell before the redirection if there is any results – as the results are parsed after the redirection in that case, in a separate process.
Ok thank you.

Thank you very much in advance,
Daniele