Introduction
Although VConsole comes with a pretty generic interface, it also allows developers to customize the look and feel of the software. All the files that govern the overall look and feel are located in the vconsole/skins/vsource/ folder. This includes CSS files, HTML template files, and images. A developer need only modify the files in this folder in order to change the look and feel of the interface. Plus, if the developer has purchased the "Custom Branding" option, he/she can completely get rid of any VSource branding and brand the software as their own. When modifying the HTML templates of VConsole, it is extremely important that the developer does not mess with any of the VConsole variables, (See below) otherwise the software may not function correctly and / or unexpected results could occur. Please test the software thoroughly before using it in a production environment.

Modifying the VConsole HTML Template Files.
One of the easiest ways to change the look and feel of VConsole is to modify the HTML template files. These files are located in the vconsole/skins/vsource/templates/ folder.

Here is a list of each of the template files and where they are used.

• basicinfo.html - This file
  serves the purpose of displaying a basic information window. Currently it is only used when a user exports data records to excel.
• calview.html - This file is used to display the calendar in datamanager type modules. When the user switches to "Calendar Display", this file is used to generate the calendar.
• chartview.html - This file is used to display the chart viewer in datamanager type modules. When the user switches to "Chart Display", this file is used to generate the chart viewer.
• datamanager.html - This file is used to generate the data manager within datamanager type modules. It determines where the pages drop down lists go, where the legend goes, where the lines per page drop down list goes, where the data records are displayed and it also provides a form that is used for uploading files. Be very careful not to mess up the form in this file. All fields including the hidden ones MUST be contained within the form tag in this file.
• forms.html - This file is used to display all the forms when someone is generating 1 or more forms using the "Generate Forms" data manager action.
• getpass.html - This file is the file that is displayed to the user when they click on the "Forgot Password" link on the login screen.
• icon.html - This file is used to display each icon in icon display mode in a datamanager type module. You can change where the thumbnail shows, where the record data shows, add extra information and more. When the user switches to "Icon Display", this file is used to generate the icons.
• licerr.html - The contents of this file is displayed if a valid license is not found.
• login.html - This file is the file that is displayed for the login screen. When a user opens up the software in a browser window and they get the login screen, this file is used to generate that screen.
• mailtemplate.html - This file is used to send emails when calling the send_stationary() php function. Modify this file to customize the look and feel of emails that are sent using the send_stationary() function.
• main.html - This file is used to generate the main VConsole interface. Everything in VConsole is contained or generated within this file. To update the look / feel of the entire VConsole interface, modify this file. Be careful when modifying this file because the software depends on certain components within this file. Changing or removing the class or id attributes of some components in this file could cause unexpected results within the software.
• mapview.html - This file contains the HTML to display when the user is in Google™ Map view.
• message.html - This file is only used to show fatal error messages to the user. Such messages include invalid license files, expired license files, and an incompatible browser.
• propertiesmanager.html - This file is used to generate the properties manager interface whenever you call the propertiesmanager() function. It determines where the tabs are displayed, where the fields are displayed, where the buttons are displayed and more.
• wizardmanager.html - This file is used to generate the wizard manager interface whenever you call the wizardmanager() function. It determines where the fields are displayed, where the instructions are displayed, where the buttons are displayed and more.
• wizardmanagerstart.html - This file is used to load the wizard manager and properties manager interfaces. It is sort of a primer template that puts all the components in place and gets everything ready for displaying the 2 interfaces. It is only shown for a short moment while the real interfaces load. If you modify this file and don't put the correct components where they should be, unexpected results could occur.

Modifying The CSS Files.
A single CSS file is responsible for most of the software look and feel. That file is located at vconsole/skins/vsource/css/vconsole.css . Simply modify this file to your liking to modify the look and feel of each VConsole componen. (We actually don't recommend editing the vconsole.css file directly. Instead, we recommend putting your custom css in the customstyles.css file. See below.) If you want to modify a component but don't know what CSS style to modify, you can always look at the page source to figure out what CSS class or id is used for a component. Also, when you modify a CSS style, make sure that all other components that use that same style look as they should. It is a common mistake to modify a CSS style because you want to modify a certain component, but your change ends up changing the look / feel of several components that you did not anticipate. Always know the full effect of modifying a CSS style. Also, it may not be possible to see what class or id is used for a component because it is not in the source for the page. This happens when a component is loaded via AJAX. To see what is loaded via AJAX, use the Firebug Firefox plugin to view the HTML code that is received by the AJAX function. (Using Firebug is covered briefly in the Debugging section of this publication.)

IMPORTANT: Instead of modifying the vconsole.css file directly, we recommend adding or overwriting CSS styles by putting them in the vconsole/skins/vsource/css/customstyles.css file. The reason for this is that a VConsole update may overwrite your custom CSS if the vconsole.css file is included in the update. By putting your styles in the customstyles.css file, you will avoid your custom CSS being overwritten by an update because we will never overwite the customstyles.css file in any update.

Modifying or Adding Images, Buttons, and Icons
Images, buttons, and icons are located in the vconsole/skins/vsource/ folder. You can add, modify, or remove images that are used in the VConsole interface by managing the image files in the images, buttons, and icons folders.

• Modifying / Adding / Removing Images. Basic images are located in the vconsole/skins/vsource/images/ folder. These images are used in several places throughout the interface. Simply change, add, or remove files as you need to.
   
• Modifying / Adding / Removing Buttons. Button images are located in the vconsole/skins/vsource/buttons/ folder. Each button image should be 32 x 32 pixels (or whatever size you have set under Main Menu - Global Settings - General Settings - Navigation Button Size) and should be in png, gif, or jpg format. Buttons are used in the top navigation bar as well as in other places within the software interface. The code to correctly display buttons in your interface can be generated by the getimage() function. To add a button, simply create your button image file and upload it to the buttons folder. All image files within the buttons folder are recognized by the getimage() function. (See PHP functions for more information on the getimage() function)
   
• Modifying / Adding / Removing Icons. Icon images are located in the vconsole/skins/vsource/icons/ folder. Each icon image should be 16 x 16 pixels and should be in png, gif, or jpg format. Icons are used in drop down menus as well as in other places within the software interface. The code to correctly display icons in your interface can be generated by the getimage() function. To add an icon, simply create your icon image file and upload it to the icons folder. All image files within the icons folder are recognized by the getimage() function. (See PHP functions for more information on the getimage() function)
    
• Modifying / Adding / Removing File Extension Icons. File extension images are located in the vconsole/skins/vsource/file_extension_icons/ folder. There are several other folders under this one for each icon size that is available. You can modify any of the icons and / or add your own icons so that they are available in the software. The code to correctly display icons in your interface can be generated by the getimage() function. To add an icon, simply create your icon image and upload it to the appropriate size folder. All file extension icon images are recognised by the getimage() function automatically.