Tips: Styling the Search Bar

2834
0
03-02-2017 01:45 PM

Tips: Styling the Search Bar

Update 09/15/2019: This post is now outdated as we have since released the Search Card, which allows you to add a straight search to your site or page. Our early version of search was only available from within the Banner Card and subsequently required custom CSS to make it look taller, wider, and to override some of the padding that came with the banner headings even when they weren't visible. We also ditched the previous search bar that had two input fields (one for keyword and one for location) in favor of one smarter search bar that can search by location via the keyword near, which is included in the helper text at the bottom of the autosuggest.

You can read more about the search bar and our new search experience on our blog.

---

In our layout builder, the search bar appears as part of our banner card. The banner card is based around Bootstrap's .jumbotron class and inherits padding from that class, which you may want to remove. Here are some ways you can change the look of your search bar using a text card.

Before we begin, there are a few important things to note:

  • The CSS provided here is from other customers' implementations and has not been cross browser tested by us; therefore, we do not guarantee that it will work perfectly with our layout and cards in the manner that you might want.
  • Styling the search bar requires embedded <style></style> in a text card. 
  • Any embedded styles can affect your entire homepage if you do not target specific selectors correctly.
  • It does not matter where in the page you place the text card.
  • Never use an ember-# ID selector as these are dynamic and will change with each page refresh.
  • Styling the .jumbotron class will affect all banner cards you add to your page.

Single Long Search Bar



1. Add a row card. Set row background color and row text color.

2. Add a text card to the row. 

3. Add a banner card underneath the text card in the same row.

4. In the banner card settings, remove the headline. Add a subheadline to achieve the "Enter a keyword..." Delete all other field values. Select 'Show Searchbar' checkbox and add any desired search bar placeholder text.

5. In the text card, delete the contents and paste in the following snippet:

 Edit: Kevin Dunlop has pointed out that there are issues with typing in the search bar for IE11 if you use the original styles I posted (I have since deleted them.) He figured out that it was due to the padding and provided the following snippet, which he verified works correctly.

<style>
h2.single-sb-heading {margin-bottom: 0px; padding: 0px; font-size: 20px; color: #005eb8;}
.ember-application .jumbotron {padding: 0px auto; margin: 0px auto;}
.ember-application .jumbotron h1 {font-size: 28px;text-shadow:none;}
.ember-application .jumbotron p {padding-bottom: 0px;}
.ember-application .jumbotron form input {width:500px;}
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


<h2 class="single-sb-heading text-center">Search Data and Apps</h2>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

(You may notice a slight visual discrepancy between the layout editor and viewing the live site in all of these as the text card has a min-height in the layout editor.)

Tags (1)
Version history
Last update:
‎12-12-2021 03:49 AM
Updated by: