Create Your Own Custom Styles

3/9/2011 6:01 PM
You can subscribe to this wiki article using an RSS feed reader.

The first thing you need to do to modify a style option in either ViewletBuilder or ViewletQuiz is to locate the My Viewlet Assets Library
folder. The default directory is the My Documents (XP) or Documents (Vista) folder.  Once you locate this folder, browse to the Styles folder.
See an example view below. I have highlighted in red an example extension for the BUTTON style (.qvbtns).  This is an internal file type that only our
products will read.  You should make sure that you enable file extension in your folder view before beginning.

Next you will locate the style you want to modify and rename the extension to a .zip so you can open it.  It's really just a zip file with a custom file
type.  Below you will see how the new file type looks.

Double-click on the file to open the contents.  You will see a resources file, and 2 XML files.

The Resource folder contains the graphic elements that makeup the button.  You have to think about creating the
different states of a button (Normal, Mouse Over, and Mouse Down).  You'll see all those pieces below.

The document.xml file contains the basic setup details for the button.

The header.xml file contains to custom information that our application needs in order to properly use these styles.
We will need to generate this file for you since we don't have an external way for you to create this.  Please email
your updated Resources and Document.xml files to and we will have the header.xml file created for you.
Here is an example header file:

You would follow this same procedure to create new or modified styles for all the other elements in the library.  The easiest one is altering
the font size or font type in some of the text box styles.  This doesnt require any graphical changes so you can repackage the style back
and use it right way.  Longterm we would like our users to create new styles for us to add to the library that comes with the applications. 
We may ask you if we can add the style if we feel it would work for other users.

If you just wanted to change the font or font size, you can open an existing style and alter a few elements and repackage it back up.
Here is the Document.xml file from the BorderlessTextFieldStyle.qvtfs.  I highlighted the values you can easily change and save back.

Home: User Guide What's new: Recently changed articles