What is the djcomune-en-elements-V1.1.zip package?
It is a set of files that allows you to install a website based on the DJ-Electronics template from scratch or install it on an existing website
What's in the package?
In the package, you will find the following files:
images.zip: contains all the illustrations used to build our demo site
DJ-Cummune - Settings.json: A special .json file containing all settings for Yootheme Pro along with main styles.
yootheme_djext.zip: This is a child template for Yootheme containing specific CSS styles, overrides, YOOtheme elements.
DJ-Commune - Leyouts,json: A special .json file for Yootheme Builder contains the most essential views (layouts) used on our demo site
djeventsgrid-1.1.zip: This is a Yootheme plugin designed by us. This plugin is related to the DJ-Events component. It displays events in the form of a grid and navigates by date and category.
What item do you need to download separately?
DJ-Events PRO: This is a Joomla component to help you create and edit events on your Joomla site. This is a convenient way to inform site visitors about events they should attend.
DJ-Events Integrator: This plugin provides deep integration between DJ-Events and Yootheme PRO, and will allow you to have all the features of Yootheme Website Builder with just a few clicks.
DJ-Accessibility : DJ-Accessibility is a plugin that helps to provide accessibility compliance with WCAG and ADA standards
DJ-WCAG-Improvement : This is a plugin that adds an aria-label for YOOtheme elements.
Attention! Yootheme Page Builder is required for proper system operation, which must be purchased and downloaded from https://yootheme.com/page-builder.
Yootheme Page Builder is a commercial component from a third party and cannot be bundled with our extensions due to proprietary rights.
Do we recommend any other components to use?
Yes. Of course, we have our favourite must-have kit from a third party. Consider installing these additional components:
How to install everything from scratch?
Step #1 Joomla installation
Step #2 Initial configuration
There are some necessary settings that you should make right after installation:
In the global configuration, set:
- Site Meta Description
- Content Rights
- Search Engine Friendly URLs - set to "Yes."
- Use URL Rewriting - set to "Yes" (don't forget to rename htaccess.txt to .htaccess)
2. Other settings according to your needs
Step #3 Installation and configuration of extensions
1. DJ-Events Joomla events component:
- configure the component according to your needs
- add an API key for Google Maps
- add your categories
- add some events and locations
Add a menu item that will lead to the event list. To do this, select the menu tab on your dashboard. Select a menu - e.g. Main menu. Then create a new menu item by clicking the green button "New" Now you enter the name of the menu and select the type of menu item - DJ-Events / Events Listing View
2. Yootheme PRO:
3. DJ-Events Integrator:
Creating event views and single event views has never been easier. Thanks to our integrator and builder Yootheme PRO you will create unique views for a list of events or for a single event in just a few minutes.
4. DJ-EventsGrid: This plugin adds events grid element to the Yootheme builder. The element was designed for our quickstarts and is delivered with the package. You can use it, e.g. on the on the website and show your company's history. Install djeventsgrid-1.1.zip like a standard extension, and then activate the plugin.
This item allows you to display your events as a grid navigating by date and category
Adds tools to help people with disabilities navigate and operate the site
Go to plugins and activate it. Then go to the modules and activate the DJ-Accessibility module. Set it on toolbar-left position and make it active for all pages of your website.
This plugin that adds an aria-label for Yootheme elements.
Step #4 Yootheme Builder Configuration
If you like pictures from our quickstart, extract the images.zip archive and copy everything via FTP to the images directory on your Joomla installation
2. Child Theme:
3. Default template: Set Yootheme as your default template.
Go to the System tab and select Site Template Styles from the Templates section
Then set Yootheme as the default template
4. Basic builder configuration
In your Home Dashboard, select Yootheme in the 3rd Party section
5 Base style:
Set the "Matthew Taylor" theme as the base style. To do this, go to the "Styles" tab and select the "Matthew Taylor" theme
6. Recover template settings from a JSON file:
Go to "Settings" / "Advanced", then scroll the Yootheme toolbar to the bottom and select "Import Settings"
Click and select - DJ-Commune - Settings.json from the disk on your computer
After loading the settings, save them. Builder now needs to refresh its cache, close it and reopen it.
7. Child Theme:
Go to "Settings" / "Advanced" and select the child theme. Save the settings
8. Set up the menu
Close the web builder. Make sure your default start menu leads to a single article. If not, change it to SIngle Article and attach an article (create it if necessary)
Then go to a builder, go to the "Menus" tab and set your menu to Navbar and save it.
Do the same for the "Mobile Dialog Position" item. Use the mobile preview to make sure everything is ok. If so, save it.
9. Loading layouts:
Go back to the Yootheme main menu and select the "Builder" tab. Then click the "Library" button
On the "Library" select the "My layout" tab and click the "Upload Layout" button.
Now you have your view library imported
10. Set up pages:
Try to set up your home page now. Select a home from the menu and then go to the library in the builder. Now select the appropriate layout - "DJCommune Homepage" and click.
Now you have a start page, just like in our demo.
12. Set up events page:
Go to the website modules and then add and activate mods for DJ-Events
If you have previously introduced events, go to the menu item for the events and configure the menu for the dj-events go to the menu item "Events".
Your website is not looking excellent right now. But you can quickly correct it in the following steps.
Go to the "templates" tab in the main builder menu and click the "New Template" button. Name this template e.g. "Events List". Then click the "Save" button
Now you can create a new template by clicking the "Builder" button
As you did on the home page, go to the library and select the layout that suits this page. Try DJ-Commune - Events.
The Layout will load, and you will see a beautifully formatted events listing page. Save it.
If you don't see the search and tags modules, you need to set them on the appropriate yootheme elements
Click on the module element and insert the appropriate module from the list
Then click on any event item.
As you can see, the situation is similar. You need to create a template for the sigle event.
Go to the "templates" tab in the main builder menu and click the "New Template" button. Name this template e.g. "Single Event". Then click the "Save" button
Then go to "Single Event" by clicking the "Builder" button
And choose the proper layout from the library - "DJElectronics Products - Single product."
The event page is also ready and looks great
Using ready-made layouts, you will build other subpages. Of course, you can modify the views as you wish. You can create layouts on regular articles or page templates depending on the context you are in at the moment. Yootheme and DJ-Events Integrator documentation will be helpful in this.
It is a good practice to have a complete quickstart copy somewhere else, allowing you to see the different settings used there.