• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

Register for full access

Search

Reader Interactions

Comments

  1. Christopher Meinck says

    November 7, 2014 at 2:28 pm

    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!

    Log in to Reply
    • Brad Dalton says

      November 9, 2014 at 1:31 pm

      You’re welcome Christopher

      Log in to Reply
  2. Greg says

    August 23, 2014 at 5:19 am

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

    I’m using genesis eleven40 theme

    Log in to Reply
    • Brad Dalton says

      August 23, 2014 at 6:58 am

      You mean the button color?

      Log in to Reply
      • Greg says

        August 23, 2014 at 3:35 pm

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

        Log in to Reply
        • Brad Dalton says

          August 23, 2014 at 3:53 pm

          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:

          .search-results .archive-description {
          	background-color: blue;
          	color: red;
          }
          
          .search-results .archive-title {
                  color: orange;
          }
          Log in to Reply
          • Greg Welch says

            August 23, 2014 at 4:03 pm

            Thank you

          • Brad Dalton says

            August 23, 2014 at 4:09 pm

            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 Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.