Search modal

Hi there,

A user suggested something here: https://generatepress.com/forums/topic/how-to-create-a-modal-login/#post-467495

Or maybe this? https://en-ca.wordpress.org/plugins/easy-modal/

HI Leo.

Sorry my mistake here! I meant a SEARCH modal like the page I showed you where the modal actually displays the search input field! My bad because I mistyped it even though the example I sent clearly is a modal search box. The examples you gave me deal with content or login modals. I guess what I am after is some kind of javascript that will load a modal overlay with a search box inside.

Currently this would require a decent amount of coding. It is something I'd like to add as an option soon though :)

Ok fair enough.

Is there a way to change the default search overlay color? Currently it seems to be taking the color of the menu item mouse over. Could I change that? Also, is there a way to have some text (where the blinking cursor is after you click on the magnifying glass) that says something like "Search for...".

For the color, you can do this:

.navigation-search input[type="search"]:focus,
.navigation-search input[type="search"] {
    background-color: #222;
    color: #fff;
}

As for the placeholder text, this function should do it:

add_filter( 'generate_navigation_search_output', 'tu_navigation_search_placeholder' );
function tu_navigation_search_placeholder() {
	printf( 
		'<form method="get" class="search-form navigation-search" action="%1$s">
			<input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" />
		</form>',
		esc_url( home_url( '/' ) ),
		esc_attr( get_search_query() ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
}

Beautiful. Thanks Tom!

You're welcome :)

Hi Tom, sorry for getting back to it. I noticed a couple of things:

Even though the font color has been set to white (#FFF) the actual placeholder text on the page looks kind of grey. I tried changing with CSS but it didn't work.

Also when I click on the search icon and then click away from it outside the browser window, the search field background defaults to the menu hover color again.

Is there a fix for those?

Hi there,

I just edited the CSS above to fix the clicking away issue.

For the placeholder color, try this:

.navigation-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}

.navigation-search input::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}

.navigation-search input:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}

.navigation-search input:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

Thanks for taking the time to do that, Tom, Firefox needed an extra style opacity:1;. I couldn't say for Internet Explorer 11 though because placeholder text wasn't even visible. It is actually momentarily visible when you click out of the search box and then it's blank again! I also checked compatibility mode. I looked online but couldn't find a working solution. If you can't think of something, I am happy to let it slide as I don't consider it so important.

That's strange - like the text color goes transparent? I'm not 100% sure why that would happen, but IE11 definitely isn't an amazing browser.

I don't think it goes transparent, I think it's just not there but gets momentarily visible when clicked out. Anyway, I think we all share the same opinions as far as Internet Explorer goes so I will not go any further with this!

Thanks again Tom!

No problem! :)

Hello, just wondering if this has been added as an option yet? - https://generatepress.com/forums/topic/search-modal/#post-495843

Or if not whether there is any documentation I can follow? I like the way it's been implemented here.

Thanks