This tutorial shows how to customise the BBCode buttons to a different looking set without replacing the entire series of them.

Difficulty Level: Beginner

Step 1) To begin we need to open the sites CSS document and locate the class used for the BBCode buttons.

• Open Control Panel > Customise Design > Style Sheet (CSS)
  
• Enable Your Browsers Search Function (CTRL + F)
  
• Enter The Following Class Into The Box: .codeButtons
  

Step 2) Now that you have located the necessary class we can adjust the button styles to make them appear as shown in the image.

• The first thing we can do is change the font of the icons. Depending on your design this may have already been done before. In any case either add in or adjust the following style: font-family:font;.
  
• For the purpose of this tutorial we are going to recreate the image as featured at the top of the post. To do this we are setting the font-family style as font-family:times new roman;.
  

Step 3) Once this has been completed you can then style the buttons however you wish. If you would like to style them as shown in the above image finish off the CSS following the example code as shown below.

Please Note: If you are going to follow my original styling of the buttons please download the background image yourself and adjust the link to where it is placed within your own file manager. Failure to do so may cause issues when this thread is moved at a future date.