You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#102773 How to use UIKIT ?

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Friday, 31 January 2020 16:47 GMT

aklisiewicz
How would I install UIKIT to be able to use it inside JCE ?
I tried few things but so far any UIKIT markup code I put into the editor has no effect (though standatd HTML works OK)
Is there any Joomla extension for that to place UIKIT files in proper folders so they are visible to the editor ?

Ryan
UIKit is a CSS Framework used in Yootheme templates - https://yootheme.com

The Yootheme WidgetKit extension also uses UIKit - https://yootheme.com/widgetkit-joomla-gallery

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

aklisiewicz
Possibly UIKIT is used in this template bue this is a standalone library which can be used alone as well. I have a templates from other sources than Yootherme so my question is general. I want to use it with any template and be able to put HTML/CSS code into the JCE editor and see it working. I believe the only challenge here is to place the library files into right folders or figure out the methot to call those libraries from edito. Personally I would prefer the later method as it would allow to keep UIKIT files in one folder and share it among multiple websites and templates.

Here is some nice video created, showing UIKIT in action in Joomla, but this video des not exlain how it is configured, or what templates are used.
https://www.youtube.com/watch?v=o7UU4pHTsFA

I have a template created with ARTISTEER, some with THEMLER, Gantry5, JDEV etc, so this is general question how to set this up so JCE editor can see the libraries ?

aklisiewicz
so still no answer to simple question ?
I would like to setup UIKIT the way I can use it inside JCE. I really do not care about templates.
I have installed the library within the site main folder but I'm really not sure how to set this up so every JCE created article can use the library. Usually this is done through INCLUDE (clause in PHP) or IMPORT (in themplates). In case of JCE my guess would be to put some small portion of HTML at the top of the article with the reference to the UIKIT library, but I'm not an HTML expert so I'm kinda confused how to do it right.
Any ideas appreciated.

ARTHUR

Ryan
I have installed the library within the site main folder but I'm really not sure how to set this up so every JCE created article can use the library. Usually this is done through INCLUDE (clause in PHP) or IMPORT (in themplates).
To use UIKit in the editor, you need to import it into your template stylesheet, otherwise UIKit classes you apply in the editor will not render correctly when the article is displayed in the front-end. So, add an @import rule to the UIKit stylesheet in your main template css file, or preferably, in an editor.css file in your template's css folder, eg:

@import url(path/to/uikit/css/uikit.min.css);
@import url(template.css);

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

aklisiewicz
full path to UIKIT folder is this:

/home/datapo6/public_html/nowywymiar_net/templates/nowy_wymiar_home_v17/uikit
this is where JS and CSS folreds are


I tried something like this, but it does not work:

/* UIKIT reference -----------------------*/
@import url(../templates/nowy_wymiar_home_v17/uikit/css/uikit.min.css;
@import url(template.css);

Ryan

@import url(../templates/nowy_wymiar_home_v17/uikit/css/uikit.min.css;
This should probably be

@import url(../../templates/nowy_wymiar_home_v17/uikit/css/uikit.min.css);
If the UIKit files are in the same folder as the main template, then it should be:

@import url(uikit.min.css);

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

aklisiewicz
unfortunately your suggestion made no change.

here is how the folder structure looks like

https://ibb.co/JB58QW4 so as you see UIKIT is actually 2 folders.
I can move those folders anywhere, but not sure where to place them so it works with JCE

the main site folder is /nowywymiar_net/.... and the main HTML folder is /pubilc_html/
I would love to place UIKIT in /public_html/ and find the way to use UIKIT in multiple sites by using @IMPORT directive but at this moment it does not work even with single site. I wonder if anybody else got this into work ?

Arthur



Ryan
Ok, so assuming nowy_wymiar_home_v17 is the name of the template, and you have an editor.css file in templates/nowy_wymiar_home_v17/uikit/css, then the @import rule should in the editor.css file should be:

@import url(../uikit/css/uikit.min.css);
Remember that your template also needs to laod the uikit.min.css file, so the import rule needs to be added to your template's template.css or custom.css file.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.