Video Transcript

Hi. This is Peter from JoomlArt. Today we are talking about ThemeMagic – T3 Video Tutorial.

ThemeMagic lets you make changes to CSS file.

Just go into the Back-end to open the codes. There will be 2 parts in this video: First, there will be the configuration of ThemeMagic and how to use it. And next, changing ThemeMagic or customizing it by adding new groups and new parameters. So let’s get started with ThemeMagic configuration.

First, from back-end of your site, navigate to Template Manager. Click that.

In this tutorial, we are going to select JA Argo template. Here you can see the "ThemeMagic" button, click on this button to open the panel. But first, ensure that ThemeMagic is enabled under General - ThemeMagic.

You can see the Working panel of ThemeMagic here. As you can see, the left panel in group includes groups of parameters while the right panel is your site.

To change any settings, simply change the setting, then click Preview. Ok? So first, we will select the dark theme to customize, preview that. Now we will go to the Grid. The Grid has many parameters. We are gonna to change the width of Xtablet here to 800px. We’re gonna preview this. Now you can see that the width size is changed. Now let’s try to configure under Module group in parameters. We are gonna change the color here. So you can select any color we want for the module text, and we are also gonna change it for the title. Ok. We go to preview this first. See how that looks. You see, it’s been changed. Ok, now we go to configure the Typography. We are gonna change the Font Family with “Monospace" and do the same for the Heading Font Family. And preview. See, the font has been all changed. That looks nice. Much different look. We are gonna change the font to 12. It is a little too big here.

Ok, it seems to fit the page better. Now we gonna save as a new theme. This means that the changes we’ve just made will be saved under a different theme name than the original which will allow us to return at a later day when we don’t like any new changes or use it as a base in the future.

So let’s move to the next part: ThemeMagic Customization. T3 allows you to add unlimited parameters and groups. All the groups and parameters are defined in the templateDetails.xml file. The XML file is located in Templates. And you’ll find the template name. Now you open the XML file. Scroll down. ThemeMagic group and the parameters are defined here as “thememagic”. The field path should not be changed. Scroll down some more. Here’s the group of parameters. It starts with “fieldset” and ends with “fieldset”.

This is the field of the groupname. The groupname is defined by whatever you choose. You can change it to whichever name you like. Its label is to define language field of plugin. In case you change the name, you have to change it again in the module.

Next, we go to define some parameters. We have 2 parameters included in this group, “T3moduleColor” and “T3moduleTitleColor”. This is the variable that is listed in the variables.less. Ok, let’s open "less" folder.

Scroll down, find the variables.less file and open it. You will find “T3moduleColor” here and this is its value. This class is only for color parameter. That’s you can see in green. You can set the default value for the parameter. If you leave it blank, the parameter will get the value from the variables.less file. Here is the label and description of the parameter. They are defined in the language file of T3 plugin and the template.

Ok, let’s open the folder: administrator >> language >> en-GB, ok we’re gonna scroll down. We’re gonna open the language file of T3 plugin. Labels and descriptions of parameter are defined here.

Ok, now we will add a new parameter under the Module group and the templateDetails.xml file. We’re gonna start by cloning an existing parameter. We are gonna open the variables.less file then find what you want, ok, let's use “T3modulePadding”, copy. Go back to templateDetails.xml files. Now we gonna paste it here. This is text type, so change the type to text. As the para type is not color so we don't need to change it here. But set default value to 1. Ok, let’s change the label of the parameter, and the description as well. Now we need to define the label and description of the parameter. So we’re gonna open the language file then add the label here. Ok, let’s set the name of the label.

Next, we’re gonna define description of the parameter “Set padding for modules” here. We’re gonna reload the site. Ok. Now let’s open the Module group. Great, the new parameter is added to ThemeMagic.

Now we will add new groups with parameters to ThemeMagic. Ok, let’s open the variables.less file and find the variables you want to add to ThemeMagic. Ok, let's use variables for Footer Modules, let’s go back to the templateDetail.xml file. Let's clone group “module”. Let’s change the group name to “footer-module” and change the label of the new group. Now, back to variables.less file to copy the variable, and override the old name to color parameters so we’re gonna keep the type and the classes. And we'll leave the default value, while we’re gonna change the label and description of the parameter.

Ok, now add a new parameter. We will add a variable: “t3FooterModuleColor”, keep the type and the class. We are gonna change the label and the description of the parameter. We don't need to add a new parameter, so let’s remove this line.

Now, let's define the group name, parameter label and description. Ok, to define the group name, set to "Footer Module". And now go back to templateDetails.xml file to copy the parameter label. ok, paste that there. Let’s set it to "Module Title Color". Now let’s define the description of the parameter, “Set color for footer module”. We’re going to do the same for other parameter.

Always keep in mind that you have to copy the added language to thr language file of the template. Let’s open language folder, find and open the language file of JA Argo template as an example, paste it.

Now we’re gonna reload the ThemeMagic panel. Then go scroll down. You can see that the Footer Module group with 2 parameters have been added to ThemeMagic. And now you can change the settings of the parameters to the front-end of your site using ThemeMagic.

This is the end of our video tutorial today. Thank you for using the T3 version 3 Framework. You can view more tutorials at Youtube.com/JoomlArt.