[Resolved] Different styling for search that shows results on a different page

[Author]

Posts

[sianE]

Tell us what you are trying to do?

I would like to know if I am able to use different styling on a custom search that shows results on a different page.

Is there any documentation that you are following?

https://toolset.com/lesson-placement/lesson-placements-1824669-1979405/

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

When you'll show the view's search form on a different page, it will use the same styles as the actual view that shows the search form and the search results.

Can you please share some details about the difference in styles that you have in mind? I'll be in a better position to guide you with the next steps, accordingly.

regards,
Waqar

[sianE]

On the actual view I have the search form as a left-hand column. So if I use the search only on my homepage, it displays as a column and takes up too much vertical space. I also would have liked to change the text colour from dark to white, so if I put my search only view in a container with a background image on the homepage, it would still be readable - whereas on the actual view page I just want a light grey background, so the text must be dark.

This is my actual view page (directory)
hidden link

This is my home page, where I want to put the search only (scroll to "Search Our Directory" heading to see the container)
hidden link

[Waqar]

Thank you for sharing these details.

Different styling for the search form on the homepage is possible using custom CSS code.

Feel free to let me know once the search form has been added to the homepage and I'll be able to share some pointers for the CSS code, accordingly.

[sianE]

Hi Waqar,

Sorry for the late reply.

I have added the search form to the homepage now.

I was thinking whether it would be better to, on the directory (original) view itself, have two searches, one that is just a text box, transparent background (effectively this would be styled to also display on the homepage), and the other search with the tags and other filters, in the column-design as it is now?

Regardless, your pointers on CSS styling for this would be useful and I would be grateful.

Thank you,
Sian

[Waqar]

Thanks for the update.

You can include the following custom CSS code in the view's "Custom CSS":
( ref: https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view )

.home .wpv-filter-form {
background: rgb(238 238 238 / 75%);
padding: 4%;
margin-bottom: 2%;
}

.home .wpv-filter-form > div > .wp-block-toolset-blocks-container {
overflow: hidden;
}

.home .wpv-filter-form > div > .wp-block-toolset-blocks-container > .wp-block-toolset-blocks-container {
display: block;
width: 23%;
float: left;
margin: 0 4% 0 0;
text-align: left;
}

.home .wpv-filter-form .wpv-custom-search-filter-submit,
.home .wpv-filter-form .wpv-custom-search-filter-reset {
margin: 1% auto 2%;
}

@media (max-width:960px) {
.home .wpv-filter-form > div > .wp-block-toolset-blocks-container > .wp-block-toolset-blocks-container {
width: 80%;
float: none;
margin: 0% auto 4%;
}
}

This code will apply certain styling to the search form, shown on the homepage.

Tip: To show the search form with the same search styles on the top of the directory page too, you can include a new "Container" block on top, add a CSS class "home" to this container, and then include the view block inside this, to show the search form of the same/existing view.

[sianE]

There is no option for custom CSS on that view for some reason. (Screenshot Attached)

Also, is there a way to hide all the search filters EXCEPT only show the text search field?

[Waqar]

Thanks for writing back.

You'll see the field to add the "Custom CSS" when editing the view on the page where it was originally created and not on the homepage, where it is added as an existing view.

It is possible to hide all the search filters except the text search field and let me know when this search form and the custom CSS code are working on the homepage.