Demo Content

Modify Colours

Modifying the entire colour scheme of Afterburner is incredible easy, with just 1 image and 1 CSS file to contend with, the process will be quick and simple. There are around 45 colour, background, border colour references in the single CSS file (e.g. light.css)

For this guide, we are going to focus on changing the highlight / secondary colour of style, specifically Light Style 4.

Editing the Source

The first step in changing the colour scheme is to edit the single image that generates all the graphics for the theme.

Step 1

Open the afb-sprite.png file in Adobe Fireworks. Select the frame of the style variation you wish to modify by the frame navigation buttons in the bottom right of the screen

Modify Colours

Step 2

  • Scroll to the top of the file
  • Select the top, graded image
  • Click the palette icon in the bottom properties panel
  • Choose your intended colours from the popup palette
  • There are two indicators that creates the gradient, so change the colour of both
Modify Colours

Modify Colours

Step 3

  • Select the image beneath the one from Step 2
  • Click the palette icon in the bottom properties panel
  • Choose your intended colours from the popup palette
Modify Colours

Modify Colours

Step 4

  • Scroll down to the middle of the source
  • Select the icon next to the logo text
  • Click the palette icon in the bottom properties panel
  • Choose your intended colours from the popup palette
  • Select the text underneath the logo (slogan)
  • Click the palette icon in the bottom properties panel
  • Choose your intended colours from the popup palette
Modify Colours

Modify Colours

Modify Colours

Step 5

  • Export the file: File → Export
  • Upload the file to /templates/rt_afterburner_j15/images on your server
  • Ensure the name matches the style you are using: light4.png
Modify Colours

Editing the CSS

The next step is to load the CSS file, in this example, light4.css. There are various highlight / secondary elements that have coloured CSS added to them, whether that be colour, backgrounds or borders. The following guide will outline how to change these.

Step 1 - Showcase Area

There are 2 elements in the showcase area (between header and mainbody), that have coloured styling that needs to be changed. These are the highlight for bolded text as well as the number typography. Edit these colours to match the colour you used in the source.

Showcase Highlight Text - line 79 - light4.css

#showcase b {font-weight: normal;color: #7F8C51;}

Showcase Number Typography - line 81 - light4.css

#showcase .num {float: left;background :#7F8C51;text-align: center;line-height: 90%;color: #fff;font-size: 2em;padding: 3px 8px;}

Step 2 - Highlight Module

The other, non image elements, that use the secondary colour styling is the _menu module variation.

Module Background - line 118 - light4.css

#colmask .menu {background: #7F8C51;color: #fff;}

Module Borders - line 119 / line 122 - light4.css

#colmask ._menu .module-title {background: url(../images/light4.png) 0 -0px repeat-x;border-bottom: 1px solid #6B7643;color: #fff;}
#colmask ._menu .module-body {border-top: 1px solid #97A763;}

Step 3 - Preview

Below is a screenshot of how the template would look with the modifications. In just a few mintues, you can easily change the entire colour scheme.


Modify Colours

Servicii Publice

Compartiment Registru Agricol
Fond Funciar si Cadastru
Compartimentul Serviciul Social, Asistenta
Sociala si Autoritate Tutelara
Oficiul Juridic
Oficiul Resurse Umane, Secretariat
si Fond Arhivistic


Learn More

FORMULARE UTILE

CERERE pentru ELIBERAREA ACTULUI  DE IDENTITATE

ACTE NECESARE SOLICITARII AJUTORULUI PENTRU INCALZIREA LOCUINTEI


Learn More

Configuration

Below is a preview of the configuration options with Afterburner, as seen at Extensions → Template Manager → rt_afterburner_j15

Configuration

Default Colour Style

Choose from 8 inbuilt colours variations, 4 light and 4 dark

Template Width

Set the width of the template in pixels

Left Side Columns Width

Set the width of the left column

Right Side Columns Width

Set the width of the Right column

Left Column Colour

