- This topic has 13 replies, 3 voices, and was last updated 1 year, 6 months ago by
Tom.
-
AuthorPosts
-
August 30, 2019 at 6:32 am #997116
George
Hi Tom. Is the default search box style accessibility friendly without a search button?
August 30, 2019 at 8:43 am #997318David
StaffCustomer SupportHi there,
It was common place when GP first started that the Submit button was not displayed for the search field. It is hidden with CSS so add this to display it:
.widget_search .search-submit { display: block; }
Unfortunately it has to stay that way to preserve backward compatibility. But maybe something we can address in the future.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 30, 2019 at 7:39 pm #997589George
Okay, thanks. I just explored the dispatch template and I liked how the search is implemented (the way it drops down). How do I replicate that but include a search button at the end (I think it would appear below the close button)?
August 31, 2019 at 8:47 am #997954Tom
Lead DeveloperLead DeveloperHi there,
This should help when it comes to adding a search button to the nav search: https://generatepress.com/forums/topic/change-the-search-bar-style-in-split-template/#post-961560
Once you do that just let us know and we’ll tweak it so it drops down.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 31, 2019 at 8:58 am #997963George
Hi Tom. I tried that code before but it appears broken coz I don’t use font awesome. Anyway, you can still guide me but I excluded the CSS. I edited the original post to include site URL.
August 31, 2019 at 6:23 pm #998155Tom
Lead DeveloperLead DeveloperThat code doesn’t actually require Font Awesome. Any chance you can add the CSS so I can see what about it isn’t working?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 31, 2019 at 9:30 pm #998205George
I added the CSS and purged cache for the front page. What I mean is I use SVG and not inbuilt theme font icons so the icon is not showing up in search.
September 1, 2019 at 9:57 am #998562Tom
Lead DeveloperLead DeveloperAh, in that case, try this as your function:
add_filter( 'generate_navigation_search_output', function() { printf( '<form method="get" class="search-form navigation-search" action="%1$s"> <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" /> <input type="submit" class="search-button" value="%4$s"> </form>', esc_url( home_url( '/' ) ), esc_attr( get_search_query() ), esc_attr_x( 'Search', 'label', 'generatepress' ) , generate_get_svg_icon( 'search' ) ); } );
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 1, 2019 at 9:21 pm #998807George
Okay. I have added the code, but there is some text appearing before and after the icon
http://prntscr.com/p0jzh6
. Anyway, I hope you are able to figure that out so we can proceed.September 2, 2019 at 8:32 am #999231Tom
Lead DeveloperLead DeveloperAh, the SVG icon won’t work inside the search button as it contains HTML (my mistake).
Hmm, I’m not sure how this would be possible.
I wonder if this would work:
add_filter( 'generate_navigation_search_output', function() { printf( '<form method="get" class="search-form navigation-search" action="%1$s"> <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" /> <label> <input type="submit" class="search-button" value="Submit" /> %4$s </label> </form>', esc_url( home_url( '/' ) ), esc_attr( get_search_query() ), esc_attr_x( 'Search', 'label', 'generatepress' ) , generate_get_svg_icon( 'search' ) ); } );
Then this CSS:
.navigation-search .search-button { display: none; }
Does clicking on the SVG icon perform the search now?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 2, 2019 at 8:38 pm #999620George
The CSS works if only I add !important to it. Do I still keep this CSS provided here https://generatepress.com/forums/topic/change-the-search-bar-style-in-split-template/#post-961560? When I click on the icon (it is on the far left near the sidebar scroll thumb) it does indeed perform the search. I am trying to achieve something similar to this https://www.w3schools.com/howto/howto_css_search_button.asp
September 3, 2019 at 8:11 am #1000105Tom
Lead DeveloperLead DeveloperInstead of that CSS, try this:
.search-button + .gp-icon { position: absolute; right: 0; top: 0; line-height: 60px; display: block; color: #fff; cursor: pointer; padding: 0 20px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 3, 2019 at 2:11 pm #1000387George
That worked! I figured out the rest after several trials and errors. Thanks for the code.
September 3, 2019 at 4:50 pm #1000457Tom
Lead DeveloperLead DeveloperNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.