Styling spinner and overlay

  • Posts: 359
  • Thank you received: 24
  • Hikaserial Standard Hikashop Business
3 years 11 months ago #326704

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.23
-- PHP version -- : 7.4

Hi

I have been searching for a solution, but found none :-(

When I on the check out page, enters my address and save it - the fields get and overlay and a spinner appears.
Where can I change the color of the overlay from white to black?
I know CSS ...

And where can I change the spinner image?

Kind regards
Thomas

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

  • Posts: 12953
  • Thank you received: 1778
3 years 11 months ago #326725

Hello,

The loader is loaded by the following CSS code :

div.hikashop_checkout_loading > div.hikashop_checkout_loading_spinner {
    background: url(../images/spinner_02.gif) no-repeat center;
}
So you'll just have to change the background or directly change the ".gib" file located : "media/com_hikashop/images/spinner_02.gif".

For more information about CSS customization :
www.hikashop.com/support/documentation/1...the-display.html#css

Kind regards,
Mohamed

Last edit: 3 years 11 months ago by Mohamed Thelji.

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

  • Posts: 359
  • Thank you received: 24
  • Hikaserial Standard Hikashop Business
3 years 11 months ago #326745

Hi

And thank you!
I'll try that - what about the color of the overlay that shows when the loader is shown?

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

  • Posts: 12953
  • Thank you received: 1778
3 years 11 months ago #326763

Hello,

The color of the overlay seems to be set by the .gif image, so directly using the .gif file you need will do the job.

Kind regards,
Mohamed.

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

  • Posts: 359
  • Thank you received: 24
  • Hikaserial Standard Hikashop Business
3 years 11 months ago #326910

That can't be right?
How will the gif set the background of an entire div?

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
3 years 11 months ago #326931

Hello,

In HikaShop, there are 2 different type of spinner, and so 2 different way to modify its colors.

alt

1. The added image .gif (green bordered), for this one you have to modify the gif image with your required image, in the images folder (.../media/com_hikashop/images), the one you have to replace spinner_02.gif

2. The font awesome version (red bordered), for this one you can modify his color through some Css like this example :
i.fas.fa-spinner.fa-pulse {color: red;}

Hope this will help you to achieved what you requested.
Regards

Last edit: 3 years 11 months ago by Philip.

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

  • Posts: 359
  • Thank you received: 24
  • Hikaserial Standard Hikashop Business
3 years 11 months ago #326984

Thank you Philip ...

That helps, but the overlay behind the spinners is white and my site is black, so I would like to change that color?

Regards
Thomas

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 11 months ago #327020

Hi,

You can use such CSS for the overlay:

div.hikashop_checkout_loading > div.hikashop_checkout_loading_elem {
	background-color:black !important;
}

The following user(s) said Thank You: Thrane

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

  • Posts: 359
  • Thank you received: 24
  • Hikaserial Standard Hikashop Business
3 years 11 months ago #327051

Perfect, thank you!

The following user(s) said Thank You: Philip

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

Time to create page: 0.094 seconds
Powered by Kunena Forum