[Resolved] Customize pages: search results and nothing was found

[francesco]

I would like to try to understand how I can customize these two pages.
– how can I change the font size?
– in the no results page I can’t replace the page search bar, which I can do in the search results page with a simple page hero.
– is it possible to set that in the mobile version the lens in the menu opens the search page? maybe by linking it?

[Ying]

Hi Francesco,

– how can I change the font size?
– in the no results page I can’t replace the page search bar, which I can do in the search results page with a simple page hero.

For both pages, you can create custom templates using block element - loop template, the template can replace the default GP template completely.
https://docs.generatepress.com/article/block-element-loop-template/

– is it possible to set that in the mobile version the lens in the menu opens the search page? maybe by linking it?

There is NO search page by default, which page are you referring to? Are you creating a static page as the search page?

[francesco]

what I would like to modify is the aesthetic part “nothing was found”, perhaps also modifying the search bar. it’s possible?

There is NO search page by default, which page are you referring to? Are you creating a static page as the search page?

hi ying, yes

[David]

Hi there,

1. Go to Appearance > Elements -> Add New –> Block Element.
2. Set the Element Type to Content Template:
https://docs.generatepress.com/article/block-element-content-template/
3. Set the Display Rules > Location to: No Search Results
4. In the editor build whatever you want to display on the Nothing Found page.
5. Publish the element

[francesco]

hi david thanks for the reply. i think i fixed it. it would be missing to understand how I can connect a static page to the search lens for the mobile version.
another thing, to change font size “search results…” i’m using this CSS.. is there an alternative without CSS?

.search-results h1 {
   font-size: 2em;
}

[David]

you would need to create a separate button to do that.

1. in Appearance > Elements -> Add New -> Block element.
2. Set the Hook to menu_bar_items
3. set the display rules to entire site.
4. Add you GB button block with just an icon and the link.
4.1 With the button selected go to Advanced > Additional CSS Classes and add: hide-on-desktop hide-on-mobile

Publish that.

[francesco]

Hi David, thanks for the reply. but how can i hide the search field in the mobile version? on customization I realize that I can’t choose whether to enable or disable it by choosing desktop, tablet or mobile views but in general for all. so I would like to keep the normal search field for the desktop version and create a search with a static page for the mobile version and possibly also the tablet. thank you in advance

[David]

You would use CSS:

@media(max-width: 768px) {
    .menu-bar-item.search-item {
        display: none !important;
    }
}

[francesco]

hi david, the css works perfectly. I wanted to ask, is there a way to hide the search bar only on certain pages? example on the search page.

[Ying]

Try this:

.search-no-results span.menu-bar-item.search-item {
    display: none;
}

[francesco]

hi ying, unfortunately don’t work.

[francesco]

thic css work

.search-no-results span.menu-bar-item.search-item {
        display: none !important;
    }
}

but I would like the same effect in the search results page, I tried this css but it doesn’t work.
ù

.search-results span.menu-bar-item.search-item {
        display: none !important;
    }
}

[francesco]

my error.. this codes works

.search-no-results span.menu-bar-item.search-item {
        display: none !important;
    }
.search-results span.menu-bar-item.search-item {
        display: none !important;
    }

[Ying]

Glad to hear that 🙂

[Author]

Posts