Posted by & filed under A2Billing, VOIP.

As a way to improve and share the look and feel of my custom A2Billing instance, I started working on changing the most used screen, hence the index.tpl or Customer Login Screen. After finishing my customization (check here) I decided to make it generic and available at GitHub so anybody could use it.

I am working on all the other customer templates and will soon publish all that content. It still requires some more tests and making use all options work as expected.

It is important to notice that this customization takes advantage of the Twitter BootStrap 2.0. So besides the benefits of a sleek, intuitive and powerful front-end framework, it is very easy to customize. Check this free and non-free but cheap themes providers:

Install instructions:

There is no install procedure since we only need to overwrite the template files, but below you can find the path of the file to overwrite.

Notice that I mention “overwrite” because I could not find an easy way to change the configuration setting named $SKIN_NAME. If you do know how to change this value via changing a A2Billing global setting, please let me know.

Bash A2Billing Customer Template customization

Output HTML:
Check the output in different languages and colors.

Source code can be found at GitHub

Background flags in dropdown.

As you know, setting the background of a select option items does not work in all browsers and it behaves in different ways according the browser version/name. As I tried to kept the default behavior provided by A2Billing, the flags should appear on Firefox but not on Chrome and Safari. This can be addressed via using jquery but did not want to overload a simple sample. To refresh your memory and see how the default code works you can check the A2Billing demo here and investigate with different browsers.

 

Update 06Nov2012: Matt from sysadminman.net gave me a tip about how to test this template without having to overwrite your current template (very useful to try the template and decide). You can add “?cssname=mytemplatename” to you URL; mytemplatename is the folder name where you have all your customer *.tpl files, for example index.tpl (this level should be at the same level as default)

It is important to notice that this sets a session value so be aware in case you maintain several folders on the same server.

 

Feel free to send any questions to ulises at devaleph dot com


Ulises is a Computer engineer with over 8 years of world-wide management experience who has lived in the US and Argentina and worked on large technology projects for companies in countries such as India, Bangladesh, Spain, Brazil, USA, among others.
Be Sociable, Share!
  • more A2Billing Customer Template customization

Trackbacks/Pingbacks

  1.  » A2Billing template using Twitter Bootstrap – SysAdminMan Blog

Leave a Reply

  • (will not be published)