Synchronize Documentation - Joomla 4

The following installation guide will provide you with instructions to install and setup the Synchronize Energize Theme Template for the latest version of Joomla 4.x and Energize Themes for Joomla 4.x

 

 

Template Usage

Before using or installing this template please read the http://www.energizethemes.com/Terms-of-Service.html  which you have agreed to before downloading the template at the website.

Template Support

Please note we only provide support for using and setting up the Joomla template you have downloaded at the website.

If you need support for the template please using one of the following options

  1. We recommend you install the template quick start package which will give you an exact copy of the template & website you can see running at the https://demoj4.energizethemes.com/Synchronize It will save you a lot of time setting up the template. The template quick start package is also very useful to understand how we have setup Joomla and the template.
  2. Visit the knowledge base which includes lots of useful information about how to use and setup the template. http://support.energizethemes.com
  3. Log into the http://www.energizethemes.com website to open a support ticket and our support team will be happy to help you with any questions you may have about using or setting up the template

Template Package Contents

The template package includes the following.

  1. Joomla template zip file for Joomla which can be installed automatically via your Joomla administrator area.
  2. Template quick start package which will create an exact copy of the Joomla template you see at the http://demo.joomladesigns.co.uk site. For more information please read the quick start install guide included in the template quick start directory inside this zip package
  3. Adobe Photoshop file.
  4. Template installation instructions
  5. Images to be used for the template

Installing The Joomla Template

To install the Joomla template complete the following

  1. Log into your Joomla web site administrator area
  2. Select the Install Extensions menu
  3. Select the Browse button
  4. Select the Joomla template zip file from the Joomla 4_x directory included in this package
  5. Select the Upload & Install Button
  6. You will now see the message Installing template was successful to confirm the template was successfully installed

How Do I Make The Template The Default Template For My Web Site

To set the template you have installed as the default template for your Joomla web site please complete the following

  1. From your Joomla administrator area select the System menu and Site Template Style
  2. You will now see a list of templates.
  3. Select the check box next to the template you have installed and choose the Default button
  4. The template will now be your default Joomla template

Template Module Positions

The template supports the following module positions

  1. Login form button and register button located at the top of the template uses the loginform module position
  2. Top menu uses the position-1 module position
  3. The slideshow which appears at the top of the template uses the builtin-slideshow module
  4. Top-1, Top-2, Top-3, Top-4, Top-5, Top-6, Top-7 ,Top-8, Top-9, Top-10, Top-11, Top-12 module positions located at the top of the template use custom module positions where you can add your own text in the module positions
  5. Position-2 module position is used to display the breadcrumbs module
  6. Top-left-1, Top-left-2, bottom-left-1 and bottom-left-2 modules appear in the left hand side of the template and can be used to display module positions in the left hand column of the design
  7. Position-7 module position is used to display web site navigation menu in the left hand column of the template
  8. Top-long module position which appears in the centre of the template can used for the news flash module or you can use this module to display your own text using a custom module.
  9. Top-A, Top-B, Top-C, Top-D module positions located at the top / centre of the template use custom module positions where you can add your own text in the module positions
  10. Right module position can be used to publish other modules of your choice to the right module position
  11. top-right-1, top-right-2, bottom-right-1, bottom-right-2 modules appear in the right hand side of the template and can be used to display module positions in the right hand column of the design
  12. Bottom-A, Bottom-B, Bottom-C, Bottom-D module positions located at the bottom of the template use custom module positions where you can add your own text in the module positions
  13. Bottom-long module position which appears in the centre of the template can used for the news flash module or you can use this module to display your own text using a custom module.
  14. Bottom-1, Bottom-2, Bottom-3, Bottom-4, Bottom-5, Bottom-6 module positions located at the bottom of the design use custom module positions plus you can publish the latest news or popular news to the module positions to the modules
  15. Footer-right module is used to display your website copyright text using a custom module position
  16. Footer-left module is also used to display a menu module

templatemodules

How Do I Create A Custom Module Position

Complete the following to create a custom module

