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

WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Subscriptions
  • 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!

    Reply
    • Brad Dalton says

      November 9, 2014 at 1:31 pm

      You’re welcome Christopher

      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

    Reply
    • Brad Dalton says

      August 23, 2014 at 6:58 am

      You mean the button color?

      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

        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;
          }
          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

Your email address will not be published. Required fields are marked *

Primary Sidebar

Code written by Brad Dalton specialist for Genesis & WooCommerce.

Advertise · WPEngine · Genesis · Log in

  • Account
  • Consulting
  • Post Tags
  • Contact
  • Terms
  • Monthly Membership
  • Yearly Subscriptions
  • Log in
 

Loading Comments...