Important Notice

If you have upgraded CoalaWeb Social Links to version 0.1.8 please make sure to clear your Joomla + Browser Cache and open and save the Component and Module Configuration Options. This will help all the cool new features catch up.

Last Updated

Saturday, 21 December 2013

CoalaWeb Flair Guide

CoalaWeb Flair is a Joomla 2.5 module lets you display your flair from several StackExchange sites individually or combined into one.This guide will help you get the module set up quickly and easily taking full advantage of it's features.

The CoalaWeb Flair module has a long list of options so we have broken them up into 3 sections which are explained in detail below but first we will explain how to retrieve your profile ID numbers.

StackExchange Account Details


Please note that only sites where you have more than 200 reputation will appear in the combined layout, and that flair is only updated once every 24-36 hours.

To use the combined option you will need your combined account ID so log into one of your StackExchange accounts and in your profile area click the network profile link in the top right. [Figure 1]



Next select flair from the bottom right menu. [Figure 2]



Inside the code snippet at the bottom under the sentence.

Simply copy and paste the below HTML snippet wherever you want to show off your combined Stack Exchange flair:

you will find your ID directly after users in the link. [Figure 3]




You need the user ID for each of the individual accounts that you want to list in CoalaWeb Flair. To find out what these are log into StackExchange then go to the profile page of the account you wish to add and the user ID can be found in the top right hand corner. [Figure 4]



Your second option is click flair from the menu at the top of your profile information. [Figure 5]



Inside the first code snippet at the bottom under the sentence.

Simply copy and paste the below HTML snippet wherever you want to show off your Ask Ubuntu flair:

you will find your ID directly after users in the link. [Figure 6]



Module Settings

Please note that the StackExchange flair system feeds in a pre created image with a width 208px and a height of 58px so your module position will need sufficient space to accommodate images of this size.

General Display Options

In this section you can choose whether you want the module to display your combined flair or your individual accounts separately. If you choose the combined option you will need to enter your combined profile ID and your combined profile name in this section. [Figure 7]



Individual Settings

If you chose Individual from the General Settings section you will now need to choose which StackExchange sites you wish to display and enter their relevant details. To make the module configuration more streamlined I have broken the accounts up into alphabetically ordered sections. For this example we will look at setting up three account under the letter A. [Figure 8]

You have four options.

  • Whether to display a particular account
  • The individual account profile ID
  • The individual account profile name
  • The theme to be used when displaying the account's flair

These settings are the same fo each of the individual profiles so once you have entered all the information for the accounts you wish to display move onto the next section.



Advanced Options

The CoalaWeb Flair module also has a few what I consider Advanced Options such as the option to assign a unique module ID to stop conflicts, a module class suffix or weather to use cache including the cache time. There is also an option to turn off the module css if you want to add your own styling. The last option is weather to display a link back to CoalaWeb as always it's appreciated but its up to you plus you can choose what text to display next to the link. Note: If your site is multilingual leave blank and use the language files. [Figure 9]



That's it for CoalaWeb Flair if you have any questions or issues drop by our Forum I'm sure we can help.

  • Written by: Steven Palmer
  • Tuesday, 27 November 2012
  • Pinterest