Archived topic
Check function and CSS for search customization
15 replies · Started by Hilton on October 4, 2019
Hi,
I've changed the search style following this instructions https://generatepress.com/forums/topic/change-the-search-bar-style-in-split-template/#post-961560
I also use a placeholder in search field.
So despite it seems to be working well, I'd like to confirm that I am using the optimal php and css.
Besides that, I'd like to know how can I change from Font do SVG in "General" settings, while keeping the magnifying glass inside search field.
PHP:
add_filter( 'generate_navigation_search_output', function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Buscar ..." class="search-field" value="%2$s" name="s" title="%3$s" />
<input type="submit" class="search-button" value="">
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' )
);
} );
CSS:
.navigation-search input[type="search"]::placeholder {
color: #cccccc;
}
.navigation-search.nav-search-active {
left: auto;
width: 300px;
top: 100%;
padding: 20px;
background: rgba(255,255,255,.9);
border-radius: 5px;
}
.navigation-search.nav-search-active input {
border: 1px solid #ddd;
border-radius: 5px;
height: auto;
}
.navigation-search {
top: 150%;
transition: opacity 300ms ease-in-out, top 300ms ease-in-out;
left: auto;
}
.navigation-search input[type="search"] {
background-color: #ffffff !important;
}
.navigation-search input[type="search"]:focus {
background-color: #ffffff !important;
color:#595959 !important;
}
.navigation-search.nav-search-active .search-button {
position: absolute;
right: 30px;
top: calc(50% - 15px);
height: 30px;
display: block;
content: "\f002";
font-family: GeneratePress;
opacity: .5;
width: auto;
background: transparent;
color: #595959;
border: 0;
padding-left: 5px;
padding-right: 5px;
}
Hi there,
Looks good to me!
Hi Leo,
Can you help me to display search field 100% width as it is hidden on left (mobile only :) )?
Curently the width is 300px set by this block of CSS:
.navigation-search.nav-search-active {
left: auto;
width: 300px;
top: 100%;
padding: 20px;
background: rgba(255,255,255,.9);
border-radius: 5px;
}You could try 100%;
Hi Leo,
Please check again because it didn't work :(
You can notice that in mobile the left side of the search field is hidden. I suspect that when adding the padding below, instead of compressing search input field, it expands more than the screen.
.navigation-search.nav-search-active {
left: auto;
width: 100%;
top: 100%;
padding: 20px; <--------
background: #0e549a;
}
I guess I've fixed that with "box-sizing : border-box;" CSS
.navigation-search.nav-search-active {
left: auto;
width: 100%;
top: 100%;
padding: 20px;
background: #0e549a;
box-sizing: border-box; <----------
}
Yup that's the way to go.
I like the design!
Thanks Leo ;)
Is there a way to change magnifying glass from font to icon, so I can select SVG icons in "General" settings?
Hi there,
I'm not sure if the value field will accept HTML, but you can try this:
add_filter( 'generate_navigation_search_output', function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Buscar …" 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', true )
);
} );It will only work if SVGs are enabled in the Customizer.
Thanks Tom!
By the way, do you recommend using font or SVG in terms of website loading speed?
It didn't work. After changing it displayed in the place of the magnifying glass:
<"span class...
As you can see here https://prnt.sc/pfmytx
In that case, we might need to apply it to the background of the input using something like this:
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' aria-hidden='true' role='img' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1em' height='1em'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z'/%3E%3C/svg%3E");
Any chance you can link me to the page so I can build the CSS? You can leave the value attribute empty for now.
Hi,
Is there a way to keep all the changes made BUT use the Google Custom Search "engine"?
This is an example of the code generated from Google:
<script async src="https://cse.google.com/cse.js?cx=00860344582696223242:gcezewiuhdazfj"></script>
This is the instructions page https://developers.google.com/custom-search/docs/element
In my case I guess that I should use these divs below.
searchbox-only
searchresults-only
