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
- 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.
- 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.
- 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.
- 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:
- 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
- To select an image, click the "Image" button and
- 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.
- 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"
- Change the background from light gray to transparent
by clicking the color box in the Background section of
the Settings window.
- 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.
- 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
- 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
- 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.
- 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,
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
- 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,
- Click the "Active" sub-tab and change its background
color to "160, 255, 255, 255".
- 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...
- 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
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.
- 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.
- 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.
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