[Support request] Check function and CSS for search customization

Home Forums Support Check function and CSS for search customization

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1026445
    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;
    }

    #1026450
    Leo
    Staff
    Customer Support

    Hi there,

    Looks good to me!

    #1026476
    Hilton

    Hi Leo,

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

    #1026479
    Leo
    Staff
    Customer Support

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

    #1026481
    Hilton

    Hi Leo,

    Please check again because it didn’t work 🙁

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

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

    #1026544
    Leo
    Staff
    Customer Support

    Yup that’s the way to go.

    I like the design!

    #1026560
    Hilton

    Thanks Leo 😉

    #1027307
    Hilton

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

    #1027693
    Tom
    Lead Developer
    Lead Developer

    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.

    #1027752
    Hilton

    Thanks Tom!

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

    #1027787
    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

    #1027983
    Tom
    Lead Developer
    Lead Developer

    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.

    #1036724
    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.
Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.