Note: You need to create a NEW custom module by following the instructions noted below for each custom module you want to create a publish to your Joomla site.

  1. From the Joomla administrator select the Module box
  2. Select the New button
  3. Select the Custom HTML option
  4. Now setup the module as show in the screen shots below.

custommodule30 part1

custommodule30 part2

custommodule30 part3

custommodule30 part4

Custom Module Position Notes

  1. When you have setup the module select the SAVE button
  2. You need to follow the above steps each time you create a new custom module position
  3. The template comes with pre-made images which you can insert into the top or bottom custom module positions
  4. The images for the modules are located in the /template-images/ directory includes inside this template package
  5. If you want to use your own images you can create new images using the image editing software installed on your computer for the top or bottom custom module positions.

How Do I Add The Read More Button To The Custom Module

To add the read more button to the custom module position complete the following

  1. Open up the custom module position you have created
  2. Select the Custom Output Tab
  3. Select the HTML button in the WYSIWYG editor to open the HTML window
  4. Under the text you have entered into the custom module position copy and paste this text into the HTML window
  5. <p><a class="button" href="#">Read More</a></p>
  6. Change the # to the web site address for the Joomla article you want to point the read more button to.
  7. Save the changes
  8. Read more button will now appear in the custom module position you have created

How Do I Setup The Top Modules

To setup the four custom modules complete the following

fourmods

  1. From the Joomla administrator area select the Module box
  2. Select the NEW button
  3. Select the Custom HTML module option
  4. Enter the title for the module position and show the title for the module
  5. In the WYSIWYG editor enter the text which will be displayed in the module
  6. Assign the module to one of the top module positions
  7. Select the Advanced tab
  8. In the Module Class Suffix field enter _style3
  9. Save the changes to the module position
  10. You need to complete the above steps to create all four custom module positions

fourmods 3x

Top Menu Module Settings

To setup the top menu for the template please complete the following

  1. From the Joomla Administrator area select the modules box
  2. Now select the top menu module which needs to use the position-1 module position.
  3. In the Menu Tag ID field enter nav
  4. In the Menu Class Suffix field enter -nav
  5. To enable the drop down menu for the top menu position set the "show sub-menu items" to YES
  6. Click on the save button.

topmenu30 part1

 topmenu30 part2

topmenu30 part3

Enable The Drop Down Menu In The Control Panel

If you have enabled show sub-menu items for the top menu you need to enable the drop down menu setting in the control panel.

To do this complete the following steps

  1. Open the template control panel
  2. Select the Drop Down Menu Settings tab
  3. ON/OFF drop down menu - set this option to ON
  4. You also need to set the drop down menu width to ON
  5. After you have set the above setting to ON save the chnages in the template control panel

How Do I Setup The Slide Show

The template includes a built-in slideshow where you can display images in the slideshow you have uploaded to the web site.

To setup the slideshow you need to complete the following three steps

  1. Upload your images to your Joomla web site which will appear in the slide show
  2. Create a custom module position for each slide show image
  3. Open the template control panel to change the slide show settings

Create And Upload The Images To Your Joomla Website For the Slide Show

  1. Create a new .JPG image which must be 1170px by 462px in size
  2. If you want to add four images to the slide show then you need to create four new .JPG images

Note: If you would like to use the images which come supplied with the template for the slideshow you can find the images in the /template images/slideshow/ directory

included inside this template package.

Create A Custom Module Position For the Slideshow Image

  1. From the Joomla administrator select the Module box
  2. Select the New button
  3. Select the Custom HTML option
  4. In the module title enter the name for the module. This will not be displayed in the slideshow.
  5. Assign and publish the module to the builtin-slideshow module position
  6. Select the Basic Options tab and choose the Select button
  7. Select the Browse button and choose the .JPG image you have created on your computer
  8. Now select the Start Upload button to upload the image to the module to be displayed in the slideshow
  9. Select the image you have uploaded and click on the Insert button
  10. Select the Custom Output tab
  11. Enter text in the WYSIWYG editor which will appear in the slideshow caption.
  12. If you do not want to use the text captions leave the WYSIWYG editor blank
  13. Select the Menu Assignment tab and assign the module to ALL pages to display the slideshow on all pages or selected menus to display the slideshow on selected pages
  14. Click on the Save and Close button to save the changes
  15. To add another image to the slideshow just follow steps 1-14 again

