Afterburner is a fast loading minimal template from RocketTheme. This is a complete change from the traditional Rockettheme templates which are known for fancy javascript features and rich imagery.
Afterburner is designed for speed and is one of the fastest Joomla templates. Afterburner only uses 1 image and 1 css file to keep the server load to a absolute minimum. However, Rockettheme took care as to not skip on the fantastic features which include:
- 8 standard color options (Light and Dark variations)
- 3 column collapsible layout with custom width configuration
- Column width controlled from Joomla admin interface
- Total flexibility
- Can be easily customized with Source Graphics
- Afterburner is SEO optimized, source-ordered and has a table-less layout
The template comes with detailed information on how to easily customize and create your own style.
Free! Did we mention that the Afterburner template is completely free? Which makes this an even better reason to learn the workings of Afterburner.
Afterburner Site Showcase
- Joomla Hosting Reviews (This site)
- Atlanta Condo Reviews
- iPod Speaker Reviews
Modifying Afterburner
Being Basic, Afterburner will need a few modifications to give your Joomla site just the right look. After creating and modifying many Afterburner sites we have learned a few tricks to help.
We hope you enjoy these hints and tricks:
Modifying Afterburner logo and images.
It is important to remember that the Afterburner template has all it's backgrounds, images and Logo placed onto one final image for each of the 8 styles. This image is best edited in fireworks but for those that dont have fireworks could also use Photoshop or Gimp,an opensource free alternative.
Often with a website you can right-click images with your browser to get the file name but in the case of Afterburner everything is classed as a background image in the css files. To find the image file you are looking for access your template through FTP and browse the image files. The image file will correspond to the style you have assigned i.e. If you have light4 selected as the style for your template then you will need to edit light4.png in the image folder.
Download and open the image and you will see all the template images lined up one after the other. You can replace any of these images with your own or a different colour variation. Save it and upload.
Adding Right Top text
Adding the top right text like they do on the demo site http://demo.rockettheme.com/free/afterburner/features/example-modules
This is a very simple tip. Don't forget the Newsflash Module! Remember that most things in Joomla are organized by Sections and Categories so you will have to create those and assign your new Newsflash module to your new section and category. Once that is done all you have to do is publish the module in the 'top' module position.
Working with Mailto Links
Mailto Links with images
Okay a lot of people get this issue but not just with Afterburner. Basically when adding a simple email link to a image can show a whole load on the front end of your site. This is simply because Joomla has a built in email-cloaking plug-in. You need to un-publish this in the admins plug-in section. It is called 'content - e-mail cloaking'.
Installing RokNavMenu
When installing and publishing the RokNavMenu you may get a front end Fatal error. This relates to the code for the RokNav Menu fusion style.
Here is how to fix it:
- FTP to siteroot / modules / mod_roknavmenu / themes / fusion
- Download and open layout.php
- Go to line 22
- Find the word getParamenter and replace with getParameter
- Save the change and replace the old file
- Everything should now work fine.
Adding Padding to Content Images
You may want to add some "breathing room" to your content images. Theare are two ways to fix this:
1. Open the appropriate style css file and add this line of code to the bottom
img {margin:3px !Important;}
2. In the content editor within Joomla you can add in-line styles to your images like this
<style="margin-right: 5px;">
The Importance of z-index
Afterburner uses z-index which is especially important to know when using pop-ups or a image gallery. The z-index is a css property that will make certain elements show on top of other elements. The z-index of the Afterburner menu is set to show above all other things and therefor can cause issues with some lightbox galleries, basically the menu will still be on top of the pop-up image. The only way to fix this is too check the css from your gallery and make sure you give the main element from the gallery (such as a div) a z-index of around 1000 just to make sure it is on top of everything else.
The code would look like this:
z-index:1000;
Additional Customization tips
If you have any other tips for customizing afterburner we would love to add them here and give you a link back to you.
email the tips to This email address is being protected from spambots. You need JavaScript enabled to view it.
Thanks!
Further Reading about improving Joomla SEO and site speed
If you are using afterburner you want your pages to load fast. Check out these other informative articles about making your Joomla site fast and perform well.
