Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Search modal

Home Forums Support [Resolved] Search modal

Home Forums Support Search modal

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #495346
    George

    I am looking to incorporate a login modal like this one here.

    Is it possible to give me some pointers?

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #495514
    Leo
    Staff
    Customer Support
    #495642
    George

    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.

    #495843
    Tom
    Lead Developer
    Lead Developer

    Currently this would require a decent amount of coding. It is something I’d like to add as an option soon though πŸ™‚

    #496679
    George

    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…”.

    #496889
    Tom
    Lead Developer
    Lead Developer

    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' )
    	);
    }
    #497346
    George

    Beautiful. Thanks Tom!

    #497470
    Tom
    Lead Developer
    Lead Developer
    #498568
    George

    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?

    #498621
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #498985
    George

    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.

    #499281
    Tom
    Lead Developer
    Lead Developer

    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.

    #499780
    George

    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!

    #499934
    Tom
    Lead Developer
    Lead Developer
    #1623859
    Joel

    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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.