Ajax Search Styling

Hey fkm,

Thank you for the inquiry.

To adjust the portfolio post type title or label, try to add this code in the functions.php file.

add_filter('avf_ajax_search_label_names','avf_ajax_search_label_names_mod', 10, 1);
function avf_ajax_search_label_names_mod($label)
{
     if($label == 'Portfolio Items') $label = 'New Label Here';
     return $label;
}

You can then use this css code to adjust the styles of the ajax search based on your specifications. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

.av_ajax_search_image {
    border-radius: 0;
}

.av_ajax_search_content {
    top: 10px;
    position: relative;
}

#top div .av_ajax_search_entry:hover {
    background-color: inherit;
}

.avia-search-tooltip .avia-arrow-wrap {
    display: none;
}

Best regards,
Ismael

Hi,

Thank you for following up.

The target state for the AJAX search results only works on wide screens or when the main content is located on the right side of the page as shown on your screenshot. It doesn’t work really well on smaller screens, when the main content is center aligned. The search results are not clearly visible without the white background because it blends in with the main content.

This is how the AJAX search looks like when we removed its default background and box shadow.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvwFbfXs8sJgniwYpI?e=mN7caF

Best regards,
Ismael

Hi,

Thank you for the clarification.

Try to use this css code to remove the box shadow and borders of the AJAX search container.

#top .avia-search-tooltip {
    box-shadow: none;
    border: none;
}

Again, toggling the file compression settings and purging the cache might be necessary.

Best regards,
Ismael

Hi,
Thank you for your patience, to remove the loading icon and the item background color, try this css:

#top .ajax_loading_now > div > div {
	opacity: 0 !important;
}
#top div .av_ajax_search_entry:hover {
    background-color: rgba(0,0,0,0) !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear, try changing the top and bottom padding to zero from 10px with this css:

#top #menu-item-search .av_ajax_search_entry {
    padding: 0px 16px;
}

If that is too close together try changing the top and bottom padding to 5px like this:

#top #menu-item-search .av_ajax_search_entry {
    padding: 5px 16px;
}

try adjust the number to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #searchform .ajax_search_response h4 {
    letter-spacing: 0.10em !important;
    padding-bottom: 10px;
}
#top #searchform .ajax_search_response {
    padding-bottom: 10px;
}

adjust the padding-bottom & letter-spacing to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
To change the mobile search icon size try this css:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .menu-item-search-dropdown > a {
    font-size: 12px !important;
}
}

and adjust to suit.
To stop the search form from submitting with the enter key, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function($) {
$('#menu-item-search').click(function(){
	setTimeout(function(){
 $("form").attr('onSubmit', 'return false');
	},500);
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

As for the search field on the iPhone view zooms in, this is the iPhone itself and we can not change.

Best regards,
Mike

Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function ajax_not_found_text() { ?>
    <script>
(function($){
setInterval(function () {
$('#searchform .ajax_search_response .av_ajax_search_entry.ajax_not_found .av_ajax_search_content .av_ajax_search_title').text(function(index, text) {
    	return text.replace('Entschuldigung, aber kein Eintrag erfüllt Deine Suchkriterien', 'Entschuldigung, nicht gefunden');
});
}, 50);
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'ajax_not_found_text');

adjust the Entschuldigung, nicht gefunden text to suit

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike