How to change font size and font family in suggested search keyword field

Home Forums Product Support Forums Ajax Search Pro for WordPress Support How to change font size and font family in suggested search keyword field

This topic contains 4 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 6 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #8809
    benzwk
    benzwk
    Participant

    First Question
    I would like to use this google font how to intregrate with the plug-in
    https://www.google.com/fonts/specimen/Abel

    Second Question
    Is it possible to use the theme search css style but when input call function from AJAX Search pro.

    Following is Search.php in WP theme file
    <?php get_header(); ?>
    <?php get_template_part( ‘inc/loop/style3’ ); ?>
    <?php get_footer(); ?>

    Thanks!

    #8810
    benzwk
    benzwk
    Participant

    please find picture below

    Attachments:
    You must be logged in to view attached files.
    #8815
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    Sorry for the late response.

    To apply that font all over the search plugin, you can use this custom CSS:

    .asp_main_container,
    .asp-try,
    .wpdreams_asp_sc,
    .asp_main_container *,
    .asp-try *,
    .wpdreams_asp_sc * {
         font-family: 'Abel', sans-serif !important;
    }

    This will basically force the Abel font on all the elements of the plugin.

    For font sizes, there are options on the
    Theme Options -> Input field panel: https://i.imgur.com/orhQ04I.png
    – For result sizes: Theme Options -> Typography: https://i.imgur.com/kojiSBb.png
    – “Try this” text font with custom CSS:

    .asp-try,
    .asp-try * {
         font-size: 12px !important;
    }

    I hope this helps! Let me know if you can’t find something.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #8816
    benzwk
    benzwk
    Participant

    Hi Ernest Marcinko

    Thanks for kind support
    Everything work well except the search box place holder word is not changed to the new font style
    and I cant find where to adjust font size for “Suggested search keywords”

    Another question , is it possible to integrate the plugin with theme search as i mentioned earlier.

    please suggest

    Thanks

    • This reply was modified 6 years, 6 months ago by benzwk benzwk.
    #8823
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    For the placeholder you might need these as well:

    
    input.orig::-webkit-input-placeholder {
       font-family: 'Abel', sans-serif !important;
    }
      
    input.orig:-moz-placeholder { /* Firefox 18- */
       font-family: 'Abel', sans-serif !important;
    }
      
    input.orig::-moz-placeholder {  /* Firefox 19+ */
       font-family: 'Abel', sans-serif !important;
    }
      
    input.orig:-ms-input-placeholder {
       font-family: 'Abel', sans-serif !important;
    }

    I guess I forgot to implement a font option for the keyword suggestions 🙂
    Anyways, use this for the no results header font:

    .asp_nores_header {
        font-size: 12px !important;
    }
    

    and this for the keywords:

    .asp_keyword {
        font-size: 12px !important;
    }

    The integration will only work if you replace the theme search with the ajax search pro search bar. It holds vital information and data structure in order to work. Feel free to check these documentation chapters on this topic: automatic replacement (if theme supports), manual replacement

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.