Customize Appearance Theme

Get VueMinder

Overview

VueMinder 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. 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.

A Walkthrough - Customizing the Month View

In this example, the Appearance Theme Editor will be used to add a background picture to the entire Month view.

1. The first step is to click the "Customize Appearance Theme" command on the Tools menu. The currently loaded appearance theme (specified in the Appearance Options) 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 enabling customization of how the component appears.
   
   
3. Each component can 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 the Month View's control area appears, to add a background image to the entire Month View.
   
   
4. As the popup shows, we need to press "3" to edit the Month View's control area role. You'll also notice there are "C" and "F" options. 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 MonthViewSingleControlArea, after pressing the "3" key:
   
   
5. The Settings window is divided into sections for modifying the background, border, and font. Since we want to specify a background image, the section we're interested in is the Background section, located on the left side of the Settings window. Currently, the background is set to white. Let's change this to use an image instead.
6. To select an image, click the "Image" button and select "File".
   
   
7. Browse for an image file and click the Open button after selecting the desired image. For best results, pick an image that has already been resized to be closer to the resolution of your monitor. You can change the "Layout Mode" to "Center" to prevent the image from stretching or changing its aspect ratio as the main VueMinder window is resized. Images can also be tiled.
8. After selecting an image, you might notice the only thing that changed on the Month View is that you can now see a part of the image where the day of the week names are shown, but the dates are still a solid light gray. The next step is to change the "ScheduleDay" role to have a transparent background. Hover the mouse over the Month view and press "1" to open the "ScheduleDay" role's settings.
9. Change the background from light gray to transparent by clicking the color box in the Background section of the Settings window.
   
   
10. You'll notice the image still hasn't appeared. If you recall from the popup when hovering over a date, 3 roles were listed - ScheduleDay, ScheduleWeek, and MonthViewSingleControlArea. We've changed two of those roles, but there's still one more to go. Hover the mouse over a date and press "2" to edit the ScheduleWeek role.
11. The ScheduleWeek role is configured to use a default background - meaning it will use whatever background its parent role has been configured to use. In this case, it's a white background. We need to change it to be transparent, just like we did for the ScheduleDay role. After making this change, you'll see the MonthViewSingleControlArea's image appear because the background of both the Day and Week components in the Month view have been configured to be transparent. If you're familar with "z-order", the MonthViewSingleControlArea role is at the bottom of the z-order.
    
    
12. You'll notice the background of days in the previous and next months is still gray. Also, the current and selected dates are light blue. We're getting closer, but there are still a few more things to change. Hover the mouse over a day and press "1" to access the ScheduleDay settings again.
13. In the ScheduleDay settings, there are tabs for the states and those state have sub-tabs. So far, we've only changed the "Normal" appearance of "Common States". The color of dates in previous and next months is specified on the "Other States" tab under "AlternateItem". Click that tab so we can change its background.
    
    
14. In this example, instead of making it completely transparent, we'll make it slightly darker, to help differentiate between the current and previous/next month. Click the color drop-down and change the color from "235, 235, 235" to "60, 0, 0, 0". When entering the numbers, make sure the mouse cursor is positioned so it's over the settings window and not some other area of the window. Otherwise, the number key preses might be intercepted. Press the enter key after typing 60, 0, 0, 0.
    
    
    
    These numbers represent the alpha, red, green, and blue values. Alpha is the transparency level, between 0 (fully transparent) and 255 (fully opaque). When there are 3 numbers (e.g. 235, 235, 235), the alpha is assumed to be 255. When there are 4 numbers (e.g., 60, 0, 0, 0), the alpha is specified as the first number. In this example, we're using black as the color, but with an alpha value of 60 so the next and previous months will have slightly darker dates when overlaid on top of the background picture.
15. Click the "Common States" tab on the ScheduleDay settings window and then click the "Selected" sub-tab. It's currently set to light blue. Let's change this to white, but with an alpha value of 140. Use the same technique described above, but enter "140, 255, 255, 255".
16. Click the "Active" sub-tab and change its background color to "160, 255, 255, 255".
17. If you have trouble seeing the date numbers when using your image, hover the mouse over one of the date numbers and press "1" to edit the "ScheduleDayHeader" role. Change the background color to "120, 255, 255, 255" and the font color to black. You might also want to make the font bold. These settings are in the "Font" area of the window. Also make this change on the "Other States" tab for "AlternateItem". It's starting to look better...
    
    
    
18. We're almost done. There's one more day role that needs to be changed, and that's for the current date. Hover the mouse over today's date and press "1" to edit "ScheduleCurrentDay". Change the background color to whatever you'd like. In this example, we'll stick with the light blue but add some transparency to it (using an alpha value of 120). The Normal, Selected, and Active background colors will all need to be modified.
    
    
19. We're done! The final step is to save the appearance theme so the changes aren't lost when VueMinder is closed. Click the "Save As" button on the Appearance Theme Editor window. Save to a new file name and make a note of the folder where your theme was saved.
     
    
20. 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.

Here's the final result of these steps. Note, this is just one very small example of how VueMinder's appearance themes can be modified. There are many other customizations you could make.

Summary

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