Upgrade HS business 441 to 442/3 lost FontAwesome connection?

Start
Prev
1
Next
End

Digishop
Topic Author
Offline

Posts: 96
Thank you received: 3
Hikamarket Frontedition Hikashop Business

3 years 6 months ago #335066

-- HikaShop version -- : 4.4.3
-- Joomla version -- : 3.9.28
-- PHP version -- : 7.4.20

Hello,

I did an upgrade from HS business 441 to 442 and later to 443 in a test environment. See the url. Now I'm having some extra icons for the next- previous product icons.
And the color of the original icons is set (hikashop_previous_product / hikashop_next_product) to #333. It look like it lost the FontAwesome connection.

Can you help?
Thanks.
Kees

Last edit: 3 years 6 months ago by Digishop.

Please Log in or Create an account to join the conversation.

nicolas
Away

Posts: 83403
Thank you received: 13497
MODERATOR

3 years 6 months ago #335070

Hi

Before HikaShop 4.4.2, we were not using font awesome for these icons but simple images. In order to simplify customization and make it more consistent with the rest of the interface of HikaShop, which already uses font awesome everywhere else, we changed these buttons to migrate to font awesome.

The issue you have with the updated page comes from the custom CSS of your template. Your template adds special CSS to customize these buttons using its font awesome and hid the image HikaShop was using.
It's done with the code:

.hikashop_product_page .hikashop_next_product, .hikashop_product_page .hikashop_previous_product { background: none; position: absolute; z-index: 2; right: -15px; top: 10px; color: #FF9900; font-size: 1.5em; }
.hikashop_product_page .hikashop_next_product:hover, .hikashop_product_page .hikashop_previous_product:hover { color: #D1BD98; }
.hikashop_product_page .hikashop_next_product:before, .hikashop_product_page .hikashop_previous_product:before { font-family: "FontAwesome"; content: "\f054"; }
.hikashop_product_page .hikashop_previous_product { right: 10px; }
.hikashop_product_page .hikashop_previous_product:before { content: "\f053"; }

in the file /templates/ignite/css/template.css
So remove the lines:

.hikashop_product_page .hikashop_next_product:before, .hikashop_product_page .hikashop_previous_product:before { font-family: "FontAwesome"; content: "\f054"; }

and

.hikashop_product_page .hikashop_previous_product:before { content: "\f053"; }

and add instead the code:

.hikashop_previous_product_btn p, .hikashop_next_product_btn p {
    display: none;
}
.hikashop_previous_product_btn, .hikashop_next_product_btn {
    border: 0;
}

from there and it will look close to what you had before.
I would recommend reporting the issue to your template provider so that they can update the CSS in their template.

The following user(s) said Thank You: Digishop

Please Log in or Create an account to join the conversation.