- This topic has 13 replies, 3 voices, and was last updated 4 years, 7 months ago by Tom.
-
AuthorPosts
-
August 30, 2019 at 6:32 am #997116Jim
Hi Tom. Is the default search box style accessibility friendly without a search button?
August 30, 2019 at 8:43 am #997318DavidStaffCustomer 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.
August 30, 2019 at 7:39 pm #997589JimOkay, 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 #997954TomLead 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.
August 31, 2019 at 8:58 am #997963JimHi 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 #998155TomLead 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?
August 31, 2019 at 9:30 pm #998205JimI 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 #998562TomLead 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 ๐
September 1, 2019 at 9:21 pm #998807JimOkay. 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 #999231TomLead 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?
September 2, 2019 at 8:38 pm #999620JimThe 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 #1000105TomLead 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; }
September 3, 2019 at 2:11 pm #1000387JimThat worked! I figured out the rest after several trials and errors. Thanks for the code.
September 3, 2019 at 4:50 pm #1000457TomLead DeveloperLead DeveloperNo problem ๐
-
AuthorPosts
- You must be logged in to reply to this topic.