[ptt81]

Try to replace default search but it didn’t work. Can you help?

[Ernest Marcinko]

Hi,

Sure! Not all themes support automatic replacement. If you can add temporary FTP and back-end details to your ticket, I will log in and try to find the default search code in your theme directory.

[ptt81]

You cannot access this content.

[Ernest Marcinko]

You cannot access this content.

[ptt81]

You cannot access this content.

[Ernest Marcinko]

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: http://i.imgur.com/fCecq1L.png

2. Changing the plugin height to around 24 pixels: http://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:

[html]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;
}[/html]

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

[ptt81]

You cannot access this content.

[ptt81]

Hi Ernest,

I was able to get the CSS to look like the theme icon exactly, im very happy with it however one last thing I can’t figure out is how to make it hover with blue color like the cart icon. Can you help? Also how make the search box responsive for mobile?

[Ernest Marcinko]

Hi,

Sure, you could try this additional CSS for the hover effect:

[html].asp_main_container,
.asp_main_container * {
transition: all 0.2s linear;
}

div .probox .promagnifier svg {
fill: white !important;
}

.probox:hover {
overflow: visible !important;
}

div .probox .promagnifier:hover {
background: #007ce2 !important;
box-shadow: 0 0 1px 1px #3195e6 !important;
}[/html]

It’s not nearly perfect, but better than nothing.

[ptt81]

You cannot access this content.

[Ernest Marcinko]

Unfortunately in this case this is not possible, because there is no filter or action available on that part of the code. I would have definitely suggested a filter to use in the functions.php file, if that would have been possible 🙂

In this case just make sure to have a back-up of the header.php file so you can restore it, in case of an update. All the other custom CSS code will remain, but that file will most likely change in case of theme update.

[ptt81]

You cannot access this content.

[Ernest Marcinko]

Hi,

I believe it’s probably not related, as I don’t see any of the custom CSS conflicting with those icons. As I’ve looked at the source, it tells me that the content is simply ignored for those icons: http://i.imgur.com/lW53L7D.jpg
That info might be incorrect though, IE debugger tends to do that.

I’ve googled around, and there are actually known issues with font awesome and IE11. I have found these, which might help you:
– IE11 not showing font awesome icons
– Font-Awesome icons disappear in IE11 only after page refresh
– Font Awesome 4.2.0 not rendering in IE11 with Compatibility Mode turned On
– FontAwesome troubleshooting guide

I would first look at the version, to see if there is a possible update to that library, it may solve it. I have honestly no clue if this is actually the problem, I just suspect, based on the console information. Unfortunately explorer has a very limited debugger when it comes to fonts, so I was not able to check if it was correctly rendered or not.

[ptt81]

You cannot access this content.

[ptt81]

You cannot access this content.

[Author]

Posts