Overview

VueMinder Calendar includes a graphical editor for creating custom appearance theme files. To use this tool, hover the mouse over any visual component (i.e., button, tab, etc.) of VueMinder Calendar. Press a number key to edit the display properties of the hovered component type, such as its color. You can even assign bitmaps to skin the various components of the window. We know there are some very creative people out there, so if you come up with a cool appearance theme and would like to share it, please let us know!

An Example Walkthrough - Customizing Button Appearances

In the example walkthrough below, the Appearance Theme Editor is used to change how buttons are drawn. Instead of using the default gray gradient color, a bitmap is selected.

1. The first step is to select the "Customize Appearance Theme" command from the Tools menu. The currently loaded appearance theme (specified in the Appearance Options window) is used as the default starting point for the editor.
   
2. The Appearance Theme Editor window floats above VueMinder Calendar. When the mouse is hovered over a graphical element, a popup appears allowing customization of how the component appears.
   
3. Each component may have several items (aka "roles") associated with it. To edit a role, click the associated number key specified in the popup balloon. In this example, we want to edit how buttons appear. Since there aren't any buttons on the main window, we'll open the Calendar Properties window and hover the mouse over one of the buttons at the bottom of the window.
   
4. As the popup shows, we need to press "1" to edit the button role. You'll also notice there's a "C" and "F" option. Pressing "C" will display common properties for the role, such as whether it should use "flat" mode or Windows OS themes. Pressing "F" will filter the role hierarchy tree shown in the Appearance Theme Editor window, so only roles that are associated with buttons will appear. If you're familiar with CSS styling, the Appearance Theme Editor uses a similar concept. Each component role can have child roles. Setting the appearance properties of a role will cause that change to cascade to all child roles, unless the child roles specifically override the parent appearance settings with their own settings. Here's the settings window for the button role, after pressing the "1" key:
   
5. The button role is already associated with an appearance "resource", which is a collection of appearance settings that have been saved all together and can be reused by other roles. Before the appearance of the button can be modified, the resource association is removed. This is accomplished by clicking the listed resource and then pressing the "-" button above the resource list. Some other roles also will have associated resources. Removing the resource association does not actually delete the resource.
   
6. After removing the resource, it's time to have some fun. The first thing we'll do is click the background image button and browse for an image. There are thousands of free button images that can be downloaded from the web, or if you know your way around a graphics program you can roll your own.
   
7. After selecting an image, the buttons in the Event Editor are refreshed to use the selected button image.
   
8. As you can see, the buttons don't look right. The text is black and difficult to read. There's also a black border (ugh!). The next step is to fix the text color to make it more readable. We'll change it to white, using the drop-down color control in the Font section of the settings editor. We'll also adjust the border "alpha" to be transparent.
   
9. Now the buttons look better!
   
10. The settings window also has tabs for adjusting the button appearances when the mouse if hovered over the button (i.e., making it light up) and when it's pressed. Similar steps would be used for adjusting those additional states. When finished, the settings window and Event Editor window need to be closed. The "Save as" button on the Appearance Theme Editor window can then be clicked to save the appearance theme as a new .isl file.
    
11. To use the saved appearance theme the next time VueMinder starts, make sure to select the file as the theme in the Appearance Options window. Otherwise, VueMinder will revert back to the original theme file.
    

Summary

The steps above barely scratched the surface of what the Appearance Theme Editor can do. Every single visual component of VueMinder Calendar can be tweaked using this tool. To learn more about how the tool works, help documentation and additional walkthroughs are available here.

Copyright © 2008-2011 VueSoft LLC. All rights reserved. Microsoft Excel, Microsoft Outlook, and Microsoft SQL Server are trademarks of Microsoft Corporation. Google Calendar is a trademark of Google Inc. This documentation is subject to change without notice.