User Tools
software:gui-designer:theme-library:creating-a-theme
Differences
This shows you the differences between two versions of the page.
|
software:gui-designer:theme-library:creating-a-theme [2013/10/01 05:41] jarrod [How a Theme Works] |
software:gui-designer:theme-library:creating-a-theme [2013/10/01 06:15] (current) jarrod |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Creating a guiDesigner Theme Library Item ====== | + | ====== Creating Theme Library Entries ====== |
| + | You can create your own library files for use in future projects, or to share with others. Basically, a theme library file is just a specially formatted [[software:gui-designer:gui-file|GUI File]] - in other words, a self-contained guiDesigner project that defines how the themes and groups will be presented in the Theme Library.\\ | ||
| + | ==== Theme Details ==== | ||
| - | <WRAP center round todo 30%> | + | The theme library name and author details are grabbed from the GUI File [[software:gui-designer:project-properties|Project Properties]]. The project name is used as the theme name, whilst the author is used as the theme's author also. |
| - | UNDER CONSTRUCTION - PLEASE CHECK BACK SOON | + | |
| - | </WRAP> | + | |
| - | The following describes how to create your own theme in the guiDesigner Theme Library. When you do this correctly, your created theme will show up in the theme library along with our [[software:gui-designer:theme-library:built-in-themes|built in themes]] and will work exactly the same. | + | ==== Theme Previews ==== |
| + | Any themes defined in the project will be visible in the Theme Library file, using the theme details to render the preview. You can also create a custom preview for a particular theme by creating a subpage and naming it ''theme_<themename>'', where ''<themename>'' is the actual name of the theme definition you are creating the preview for. This allows you to show how a button theme looks with specific text, an overlay image, or amongst other objects such as a background image, etc. Anything you place on this subpage will be shown on the theme preview window within the Theme Library. If this subpage doesn't exist, the Theme Library will draw the appropriate GUI object based on the theme details alone. | ||
| - | ===== How a Theme Works ===== | + | ==== Groups ==== |
| - | To create a theme, you really need to understand how a theme works. We recommend you go to the directory where guiDesigner is installed, then navigate to the ''themes'' folder. Go to the Anodized light theme and find the .gui file. Load it up in guiDesigner. | + | You can also create 'groups' within the theme library file. Groups allow you to create a collection of GUI Objects which can be dragged and dropped in two ways: |
| + | - Dragged into the project tree - this will create a copy of the group as a new subpage in the open project. | ||
| + | - Dragged onto an open page/subpage - this will create copies of all the GUI objects within the group (buttons, etc) directly onto the page (rather than creating a subpage). | ||
| - | The first thing you will notice is that there are a number of subpages named ''group_name'' these are how groups of objects are set up. You will also notice that the theme manager is populated with items, this is where the object type themes in the theme library are pulled from when you move the project to the themes folder. | + | Good examples of use cases for the second method (dragging objects onto a page) are an Arrow Pad (containing left, right, up and down arrows, as well as an enter button) and a numpad (numbers 0 to 9, an asterisk and hash). |
| - | ===== How to Create a Theme ===== | + | To create a group in your theme library file, simply create a subpage called ''group_<groupname>'', where ''<groupname>'' is the name you want to give your group. For example, ''group_arrowpad''. This will then show up as a group item named ''arrowpad'' within the Theme Library, allowing users to simply drag the group onto a page in their project and have all the objects automatically added (or into their project tree to create a subpage containing all the objects). |
| - | Use these instructions as a general guide on how to create a theme. Make sure you create a new project first. | + | ==== Save Location ==== |
| + | Once you have created your guiDesigner file for your Theme Library entry, you need to save a copy of it into the location where guiDesigner is installed, such as:\\ | ||
| + | ''C:\Program Files (x86)\CommandFusion\themes'' | ||
| - | ==== 1 - Create Theme Items ==== | + | Create a new folder for each theme, and the first .gui file that is found in that directory will be loaded into the Theme Manager when you next launch guiDesigner. |
| - | Under the [[software:gui-designer:theme-manager|theme manager]] highlight the type of theme item you want to create eg. Buttons. | + | |
| - | + | ||
| - | Then click the ''Create New Theme'' Button. | + | |
| - | + | ||
| - | A new window will open where you can choose images, and adjust options for that theme item. Set all the options you desire, then click ''OK''. | + | |
| - | + | ||
| - | You can then see that the them object has now been added to your theme manager under the category you chose. | + | |
| - | + | ||
| - | Continue to do this until you have all your desired theme objects created. | + | |
| - | + | ||
| - | ==== 2 - Create Groups ==== | + | |
| - | A theme group is a group of theme objects that can be added to a project at once - see the Anodized Light theme in guiDesigner for an example. | + | |
| - | + | ||
| - | Create a subpage in your project, using the following name convention "Group_GROUP NAME". So if I wanted my group to be named ButtonSet1 my subpage name would be "Group_ButtonSet1". | + | |
| - | + | ||
| - | Add the theme items to the subpage as you would any normal page or subpage. Arrange them in the way you want the group to be placed by default. | + | |
| - | + | ||
| - | ==== 3 - Save Project ==== | + | |
| - | Save your project under a new folder named what you want your theme to be called. e.g. If you wanted your theme to be called Bobs Theme - then save it under a new folder called Bobs Theme. | + | |
| - | + | ||
| - | Move the folder to your guiDesigner installation directory under the ''Themes'' folder. | + | |
| - | + | ||
| - | ==== 4 - Test ==== | + | |
| - | Close guiDesigner, then launch it again. You should now see your theme in the theme library. | + | |
| + | You can also include an ''icon.png'' file in that directory, and it will be used as the icon image in front of the theme name within the Theme Library.\\ | ||
| + | This icon file should be 16x16 pixels. Transparency is supported. | ||
| + | ==== Test Your Theme ==== | ||
| + | After copying your project to the guiDesigner themes folder, you can test it by: | ||
| + | - Close guiDesigner | ||
| + | - Launch guiDesigner again. | ||
| + | - You should now see your theme in the theme library. | ||
software/gui-designer/theme-library/creating-a-theme.1380606090.txt.gz · Last modified: 2013/10/01 05:41 by jarrod
