CSS Style problems with Guru

rogermont

Hello,

We've installed Guru 6.1.3 on a test server, and the new version is breaking our styles.

We've looked at the CSS, and it seems like there's code referring to uk- classes.

Our template also uses that framework, I don't think it is a good idea to hardcode css styles in Guru's ccs files that could potentially mess with the template's css.

How could we solve this?

Thank you!

Best,
Roger.

saguaros

Hi Roger,

How can I access frontend of your site? it looks like it's under maintenance mode now.

And clarify the issue in more details so I can check.

Regards

rogermont

Hi Saguaros!

Please click on the logo to reveal the user/pass form to access the site.

Then please go to the URL above, and click on the Overview tab. These are some problems we've found so far, there might be more:

Those ul.uk-tab li should have a different background and border colors, but they are affected by Guru's css.
Panels with class uk-panel-box are now white with rounded corners, but they shouldn't.
The text along each image in the "The Masterclass" section is divided in three columns, but it shouldn't.

In general it looks like Guru has adopted the uk- framework, but in doing so any style that uses those classes will mess with the template of any site that uses the same framework.

Please let me know should you need more details.

Thank you.

Best,
Roger.

saguaros

Hi Roger,

I'm sorry for this lateness, I tried to login but it keeps showing the login form again, it seems not be logged in yet.

Could you help to check again?

rogermont

Hi Saguaros,

Thank you for checking, I believe that's becaue of a Joomla bug.

Could you please go to the root of the dev site instead, log in from there, and then return to the complete URL shown above?

This should work, please let me know if it doesn't.

Thank you.

Best,
Roger.

saguaros

HI Roger,

You mean the framework uses the same classes with Guru?

Could you share the super admin account of both sites so I can check?

rogermont

Hi Saguaros,

It is actually the other way around, Guru is using the classes of the UIkit framework (https://getuikit.com/).

That framework was developed by the popular template designer Yootheme, and it was used in all their templates for many years.

All the CSS classes in that framework start with the prefix "uk-", and the problem is that by Guru using those classes in its code, it is affecting the deisgn of every template that uses the framework.

A solution would be that Guru changes the prefix to other string, for example "gr-", so that the CSS hardcoded in Guru does not affect the templates developed by Yootheme:

https://getuikit.com/docs/avoiding-conflicts#custom-prefix

Could this please be implemented?

Best,
Roger.

saguaros

Hi Roger,

Would you mind sharing the super admin account of your reference site so I can take a look?

rogermont

Hi Saguaros,

This test site is a copy of the production site, and thus contains all the users, orders, etc. An action on the backend could trigger emails and other unintended consecuences that we'd prefer to avoid.

Please let me know what you need to check on the backend and I'll do it for you.

Please note however that the issue is with the CSS on the frontend. The files guru.css, custom.css, and others contains CSS declarations with the uk- prefix. That means the CSS styles Guru loads will interfere with the style of any template that uses UIkit.

Thank you.

Best,
Roger.

saguaros

Hi Roger,

Could you share the correct URL to access backend of your site?

rogermont

Hello Saguaros,

I've updated the info in the fields.

saguaros

I meant the URL to access backend of your live site as the JS seems to be compressed now, not sure it's your custom style or from template.

rogermont

Hi Saguaros,

We have a policy of not giving access to our live site to anyone outside our team. If anything goes wrong, it is much easier for us to find the cause and fx it.

But you don't need access to our live site or our test site to check what the problem is. Please check these files from Guru's demo site:

https://guru.demo.ijoomla.com/components/com_guru/css/uikit.almost-flat.min.css
https://guru.demo.ijoomla.com/components/com_guru/css/guru.css
https://guru.demo.ijoomla.com/components/com_guru/css/custom.css

All of them contain styles that contain classes with the .uk prefix, created by the developer Yootheme and used in hundreds of their templates. If Guru continues to use that same prefix, it will affect the style of a site using any Yootheme template. There's an easy fix for this provided by Yootheme, I linked to it in a message above.

I believe it would be great to fix that, as it would make Guru immune to problems as the ones we are expericencing on our site.

Thanks for considering this and passing along the idea to the relevant team in case you deem it appropriate.

Best,
Roger.

saguaros

Hi Roger,

I will check with our team on this, kindly wait.

rogermont

Thank you Saguaros.