Executive Pro Display Search Button

[Aryadne]

For UX reasons I would like the search button to be visible but I can't figure out how to do this.

Any ideas?

http://webnetcontractors.com/

[RobG]

I'm not sre I understand what your asking I can see your search box in your right header section.

---

To speed up the process please post the link to the website in question.

We recommend using Firebug to view source codes http://getfirebug.com/

RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

[Aryadne]

I have the search input box visible but not the search button. I want the button so that it is clear what to do after inputting search text. It's a UX thing.

I use Firebug religiously! 🙂

Thanks for your help.

[Brad Dalton]

There's no button for the default however you could add Google custom search there instead which is more accurate.

---

Tutorials for StudioPress Themes & WooCommerce.

[RobG]

Hi Brad, Are you saying she can add the Google search in the widget section?

I was thinking she could add this CSS search button to the existing form

}

#search_button {
    position:absolute;
    top:0;
    right:0;
    width:80px;
    height:40px;
}

---

To speed up the process please post the link to the website in question.

We recommend using Firebug to view source codes http://getfirebug.com/

RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

[Anita]

What she is asking for is the BUTTON that you click to search - NOT the Magnifying Glass. With the latest updates - the BUTTON that you would CLICK that says SEARCH or GO is gone. She wants the BUTTON BACK.

---

Love coffee, chocolate and my Bella!

[Anita]

Look for this in your style.css sheet -

.search-form input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

Delete all of that or just block it out and the button will return. You can then customize it to your liking.

---

Love coffee, chocolate and my Bella!

[RobG]

Is this included in this theme or was it removed? I know most have it, Thanks for the help with this

---

To speed up the process please post the link to the website in question.

We recommend using Firebug to view source codes http://getfirebug.com/

RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

[Anita]

Most of the newer themes have that code in there. I just wrote a little blog about it here. I am no "Brad Dalton" but at least I wrote this little tutorial! LOL!

---

Love coffee, chocolate and my Bella!

[RobG]

Looks great very easy to understand thank you so much for your tips it's always better to have other views.

---

To speed up the process please post the link to the website in question.

We recommend using Firebug to view source codes http://getfirebug.com/

RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

[Brad Dalton]

Good code Anita and good to see your writing short, useful and unique tutorials.

I shared that to my network as well.

---

Tutorials for StudioPress Themes & WooCommerce.

[Anita]

Thanks Brad, I didn't want to start out being too wordy since I am still a bit new at it!

---

Love coffee, chocolate and my Bella!

[RobG]

@Anitac I think getting right to the point while writing tutorials is the best way for people to understand because most people start getting confused if the article is to wordy.

---

To speed up the process please post the link to the website in question.

We recommend using Firebug to view source codes http://getfirebug.com/

RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

[Anita]

Thanks Rob, I appreciate your feedback. I know when I look at very technical tutorials... the "why i need to do this" or moot to me. Just tell me how to do it. 🙂

---

Love coffee, chocolate and my Bella!

[RobG]

That's correct I've writen a number of tutorial over the years and I try to focus on what's really important when I write so you can understand quickly. Nice start

---

To speed up the process please post the link to the website in question.

We recommend using Firebug to view source codes http://getfirebug.com/

RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

[Aryadne]

Awesome, Anita!

It worked great.

[Anita]

To bring the button horizontal with the search box, look for this:

.search-form input[type="search"] {
    background: url("images/icon-search.png") no-repeat scroll right center / 36px 16px #FFFFFF;
    color: #888888;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 1.6rem;
    text-transform: uppercase;
    width: 100%;
}

Change 100% to auto. If you want to remove the magnifying glass - remove that background image from the second line.

Then look for this:

button, input[type="button"], input[type="reset"], input[type="submit"], .button, .entry-content .button {
    background-color: #006699;
    border: medium none;
    border-radius: 5px;
    box-shadow: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 1.6rem 2rem;
    width: auto;
}

Change the padding from 1.6rem to about 1.3rem.

---

Love coffee, chocolate and my Bella!

[ZAAAX]

Just thought I'd ask seeing as how I'm working on trying to get the magnifying glass image to be the "Search Button" that you click for the search to happen.

So far I cannot work out where the "<input type="submit" value="Submit">" would go in relation to the image and CSS Code below ....

.genesis-nav-menu .search input[type="submit"],
.widget_search input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

.search-form input[type="search"] {
	background: #fff url(images/icon-search.png) no-repeat right;
	background-size: 36px 16px;
	color: #000;
	font-size: 10px;
	border: #333 solid 1px;
	margin-bottom: 6px;
	padding: 10px;
	text-transform: uppercase;
	width: 100%;
}

Hope I'm making sense.

---

Crisp!

ZAAAX Design

[Author]

Posts