7ce71ee9f0931c4ea73943235dd5af32.jpg
Grutas

ThemeMagic

JA T3v3 is powerful by its easy customization with ThemeMagic. You can allow unlimited parameters to be configured in the ThemeMagic. The left menu is the configuration panel, the right panel is your homepage, so when you change setting of parameters, you can see the changes in your homepage.

 

I. Enable ThemeMagic

From back-end of your website, navigate to: Extensions --> Template Manager --> Then select JA T3 3.0 template to customize.

Then access to thememagic from the ThemeMagic button on the top left menu.

Customization with MagicTheme

The left panel is the configuration panel. It contains all settings of thememagic (both default parameters and added parameters). The right panel is your site front-end. Each time you change setting, click on "Preview" button to view the changes in your site front-end in the right panel.

Let's view parameters in the thememagic.

  • Theme: Switch the theme that you want to customize (default themes: default, dark, green, red)
  • Scaffolding: contains parameters to configure colors like: background, text, link ...
  • Visual: by default, it contains parameters to invert navbar, spotlight or set element radius ...
  • Module: the tab includes parameters to customize module elements like: module background color, module text color, module title background color, ...
  • Footer: group of parameters to customize typography like: font size, font family, headling font family

Save As Theme

After you customize a theme, you can save it as a new theme.

The save as theme will be auto generated a theme folder like any other themes.

The values of settings in the ThemeMagic are stored in the file: variables-custom.less

II. How to add new parameter to ThemeMagic

You can allow unlimited number of parameters to be configured. The customized parameters is set in the templateDetail.xml file in the folder: your_site_folder/templates/ja_t3v3_blank.

To add new fields, use the code format:

<fields name="thememagic" addfieldpath="/plugins/system/jat3v3/includes/depend">
<fieldset name="links_params" label="field_set_label">
<field name="para_name" type="para_type" default="" label="para_label" description="para_description" />
</fieldset>
</fields>

Sample Code:

<fields name="thememagic" addfieldpath="/plugins/system/jat3v3/includes/depend">
<fieldset name="links_params" label="T3V3_THEMER_FOOTER">
<field name="T3FooterModuleTitleColor" type="color" default="" label="T3V3_VARS_FOOTER_MOD_TCOLOR_LABEL" description="T3V3_VARS_FOOTER_MOD_TCOLOR_DESC" />
<field name="T3FooterModuleColor" type="color" default="" label="T3V3_VARS_FOOTER_MOD_COLOR_LABEL" description="T3V3_VARS_FOOTER_MOD_COLOR_DESC" />
</fieldset>
</fields>

Now, let's see new added parameters in ThemeMagic