Reply To: Replace default search

#12245

Ernest Marcinko
Keymaster

Hi,

Thanks for the details. Please note that this falls under the customization requests category, so I cannot guarantee my solution is working in every scenario, but I did my best to help you out.

I was able to locate the search icon code in file header.php in the theme directory, on line 346. I've soft-disabled that line and placed the search shortcode below it for you. In case you want to revert it back, just remove line 347 and re-activate line 346.

For better layout I would suggest 3 other things:

1. Changing the compact box final width option to a pixel value, like 300px or so. Because the container element max-width is very narrow, the search can only open that far by default. Changing that will overcome this problem: https://i.imgur.com/fCecq1L.png

2. Changing the plugin height to around 24 pixels: https://i.imgur.com/9uloACL.png
I noticed the head icons overall width is around that value.

3. Using this custom CSS to make the search layout somewhat similar to the other icons:

a#asp_search_top {
    padding: 0 !important;
    vertical-align: bottom;
    line-height: 0 !important;
}

.wpdreams_asp_sc-4 {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.wpdreams_asp_sc-4 .probox {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.wpdreams_asp_sc-4 .probox .prosettings,
.wpdreams_asp_sc-4 .probox .promagnifier {
    box-shadow: none !important;
    background: #333333 !important;
}

Please also note that this custom CSS will override some of the stylings from the search theme options panel.

Best,
Ernest Marcinko

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