Set the global background colour / style for the left column, choose from either Colour Style 1 or Colour Style 2

Right Column Colour

Set the global background colour / style for the right column, choose from either Colour Style 1 or Colour Style 2

Mootools Enabled

Disable the 70KB mootools.js file being loaded by Joomla. Enable this option if you require the use of the Mootools library

Captions Enabled

Enable or Disable the captions.js script from Joomla

Show RocketTheme Logo

Set this option to hide if you wish disable the RocketTheme logo in the bottom right of the template

Fast Loading

Below are a series of diagrams to compare Afterburner against the default templates as well as two 3rd party themes, advertised as being the fastest Joomla template.

For the test, we are comparing page load time (Time), page file size (Size) in addition to the number of requests per page (Requests), as well as the number of requests after initial load caching (Requests after cache).

The statistics are based on frontpage data from a default Joomla install. Some elements were removed from the page during testing to ensure the same data loaded for all, resulting in more reliable, accurate and consistent data.

Size
  • 25% the size of JA_Purity
  • 33% the size of YouSimplicity
  • 38% the size of Milkyway
  • 39% the size of Beez
  • 95% the size of Bolt
Time
  • JA_Purity is 211% slower
  • Beez is 174% slower
  • Milkyway is 167% slower
  • YouSimplicity is 159% slower
  • Bolt is 137% slower
Requests
  • JA_Purity has 5x more requests
  • Milkyway has 4x more requests
  • Beez has 3x more requests
  • YooSimplicity has 3x more requests
  • Bolt has 2x more requests

Time, Size, Requests, Requests from cache Charts

Requests Comparative Chart

Safari Web Inspector Comparison

Requests (from cache) Comparative Chart

Safari Web Inspector Comparison

Time (MS) Comparative Chart

Safari Web Inspector Comparison

Size (KB) Comparative Chart

Safari Web Inspector Comparison

Feature Comparison

As shown above, the statistics shown Afterburner has the fastest load time, the lowest file size per page and well as the least number of requests. However, the adoption of the fastest Joomla template has to be gauged against the feature set. Not only is the template fast, it is fully featured, beyond that of any others in its class, and being free, clearly shows Afterburner as the victor.

See chart below:-

Features

Price:

SEO Layout:

Collapsing Positions:

Dropdown Menu:

Module Positions:

Dynamic Widths (Wrapper & Side Columns):

Colour Variations:

Active Image Count:

Compressed CSS:

Disabled Joomla! Mootools:

Tableless Layout:

Tableless Joomla Content Overrides:

Afterburner

Free!

18

8

1

Bolt

$25 - $60

8

X

7

6

X

Techniques

  • Disabling Mootools
    A major difference between Afterburner and the default templates, Milkyway and Beez, is the script absence. Mootools.js and captions.js are loaded by the default templates, and account for nearly half of the entire size of a page load. Therefore, if you do not need to use mootools, you are impacting your performance for no reason. This is disable by default in Afterburner and can be toggled at Extensions → Template Manager → rt_afterburner_j15

    The scripts loaded in Beez and Milkyway are more then the entire page load of Afterburner, inclusive of all images, CSS and HTML!

  • One Image
    It appears that there are multiple images in Afterburner, one for the logo, one for the module header gradients, one for the RocketTheme logo etc... But that is not the case. All are actually part of one image, which, using CSS background positions gives the appearance of multiple images. This type of image is termed as a sprite.

    There are less HTTP requests when using sprites as instead of loading many images, you are just loading one. Although the single image will be large in size then any single, numerous image, it results in less overall size and requests, which results in greater performance.

    12KB is a small size for the entire image set of an entire template.

  • CSS
    The stylesheets are as refined as possible, compressing each CSS string to a single line, rather than an expansive layout with each variable on its own line. This still maintains the ease of use when editing CSS but reducing white space and subsequently, overall file size.
Copyright © 2020 www.izvoarele-ph.ro. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License.