Simply installing Hikashop spoils the display - Gantry 5 Particle

  • Posts: 31
  • Thank you received: 1
  • Hikashop Business
4 years 5 months ago #324331

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.1
-- PHP version -- : 7.3.21
-- Browser(s) name and version -- : Firefox Developer 82.0b5(64-bit)

Hi

Simply installing "hikashop" causes a change to the display on the home page of the site. Specifically - RocketTheme Template Protean and Gantry 5 Particle "contenttab".

I have two versions uploaded:-
See the home page in each case
1) www.mathost3.co.uk/lou3 This one is how the page should look
2) www.mathost3.co.uk/lou4 This shows what happens if Hikashop is simply installed. The section below the image gest background shading and formatting to the borders.

Issue raised with Rockettheme and this is their response:-
*** Start of Rockettheme respopnse ***
This issue is caused by Hikashop loading it's own uikit based CSS called "/media/com_hikashop/css/frontend_default.css" which is overriding the CSS provided in the template for the contenttabs. The hikashop CSS should be ensuring that it only affect hikashop content and nothing else.
*** End of Rockettheme respopnse ***

Is there a quick fix/workaround for this?

Many thanks

Neville Matthews

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

  • Posts: 83407
  • Thank you received: 13498
  • MODERATOR
4 years 5 months ago #324344

Hi,

I checked the situation on both links and I don't see any difference, and I can also see that the file media/com_hikashop/css/frontend_default.css doesn't exist anymore on the website where you have HikaShop installed.
Without being able to check on the situation, I can't provide a fix or work around.
I also checked the media/com_hikashop/css/frontend_default.css file on our end, and there are no uk- classes ( which are the classes used by uikit ) in it.
Coudl you add back that file so that we can check on the situation please ?

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

  • Posts: 31
  • Thank you received: 1
  • Hikashop Business
4 years 5 months ago #324367

Hi Nicolas

My apologies, it (media/com/hikashop/css/frontend_default.css )was only missing (renamed) for a short time while I tested then out it then put it back.

The media/com/hikashop/css/frontend_default.css is back now.

Once again sorry.

Neville Matthews

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

  • Posts: 83407
  • Thank you received: 13498
  • MODERATOR
4 years 5 months ago #324378

Hi,

Thank you for that.
From what I can see, the issue comes from that piece of CSS code in that file:

/*
 * cursor filters
 */
.hikashop_filter_cursor_range { display:inline-block; }
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(../images/icons/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(../images/icons/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(../images/icons/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(../images/icons/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(../images/icons/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-widget :active { outline: none; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
.ui-widget-overlay { background: #aaaaaa url(../images/icons/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(../images/icons/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .8em; width:250px; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }
That CSS was added on our end for the cursor filter system we were using before.
We actually don't use it anymore as we switched 2 years ago to a new system which doesn't require ui classes and jquery.
We kept that CSS as as backward compatibility but I guess it's not that useful anymore.
So I propose to just remove it from the file.
We'll do so with the next release of HikaShop.
In the mean time, you can directly remove that block of code from the file on your website and it will solve the problem.

The following user(s) said Thank You: nevillematthews

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

Time to create page: 0.059 seconds
Powered by Kunena Forum