Adding a message beneath the Search bar (but within the header) in Guide

Beantwortet


Gepostet 09. Sept. 2022

I want to add a message to our Guide front page with an announcement of some changes. I am a novice with CSS and have a basic grasp of HTML. Anyway, I managed to get the message where I want it and displaying as I want by making small adjustments to the header_page.hbs and style.css.

The problem is that the magnifier no longer aligns to the search box and I wonder how to correct that. It now shows just beneath the box as shown.

 

 

 


0

4

4 Kommentare

      Oliver Mottram

      Edit home_page.hbs

      replace 

       {{search submit=false instant=settings.instant_search class='search search-full'}}
      </div>

      with

      {{search submit=false instant=settings.instant_search class='search search-full'}}

      <p></p>
      <table style="width: 100%; border-collapse: collapse; background-color: #800080; height: 36px;" border="0">
      <tbody>
      <tr style="height: 36px;">
      <td style="width: 100%; text-align: center; height: 36px;"><span style="color: #eeeeee;"><strong>What's New?</strong> The Knowledge Base has been refreshed with new and updated content which incorporates the Enhanced Navigation Experience changes. Check it out!</span></td>
      </tr>
      </tbody>
      </table>

      </div>

       

      and edit style.css

      .search-icon {
      position: relative;
      top: 50%;
      transform: translateY(-50%);

      to 


      top: 55%;

       

       

      .hero-inner {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-width: 610px;
      margin: 0 auto;

      to

      top: 50% (we ended up leaving it as was)

       

       

      .hero {
      background-image: url($homepage_background_image);
      background-position: center;
      background-size: cover;
      height: 300px;

      to

      height: 200px;

       

      Hope that helps!

      0


      how did you add the message below the search box please? Martin Cubitt

      0


      Thank you so much, worked a charm! (20% for me, but that was the section I didn't see)

       

      0


      Hey Martin Cubitt

      Adjust the CSS: Copy-paste the code.

      .hero-inner .search-icon {
        top: 11%;
        transform: translateY(-11%);
      }


      Note: You can increase or decrease the number 11% as per yours.

       

      Thanks

      Team

      1


      Anmelden, um einen Kommentar zu hinterlassen.

      Sie finden nicht, wonach Sie suchen?

      Neuer Post