How to install
To install Kiolezo, go to under Joomla! extensions manager, choose to upload a package file and select Kiolezo package file (pkg_kiolezo.zip) or Kiolezo Lite package file (pkg_kiolezo_lite.zip).
The package installs Kiolezo component and Kiolezo icons module. Then Kiolezo Template will be downloaded from our server and installed automatically on your website; template is not included in the package due a Joomla Extensions Directory restriction.
After installation you will see a report with the result of each task.
In some cases, can happend that template is not automatically installed; if so, please download and install it manually from our website.
How to update
Kiolezo uses Joomla! Update System to check the availability of updates.
To enter your update password for automatic updates, open the settings panel.
You can get your update password on our website in the order confirmation page. Just copy and paste it in the proper text field, and press Save password button.
Remember that, if you are using Kiolezo Lite you don't need to enter the update password to update the component, instead if you are using Kiolezo, you should enter the update password in the component options.
Kiolezo needs to generate its update site. This task is done automatically every time you open setting panels.
After the update site is generated, you can normally update the component through Joomla! Update System.
If you try to update the component, and the update site is not correctly generated and updated, you can get an error while you try to upgrade Kiolezo. If so, just repeat all steps described above and then try again to update the component.
Filter some parts of layout
Sometimes can happen that you need to view a part of your template only in homepag or only in other pages.
Kioelzo has built-in filters to let you decide where to display the content or where to hide.
A real scenario can be to display tabs or accordions on the front page of the website, hiding them in the other pages. Or maybe show a text and an image in specific pages of the website.
Let's try to show an accordion menu only in homepage
In your template find the part where you would like to show the accordion menu. Then from the sidebar, under filters container, drag Show only in homepage filter in that place.
At this point, whatever you will drag inside the filter, will be shown only on the front page of your site and not in the other pages.
Let's try to show an accordion menu only in homepage
In your template find the part where you would like to show the accordion menu. Then from the sidebar, under filters container, drag Show only in homepage filter in that place.
At this point, whatever you will drag inside the filter, will be shown only on the front page of your site and not in the other pages.
Now from the sidebar, under dynamic layout container drag 2 accordions menu into the filter.
If you save your layout and go to your front page, you can see the accordion menu, but if you change the page, it will not be visible.
You can set four kinds of filter.
- Show only in homepage, which shows the content only on the front page of the website.
- Not show in homepage, which shows the content in all the pages but not on the front page of the website.
- Show only in pages, which shows the content only in selected pages.
- Not show in pages, which shows the content in all the pages but not in selected pages.
For the last two kinds you must select page IDs from the filter settings. To open settings clock on the setting button on the filter, then in the modal box, write page IDs. You can get page IDs in Joomla menu component, where each menu voice has written its page ID.
Filters don't apply a class or a style to hide the layout parts, just filter them by php code, so the template will not print unuseful parts, but just the needed parts to build the page.
How to add a module position
All Joomla templates need module positions to display modules.
Is very easy to add a module position to your Joomla template by Kiolezo. The component is born to build Joomla templates by drag and drop, so we made simple to add a module position. No coding required!
Find in the sidebar the module position element, then drag it on your layout, where you prefer.
A random name will be assigned to your new module position. To change it, just push the setting button, and the setting popup will appears. Here you are able to change the module position name and the module chrome type.
Module chrome type is the way how the template print the module, and is defined in modules.php, in the template folder. Module styles are responsible of how Joomla prints the title of the module, its spacing, its container (for example you can set a div with a different class to wrap a module). If you have turned on the advanced settings, is possible to define new module chrome styles in the dedicated textarea, directly in Kiolezo editor.
Module positions have a built-in PHP filter and are printed on the page only if a module is published into, otherwise them are not printed. In this way your template can generate clean and light pages.
Errors handling
In layout editor, in some occasions, an element can become red with an error label. This can happen in cases listed below.
- When there are too many rows inside each other.
- When more than an element is into an hyperlink.
- When something different than text, images or icons is into an hyperlink.
- When one filter is dragged into another one.
Errors can be fixed easily, just remove or drag in another position the element that causes the error, and immediately you will see the element gets its own original color.
If you try to use the layout with errors as front end template of your website you can have unexpected results.
We recommend to not save layouts with errors, but to fix them before to save.
Add images and set up them
Kiolezo uses a dedicated folder for images.
You can find all default images in images/kiolezo/ folder.
To add images to the component simply upload (via FTP or via Joomla Media manager) in that folder your custom images, and Kiolezo automatically will lists all your images in the drop down menu, inside the settings modal box.
To simplify your life, you can access to Kiolezo images folder, during layout editing, by pressing the media manager button, which open the default Joomla Media manager in the Kiolezo images folder.
If you upload images during editing, you must save your layout or refresh the page to list all new uploaded images.
If you are not expert with FTP file uploading, you can choose this easier way to manage your images.
Once you have dragged an image in your layout, you can setup it in its setting panel.
To open image settings, just click the gear button on the image that you want to set up.
In setting panel, you can choose the image you want to display in your layout, by a dropdown list.
You will see a list with all compatible images placed in images/kiolezo/ folder.
Is possible to import an image in your layout from external url, such as https://demo.digigreg.com/resources/images/astronaut.jpg.
To display an image from external url, just type the url in the proper field and save image settings. External image will be shown in your layout. Note that it will not be copied in your server, but only image reference will be kept, so if that external image will be edited, in your layout will be shown the new version of that image. Instead, when a layout is exported as stand-alone template, all images, local and remote, are automatically copied in the new zip archive, so you have not to worry about do it manually.
Note that an esternal url overwrite local image reference, so for example, if you select lowpoly-m.png from dropdown list and then you enter an external url like https://demo.digigreg.com/resources/images/space-shuttle.jpg, the first option will be ignored.
You can choose from 5 different image types. Under Image items in the left sidebar, you will find:
- Default image, to display ian image without special styles.
- Rounded image, to display an image with a little border radius in each corner.
- Circle image, to display an image with an accented border radius, useful to create a circle if the original image is square shaped.
- Polaroid image, to display an image with a border and a little box shadow, useful for thumbnails.
- Responsive image, to display an image with its width at 100%.
Display a layout in the front end
To display a layout in the public front end, it should be saved and published.
After you have created your first layout with Kiolezo, close the edit view, then go under templates, and then styles, in Joomla! admin menu.
Here select Kiolezo template as default, or assign it to some pages.
Open it and select from the drop down menu the layout which you want to display as front end template.
Only published layouts are available in the drop down menu, but of course, before to use a template on your front end, you can see the preview from Kiolezo edit view, even if the layout is unpublished.
After the layout is selected and the style is saved, you can click on Upgrade module positions button, which generate automatically into template XML file, all the module positions that you have dragged in your layout.
In this way, you can find your layout's module positions when you edit a module, when you select a new position for it from the drop down menu.
