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

[benzwkParticipant]

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!

[benzwkParticipant]

please find picture below

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

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 :)

[benzwkParticipant]

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 7 years, 4 months ago by  benzwk.

[Ernest MarcinkoKeymaster]

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 :)

[Author]

Posts