[Support request] Check function and CSS for search customization

[Hilton]

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;
}

[Leo]

Hi there,

Looks good to me!

[Hilton]

Hi Leo,

Can you help me to display search field 100% width as it is hidden on left (mobile only 🙂 )?

[Leo]

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%;

[Hilton]

Hi Leo,

Please check again because it didn’t work 🙁

[Hilton]

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;
}

[Hilton]

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; <———-
}

[Leo]

Yup that’s the way to go.

I like the design!

[Hilton]

Thanks Leo 😉

[Hilton]

Is there a way to change magnifying glass from font to icon, so I can select SVG icons in “General” settings?

[Tom]

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.

[Hilton]

Thanks Tom!

By the way, do you recommend using font or SVG in terms of website loading speed?

[Hilton]

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

[Tom]

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.

[Hilton]

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&gt;

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

A standalone search box.

searchresults-only

A standalone block of search results.

[Author]

Posts