Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1270036

    Hi,

    I am trying to center and enlarge the search field that appears on the search results page. I didn’t want to mess with the search.php page, but I managed, somewhat, to center the field using the following css:

    #top #searchform {
    display: inline-flex;
    }

    However, that is just a way around a problem and the field remains ridiculously small (width), there is no way I can enlarge it.

    What would be the simplest way to just center it and make it wider (i.e. 600px)?

    Second question, because it is not worth a new thread: My original avia search field has its own placeholder text (Search the news…). Is it possible to have a different placeholder text for mobile phones, as opposed to desktop version?

    Thanks a lot!

    Best regards

    #1270037

    Hello again,

    I found a solution by replacing the DIV section in search.php with a relevant code (adding again my full-sized preformatted search field).

    Please do let me know about my second question (mobile phone placeholder issue).

    Back to search.php: I am using a child theme. Do you advise that I put the modified search.php in the child theme folder?

    Thanks.

    #1270069

    Hi,

    Thank you for the inquiry.

    How did you add the placeholder? Are you referring to the default search text? Please post the site or page URL so that we could inspect the element.

    Yes, you could create a copy of the search.php file or template in the child theme directory to override the original file.

    Best regards,
    Ismael

    #1270074

    Hi Ismael,

    Thanks for your swift reply!

    I have created a (modified) copy of search.php and have put it in a child theme directory, and restored the original one at the enfold parent theme directory, thanks a lot for that!

    I am attaching the link to the staging page related to the search field I was asking about, in a private section. It is a standard search field, somewhat CSS-adapted, but works just fine. The placeholder text is certainly too long for mobile phones, and doesn’t look good. I’d like to simply have “Search” for the mobile phones in a placeholder, instead of that longer content.

    Thanks a lot again!

    Kind regards

    #1270227

    I am sorry, I just realized I didn’t answer your question properly: The search field and the current placeholder text were inserted using your AVIA Layout Builder – it is a standard Enfold search field.

    Thanks!

    #1270279

    Hi,

    Thank you for the update.

    To adjust the value of the placeholder attribute on mobile view or on devices with screens lesser than 989px, we could use this snippet or script in the functions.php file.

    
    // adjust search placeholder on mobile view
    function ava_script_search_placehodler() {
        if ( wp_script_is( 'avia-default', 'registered' ) ) {
            wp_add_inline_script( 'avia-default', '(function($) {
    			(function($) {
    				if(window.innerWidth >= 989) return;
    			    $(".av_searchform_wrapper").find("#s").attr("placeholder", "Search");
    			})(jQuery);
    	');
        }
     }
     add_action( 'wp_enqueue_scripts', 'ava_script_search_placehodler', 9999);
    

    Best regards,
    Ismael

    #1270326

    Hi Ismael,

    Thanks a lot for your reply. I have added this to the functions.php (Child theme), but unfortunately, it doesn’t work. I did empty the browsing cache on my mobile phone, and the website has no cache plugins (the only cache is CloudFlare, but I completely purget it).

    This is the original placeholder text (here in a shortcode), that I want to show as simple “Search” on mobile phones:

    <div class=’avia_search_element avia-builder-el-1 el_after_av_textblock el_before_av_one_fifth ‘><form action=’https://staging.captis.com/&#8217; id=’searchform_element’ method=’get’ class=” ><div class=’av_searchform_wrapper’ style=’border-radius:20px; ‘><input type=’text’ value=” id=’s’ name=’s’ placeholder=’Search the News: Articles, Sources, Titles, Companies, Countries…’ style=’border-radius:20px; font-size:20px; ‘ class=’ av-input-hasicon’ /><span class=’av-search-icon avia-font-entypo-fontello’ style=’font-size:20px; ‘></span><div class=’av_searchsubmit_wrapper’ style=’border-radius:20px; ‘><input type=’submit’ value=’Search’ id=’searchsubmit’ class=’button’ style=’border-radius:20px; font-size:20px; ‘ /></div><input type=’hidden’ name=’numberposts’ value=’5′ /><input type=’hidden’ name=’results_hide_fields’ value=” /></div></form></div>

    Any idea?

    Thanks again.
    Kind regards

    #1270327

    It was html and not a shortcode, obviously :)

    #1270599

    Hi,

    Thank you for the update.

    Did you copy the code or snippet from your email? It is not working properly because the quotation marks and the other symbols have been encoded or have been converted to their html entity form. Please try to copy it directly from the forum.

    Best regards,
    Ismael

    #1270697

    Hi Ismael,

    Thank you for your reply. I actually copied it from this thread. This is how my child theme functions.php looks like altogether, below. But it still doesn’t work.

    <?php

    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */

    //set builder mode to debug
    add_action(‘avia_builder_mode’, “builder_set_debug”);
    function builder_set_debug()
    {
    return “debug”;
    }

    /*
    * AJAX Search won’t search the pages but posts only, in the SEARCH DROPDOWN
    */

    function avf_modify_ajax_search_query($search_parameters) {
    parse_str($search_parameters, $params);
    $params[‘post_type’] = ‘post’;
    $search_parameters = http_build_query($params);
    return $search_parameters;
    }

    add_filter(‘avf_ajax_search_query’, ‘avf_modify_ajax_search_query’, 10, 1);

    /*
    * AJAX Search won’t search the pages but posts only, in the SEARCH RESULTS PAGE
    */

    function exclude_pages_from_search($query) {
    if ( $query->is_main_query() && is_search() ) {
    $query->set( ‘post_type’, ‘post’ );
    }
    return $query;
    }
    add_filter( ‘pre_get_posts’,’exclude_pages_from_search’ );

    /*
    * Changing placeholder message in Enfold standard AVIA search field not to have my manual placeholders in mobile view
    */

    // adjust search placeholder on mobile view
    function ava_script_search_placehodler() {
    if ( wp_script_is( ‘avia-default’, ‘registered’ ) ) {
    wp_add_inline_script( ‘avia-default’, ‘(function($) {
    (function($) {
    if(window.innerWidth >= 989) return;
    $(".av_searchform_wrapper").find("#s").attr("placeholder", "Search");
    })(jQuery);
    ‘);
    }
    }
    add_action( ‘wp_enqueue_scripts’, ‘ava_script_search_placehodler’, 9999);

    #1271080

    Hi,

    Thank you for the info.

    This is how we see the script in the document.

    
    (function($) {
                (function($) {
                    if(window.innerWidth >= 989) return;
                    $(&quot;.av_searchform_wrapper&quot;).find(&quot;#s&quot;).attr(&quot;placeholder&quot;, &quot;Search&quot;);
                })(jQuery);
    
    

    As you may noticed, the symbols are encoded or in their html entity form. This may be due to the wp_add_inline_script function. Please post the login details in the private field so that we could test it.

    Best regards,
    Ismael

    #1271141

    Hi Ismael,

    Thanks a lot, and yes, I see why it won’t work.

    I am attaching the credentials in the private content section.

    Best regards

    #1271585

    Hi,

    Thank you for the info.

    We adjusted the snippet in the functions.php file and confirmed that the placeholder is being replaced with the specified value on mobile view or on screen width lesser than or equal to 989px. If you would like to adjust the placeholder value, just look for this line in the snippet.

    $(".av_searchform_wrapper").find("#s").attr("placeholder", "Search");
    

    Screenshot: https://imgur.com/Jlog5sS

    Best regards,
    Ismael

    #1271655

    Hello Ismael,

    Thanks a lot, it works perfectly!

    Kind regards

    #1271757

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Center and enlarge search field on search results page’ is closed to new replies.