Knowledgebase

Joomlabamboo template and extension documentation

What is Theme Magic?

overview

Theme magic is a non-destructive real time preview tool for your T3 powered website. 

Theme Magic makes it possible to create a multitude of theme presets and colour schemes by using a colour wheel or specific HEX values in order to manipulate pre-determined elements within the template.

 

How does Theme Magic work?

Theme Magic uses LESS files to interface with the template variables file to make changes to the Joomla template in real time.  It allows the user to create multiple preset settings by storing custom LESS variables, which are then used to populate the theme with.

The default preset references the default values set in the main template variables.less file. While each preset or variation uses the custom-variables.less file located in the less/themes/[my preset]/ folder.

When a preset is saved, the css for the preset is then compiled and css files are generated that are relevant to the saved settings for that theme. The new css files are located in the css/themes/[my preset]/ folder.

Theme Magic allows you to use variables as values in the Theme Magic settings.

Since Theme Magic is essentially a GUI for the LESS variables file it is possible to use LESS variables as values for various elements in settings panel.

As an example you can use the variable @primary (which is set in the general settings panel) to specify that you want to use the colour assigned to the primary value for another field.

eg Assigning the “Text Colour” field with a value of @primary will apply the primary colour to the text colour on the page.

You can extend this to use any appropriate colour from the template’s variables.less file.

A list of possible variables to be used in Theme Magic.

A list of possible values include:

 

  • @black
  • @grayDarker
  • @grayDark
  • @gray
  • @grayLight
  • @grayLighter
  • @white
  • @blue
  • @blueDark
  • @green
  • @cyan
  • @red
  • @yellow
  • @orange
  • @pink
  • @purple