Light Responsive Template for Joomla 3.x

The Mojo3 template comes with a choice of 7 vibrant color variations, which can be chosen in the template options. You can stick to one color for the whole site, or use a combination of these colors by assigning a certain style to a particular menu item.


Copy the template Style to use the colors

  • Go to Extensions > Template Manager and click on the Mojo3 - Mojo Green (Default) style  to open it.
  • Use the Save as copy button 7 times (or as many times as you have colors)
  • Rename each style to the color name and under the Details tab in each Style choose the appropriate color variation with the dropdown box.
  • You can now use each color Style on a single menu item (in the Menu Item Options on the right under Template Style, or you can choose it as a site default syle in the template options.

Roll your own

To create your own color variations, you can use the provided ones as a guide.
Follow the steps below:

  • In the template root, add you new color option to the dropdown in the template options. Find the file /mojo3/templateDetails.xml and locate the color options field.
  • Add your own new color option, like this:
    <field name="colorVariation" type="list" default="mojogreen" label="Color Variation" description="Template Color">
      <option value="cherryred">Cherry Red</option>
      <option value="luminousteal">Luminous Teal</option>
    <option value="midnightblue">Midnight Blue</option>
    <option value="mojogreen">Mojo Green</option>
      <option value="obsidianblack">Obsidian Black</option>
      <option value="olivegreen">Olive Green</option>
      <option value="tangerinetoffee">Tangerine Toffee</option>
      <option value="mynewcolor">My New Color</option>
  • Copy the files template-commented_cherryred.css and template-minified_cherryred.css and rename them to your color scheme.
  • Adapt the entries in both files to your liking.
  • Don't forget to do the same for ie9-commented_cherryred.css (copy & rename), ie9-minified_cherryred.css (copy & rename), and adapt the colors for the new ie9 svg files once copied.
  • You can now use that Style either on some menu item or choose it as a site default syle in the template options.