How to Style the GravityView Search Bar Widget

GravityView contains several widgets that you can add to your View to improve the way you navigate among entries. In this post, we’re going to show you how to style the GravityView Search Bar widget to help give your Views a more consistent look.

Here’s what we’re going to cover in this post:

• Adding a search bar to your View
• Configuring the Search Settings
• Styling the Search Bar with Custom CSS
• Styling Additional Search Fields
• Wrapping Up

Okay, let’s get started.

Adding a Search Bar to Your View

Log in to your WordPress website, hover over Views, and click on All Views. Now click Edit on the View you want to modify.

You can add a Search Bar widget to any of the widget areas on the Multiple Entries Layout tab. Simply click on the Add Widget button and select Search Bar.

After adding a search bar, you need to configure the search settings.

Configuring the Search Settings

To open up the Search Settings, click on the gear icon to the left of the search bar widget. Here you can change the search layout and add more search fields.

The way you configure your search bar will depend on how you want users to be able to search through your entries. For this example, we’ll keep things simple by adding a Search Everything field that allows users to search on keywords.

How to Style the GravityView Search Bar with Custom CSS

Before we get into styling the search widget, here’s the look we’re going for.

Before:

After:

If you need a refresher on adding custom styles to WordPress themes, check out this article.

Before attempting to style an element in GravityView, it’s always best to consult our CSS guide. Here you’ll find a list of all the CSS IDs and classes used in GravityView, grouped by element type.

As you can see, the search bar is contained inside a <div> with the class .gv-search-horizontal for the horizontal layout and .gv-search-vertical for the vertical layout.

The actual search input has a container with the class .gv-search-box.

Let’s start by styling the .gv-search-horizontal <div> to achieve the raised look above. We’ll give it a drop shadow, some padding (so the content isn’t right up against the sides), and a border-radius of 10px so that the corners appear rounded.

.gv-search-horizontal {
	box-shadow: 0px 0px 5px 2px #b3b3b3;
	padding:20px;
	border-radius:10px;
}

Next, we’ll style the search bar by targeting the search input inside the .gv-search-box <div>. We’ll give it a width of 100% so that it spans the length of our view, padding on all sides, and a blue border.

.gv-search-box input[type=search] {
    	border-radius: 10px;
   	height: 50px;
    	width: 100%;
    	padding: 5px 10px 5px 10px;
    	background-color: #fff;
	border: 5px solid #55aef6;
}

We’ll also add focus styles to the search bar to make the border more pronounced when someone clicks to input a keyword. This can be achieved using the CSS :focus selector.

.gv-search-box input[type=search]:focus {
	border-color:#0d8bf2;
	box-shadow: 2px 2px 5px 2px #bfbfbf;
}

If you’re unsure what focus styles are, take a look at the GIF below.

Okay, now that we’ve finished styling our search bar, let’s turn our attention to the search button.

The search button is also contained within the .gv-search-box <div> and it has the class .gv-search-button.

Let’s make it blue to match our search bar, add some padding for volume and make the text white.

.gv-search-box .gv-search-button {
	background-color: #55aef6; 
  	border: 2px solid #55aef6;
	border-radius:10px;
  	color: #ffffff;
  	padding: 15px 32px;
 	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
}

We’ll also add some hover styles to match the focus styles on the search bar. We can do this using the CSS :hover selector.

.gv-search-box .gv-search-button:hover {
	background-color: #0d8bf2;
	border: 2px solid #0d8bf2;
	cursor: pointer;
}

Note, without adding cursor:pointer, the mouse won’t change when hovering over the search button.

Styling Additional Search Fields

The GravityView search bar widget supports multiple search fields. You can add new input fields to the search widget by opening the Field Settings and clicking on the green plus icon.

Here we’ve added three search fields – one for the name, one for the email address, and one for the city. Here’s what our search widget looks like after a little bit of styling.

All of our search fields are text inputs, so here’s what our CSS looks like: 

.gv-search-box input[type=text] {
    	border-radius: 10px;
    	height: 50px;
    	width: 100%;
    	padding: 5px 10px 5px 10px;
    	background-color: #fff;
	border: 5px solid #55aef6;
}

We also changed the label font type and size by targeting the label element:

.gv-search-box label {
	font-size: 20px;
	font-family: 'Montserrat',sans serif;
}

That’s it! We’re done. If you’d like to see the full CSS code, you can get it here.

Wrapping Up

GravityView widgets tend to inherit their styles from your WordPress theme, but sometimes they display as plain HTML. In this post, we showed you how to add custom styles to the Search Bar widget to achieve a more attractive look.

You can use our helpful CSS guide to check what classes and IDs GravityView uses for different elements. This can give you a headstart when customizing different elements of your View.

Feel free to use the CSS code in this post as a starting point for designing your own, unique search widget. And when you’re done, be sure to let us know – we’d love to see what you come up with!

For more information about adding custom styles to GravityView, check out our previous post How to Style the Buttons on GravityView’s Edit Entry Page.