slideshow30part1

 slideshow30part2

slideshow30part3

 slideshow30part4

slideshow30part5

Enable the Slideshow In The Template Control Panel

  1. After you have created the modules for the slideshow you need to enable the slideshow in the control panel
  2. From your Joomla administrator area select the System Menu and Site Template Style
  3. Click on the template you have installed to access the template control panel
  4. Select the Option Tab
  5. Select the Built-in Slideshow Settings tab
  6. Turn the Slideshow ON
  7. Select the Save and Close button to save the changes

How Do I Add The Read More Button To The Slide

To add the read more button to the slide you have created complete the following

  1. Open up the module position you have created for the slide
  2. Select the Custom Output tab
  3. Scroll down to the WYSIWYG editor at the bottom of the module position
  4. Select the HTML button in the WYSIWYG editor to open the HTML window
  5. Under the text you have entered into the custom module position copy and paste this text into the HTML window
  6. <p><a class="button" href="#">Read More</a></p>
  7. Change the # to the web site address for the Joomla article you want to point the read more button to.
  8. Save the changes
  9. Read more button will now appear

Template Settings

The template control panel includes the settings which the template supports.

Please spend time looking at the template settings so you become familiar with the settings the template supports and how to use them.

How Do I Open The Template Settings

To open the template settings please complete the following.

  1. Log into your Joomla administrator area
  2. Select the System menu and Site Template Style
  3. Open the template you have installed by clicking on the template link from the list of templates
  4. Choose the options tab
  5. You will now see the template settings as show in the screen shot below
  6. For more information about each setting hover your mouse over the text next to each template setting

templatesetting30

How Do I Update The Template Settings

  1. Each template setting provides you with more information about how to use the template setting.
  2. To view the information about how to use the template settings hover over the text next to each settings
  3. After you have updated the template settings please select the Save or Save and Close button

templatesetting30

How Do I Update The Template Logo And Slogan Image

To include your logo image and slogan image in the template please complete the following steps

  1. Create two PNG images using the image editing software installed on your computer for the logo and slogan
  2. When you have created the logo and slogan PNG images you now need to upload the new images via the template control panel
  3. To upload the images via the template control panel complete the following
  4. Select the System menu and Site Template Style
  5. Open the template you have installed by clicking on the template link from the list of templates
  6. Choose the options tab
  7. Open the Site Name and Settings Tab
  8. Next to the Built-in Site Name setting and Select Your Slogan image you will see this option
  9.  imageupload
  10. To upload the your logo and slogan image click on the select button to upload the image to your Joomla /images/ directory
  11. Click on the Save and Close button above the template control panel to save the changes
  12. The logo and slogan image will now appear in the template
  13. You can also reposition the logo and slogan images via the Site Name and Settings Tab

Template Typography

The template supports the following typography styles which you can apply to your web site content.

Typography

How Do I Setup The Login & Registration Buttons

To setup the login and registration buttons which appear at the top of the template complete the following.

  1. Log into your Joomla! administrator area
  2. Select the Module box
  3. Open the Joomla login module
  4. Assign the login module to the loginform module
  5. Save the changes to the module position

To setup the footer menu you need to log into your Joomla website administrator area and select the menus option and then add new menu

When you have created the new menu for the footer menu please use the settings included in the screen shot show below to setup the footer menu module.

footermenu30part1

footermenu30part2

footermodule30part3

footermodule30part3

To add and copyright footer text included at the bottom of the template you need to create a custom module position as assign the module to the footer module

  1. From the Joomla administrator select the Module box
  2. Select the New button
  3. Select the Custom HTML option
  4. Now setup the module as shown in the screen shot.

 footermodule30

 footermodule30part2

 footermodule30part3