- This topic has 16 replies, 2 voices, and was last updated 3 years, 2 months ago by Joel.
-
AuthorPosts
-
February 13, 2018 at 8:02 am #495346George
I am looking to incorporate a login modal like this one here.
Is it possible to give me some pointers?
February 13, 2018 at 10:51 am #495514LeoStaffCustomer SupportHi 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/
February 13, 2018 at 1:48 pm #495642GeorgeHI 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.
February 13, 2018 at 9:40 pm #495843TomLead DeveloperLead DeveloperCurrently this would require a decent amount of coding. It is something I’d like to add as an option soon though π
February 14, 2018 at 3:14 pm #496679GeorgeOk 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…”.
February 14, 2018 at 10:26 pm #496889TomLead DeveloperLead DeveloperFor 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' ) ); }
February 15, 2018 at 8:18 am #497346GeorgeBeautiful. Thanks Tom!
February 15, 2018 at 10:27 am #497470TomLead DeveloperLead DeveloperYou’re welcome π
February 16, 2018 at 5:48 pm #498568GeorgeHi 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?
February 16, 2018 at 9:38 pm #498621TomLead DeveloperLead DeveloperHi 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; }
February 17, 2018 at 9:37 am #498985GeorgeThanks 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.February 17, 2018 at 9:45 pm #499281TomLead DeveloperLead DeveloperThat’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.
February 18, 2018 at 2:53 pm #499780GeorgeI 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!
February 18, 2018 at 11:14 pm #499934TomLead DeveloperLead DeveloperNo problem! π
January 18, 2021 at 9:04 am #1623859JoelHello, 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
-
AuthorPosts
- You must be logged in to reply to this topic.