Site logo

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

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

Home Forums Support Customize pages: search results and nothing was found

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2517383
    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?

    #2517511
    Ying
    Staff
    Customer Support

    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?

    #2518183
    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

    #2518353
    David
    Staff
    Customer Support

    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

    #2518381
    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;
    }
    #2518485
    David
    Staff
    Customer Support

    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.

    #2519815
    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

    #2519988
    David
    Staff
    Customer Support

    You would use CSS:

    @media(max-width: 768px) {
        .menu-bar-item.search-item {
            display: none !important;
        }
    }
    #2522319
    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.

    #2522422
    Ying
    Staff
    Customer Support

    Try this:

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

    hi ying, unfortunately don’t work.

    #2522546
    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;
        }
    }
    #2522550
    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;
        }
    #2523440
    Ying
    Staff
    Customer Support

    Glad to hear that 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.