Add Back Submit Button Inline With Search Form Box In Genesis

This tutorial produces exactly what you see in the screenshots.

It is tested on the Eleven40 Pro child theme by StudioPress only.

By default, many StudioPress child themes don’t display a submit button next to the search box because its been hidden using CSS like this:

search form without button

There’s 2 simple steps you need to follow to add the button back which we’ll do inline with the search forms input field like this:

add search form input button


Comments

8 responses to “Add Back Submit Button Inline With Search Form Box In Genesis”

  1. Christopher Meinck Avatar
    Christopher Meinck

    Thank you for the tutorial. I had issues with my search box falling under my header when viewing horizontally on the iPad. This solves that problem and gives the site a cooler, more powerful search function. My next step is to convert it to Google Search. Awesome!

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Christopher

  2. Is it possible to change the color of the search results black box?

    I’m using genesis eleven40 theme

    1. Brad Dalton Avatar
      Brad Dalton

      You mean the button color?

      1. Hi Brad, after you do your search the results page has a box at top that has “Search results for:” in it

        1. Brad Dalton Avatar
          Brad Dalton

          So you’re referring to the search results page rather than the search box?

          You can create your own custom search.php template file

          Or use Firebug to find the classes and modify the values.

          Something like this:
          [code]
          .search-results .archive-description {
          background-color: blue;
          color: red;
          }

          .search-results .archive-title {
          color: orange;
          }
          [/code]

          1. Greg Welch Avatar
            Greg Welch

            Thank you

          2. Brad Dalton Avatar
            Brad Dalton

            You can find the CSS using Firebug or Chrome Dev tools and the body classes are in the source code of the page so you just right click, view page source and scroll down until you find the body classes and use the class which works with your CSS.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.