Searchbar in article - Knowledge Base

Beantwortet

7 Kommentare

  • Erica Girges
    Zendesk Developer Advocacy
    Hi Xenia,
     
    Thanks for posting your question to the Community!
     
    Let me go ahead and pull you into a ticket so I can get a better look at the theme's code and see if we can help figure it out.
     
    Best,
     
    Erica
    0
  • Pulkit Pandey
    Community Moderator

    Hi Xenia Georgopoulou

    Is it possible for you to share the code of the two following template

    -  category_page.hbs

    -  article_page.hbs

    so that I can help you out by adding the search-bar on the article template 

     

    Thanks 

    Pulkit

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Xenia Georgopoulou,

     

    Follow the below steps:

    i). Go to your theme to edit mode.

    ii). Open your category_page.hbs file.

    iii). Copy the searchbar code which start from a div -

    <div class="search search-lg text-base font-size-lg lg:font-size-xl">

     

    other code is here

     

     

    </div>

     Screenshot for the same:

     

     

    iii). Now, open your article_page.hbs file.

    iv). Paste that copied code just after the <nav ..> </nav> code.

    nav code:

    <nav class="inline-flex p-3 font-size-md bg-translucent border-radius">

    </nav>

    searchbar code:

    <div class="search search-lg text-base font-size-lg lg:font-size-xl">

    <svg ....>

    </div>

     

    Screenshot for the same:

     

    If any confusion feel free to ask :)

    Team

    0
  • Xenia Georgopoulou

    Thank you all so much for your help!
    @Ifra Saqlain I tried your method and got the searchbar in every article.
    Now the only thing I would like is it to be a little bit smaller in height, so that it doesn't "fall" on the title..



    Category_page code that I copied was this:

    And then paste it here in aritcle_page:


    Can you please help me with that too?

    Thank you in advance!

    1
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Xenia Georgopoulou, you only need add a class name to your article_page.hbs search-bar, see how I did:

    I added mb-6 class to the search-bar wrapper for article page. it doesn't relate to height, it causes of bottom space.

     

    You can add space as per your requirement, 

    mb-4 - margin-bottom: 1rem;

    mb-6 - margin-bottom: 2rem;

    mb-8 - margin-bottom: 4rem;

    0
  • Xenia Georgopoulou

    Thank you so much! It worked!!
    Have a nice week!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    You too :)

    1

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk