Appearance Theme Editor (Pro Version Only)
Version 7.3 adds a graphical editor for creating custom appearance theme files. This tool allows you to simply hover the mouse over any visual component (i.e., button, tab, etc) of VueMinder. 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!
Lite version users - if you're wondering what this is all about, the Pro version comes with about a dozen different appearance theme files. Up until version 7.3, these files were not editable. The Pro version now has a tool to allow appearance theme files to be edited or new ones created. This feature is not included in the Lite version. If you're curious to see the appearance themes and editor in action, you can upgrade to a free trial version by clicking the "Upgrade to Pro" button at the top of the window, or by clicking here.
A 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. 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 an event and hover the mouse over one of the buttons at the bottom of the Event Editor 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:
4. 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 s 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.
5. 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.
6. After selecting an image, the buttons in the Event Editor are refreshed to use the selected button image.
7. 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.
8. Now the buttons look better!
9. 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.
10. 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 new Appearance Theme Editor can do. Every single visual component of VueMinder can be tweaked using this tool. To learn more about how the tool works, help documentation and additional walkthroughs are available here.
We hope you'll enjoy this new tool. If there's enough interest in defining custom themes, then we'll create an area on the VueMinder website where themes generated by the community can be freely shared.
Next >
