Customizing Color Scheme

You can change the default blue color scheme from Wright templates to whatever color you want.

  • Go to Extensions > Templates > js_wright (or the name of the Wright based template you are using)
  • Choose "Custom" as Style

Joomlashack Wright Customize Color Scheme

  1. Choose a new Color scheme.
  2. Click "Save"

Joomlashack Wright Customize Color Scheme

  • Click on "Compile LESS to CSS" button in order to rebuild the custom style with the new color scheme

Joomlashack Wright Customize Color Scheme

Refresh your frontend to see the new color scheme in action.

Important: every time you select different colors for the custom style, is required to save changes first. Then click "Compile LESS to CSS" button to rebuild the style.

If you are using another template based on Wright, the number of available color options would be different. 

Please note that some browsers hard-cache the CSS, especially Chrome. If you don't see the changes reflected immediately, you may need to clear cache.

Having problems when compiling?

In some cases you can get an error while trying to compile LESS to CSS. 

error compile

If you have Admin Tools Pro installed:

  • Go to Components > Admin Tools > Web Application Firewall > Configure WAF
  • In Cloaking, change:
    • Block tmpl=foo system template switch to "no"
    • Block template=foo site template switch to "no"
  • Try to compile the custom template style
  • Enable back "Block tmpl=foo system template switch" and "Block template=foo site template switch"

Responsive columns breaks in tablet?

Add the custom CSS below inside custom.css file:

@media (max-width: 979px) and (min-width: 768px) {

    .s_custom .row-fluid [class*="span"] {
        margin-left: 2.7624309392265194%;

    .s_custom .row-fluid [class*="span"]:first-child {
        margin-left: 0;

    .s_custom .row-fluid .span2 {
        width: 14.3646408839779%;

    .s_custom .row-fluid .span3 {
        width: 22.92817679558011%;

    .s_custom .row-fluid .span4 {
        width: 31.491712707182323%;

    .s_custom .row-fluid .span6 {
        width: 48.61878453038674%;

Hopefully this will solve the issue. If you need more help, please contact us.