Workflow Soluiton

 View Only

Creating Workflow Themes 

Dec 29, 2008 10:04 AM

Here is a little insight to creating your own themes for Workflow Designer using the Theme Editor.

Open the Composer Theme Editor (Start --> All Programs --> Altiris --> Workflow Designer --> Tools --> Composer Theme Editor) and start a new Theme by either going to File --> New, using the keyboard shortcut ctrl+n, or using the 'New Icon' under the menu bar. When you start a new theme you should see the following screen.

This first tab is the border tab and is where you will define the images and border sizes that you will need to create your theme.

Once you've started your theme, you will need to create a list of images to fill in the different areas of for the theme. I created the following in PhotoShop CS

Once I had what the basic theme would look like, I started creating the smaller images that were needed to create the theme. You will need 8 different images to create the theme. Top Left, Top Right, Bottom Left, Bottom Right, Top, Right, Left, Bottom.

Here are the images that I created:

Top Left (Image size: 542 width, 100 height) *Image size is important for one of the steps.

Top (Image size: 10 width 100 height)

This image will repeat to fill in between the top left and the top right depending on the size of your web form. This is the same with the bottom. The Right and Left images listed below will fill in the space between the top and the bottom.

Top Right (Image size: 50 width 100 height)

Left (Image size: 542 width 10 height)

Right (50 width 10 height)

Bottom Left (542 width 75 height)

Bottom (10 w 75 h)

Bottom Right (50 w 75 h)

I also have a white spacer image, a 10x10 square, which is good to repeat in the background where the left, right, top and bottom images don't fill in.

Once you have all the images saved as either .jpg or .png files, then it's time to import them into the theme editor. On the Border tab, drop down the box next to the 'Left' label and choose '<Add Image...>', browse to where the images are and choose your image for 'Left'. Do this for all the other images and their areas respectively. Once all the images are put into place adjust the border widths. The 'Left border width' is the width that you have your 'left' images at. All of mine are set at 542 pixels so my 'Left border width' is 542. My 'Top border height is set at 100, because that is what the height for all my 'top' margins is set to. Similar the 'Right border width' is set to 50 because all of the 'right' images are set at a 50 width. And lastly the 'Bottom border height' is set at 75. In setting these widths and heights, you see that when you cut your main image up, it is important to keep all the right and left images set at the same width, respectively and the top and bottom images set at the same height, respectively.

Another aspect of the 'Border' tab is the 'Border position' is the 'Inside' or 'Outside' option. This option pertains to how it will show on the workflow page setup. 'Inside' means that it will be set inside the web form layout in Workflow Designer and will allow you to adjust the size of the background to add the components you need inside your theme.

For example the Web Form Editor with no theme would look like this

A Web Form with a theme that has an inside 'Border Position'

And one with an outside 'Border Position'

Notice the gray below the ok button and the form that you are laying out your components.

With the outside border position the Web Form Editor will show up outside the left border width.

Versus the inside border position which you can adjust in the Workflow Designer

The second tab in the theme editor is the 'Background' theme.

This is where you can define some properties for the background. Using the inside theme that I created earlier I will show the changes that can be made on the background tab.

This is showing where the page color (yellow) and background color (green) can be seen in the theme. If you add a spacer image it will make up the difference where the other images don't cover (notice above the 'OK' button).

The background tab also allows you to have the background image 'Repeat horizontally' or 'Repeat vertically'.

The last tab in the theme editor is the 'Size' tab.

The size tab will allow you to specify a 'Fixed size', in pixels, that the theme will use when a new Web Form is started. In the following image, I've fixed my width to 1080 and my height to 765.

Notice where the 'Ok' button is in the form, before we forced a fixed width, it was in the gray bar at the bottom of the page.

Those three tabs are considered the 'Form Style' listed on the left in the theme composer. This left menu bar also contains 'Control Styles' and 'Images'. You will notice that you can expand the 'Images' option and see the 8 images that we added to the 'Form Style'. The 'Control Style' helps you to define the style for the different components that you will add to your web form. To create a 'Control Style' right click on the 'Control Style' option and hover over, 'Add Standard Control Style'. This will present a list of the different control styles that you can now define. For this example we will modify the 'Button Component'.

Once you have chosen the 'Button Component' you will have four tabs in the work area. The first is the 'Font' tab.

As you make changes the sample text and second line of sample text will change.

The other 3 tabs are 'Borders', 'Background', and 'Paragraph'. Make your changes on those tabs until you get the final look that you want and then save it. Once you have created the 'Control Style' for the 'Button Component' every button will take on that style and look the same.

Follow those steps to style any other components and then your web forms created in Workflow Designer will take on the look and feel that your customers will recognize.

Statistics
0 Favorited
1 Views
1 Files
0 Shares
1 Downloads
Attachment(s)
jpg file
6678.jpg   3 KB   1 version
Uploaded - Feb 25, 2020

Tags and Keywords

Comments

Feb 12, 2009 02:35 PM

Ironically one of the most difficult parts of Workflow to grasp.
Truly needed info!
Thanks!!!

Feb 02, 2009 01:58 PM

This is one of the most commonly requested things we hear about, this is a great article and will benefit a lot of people. Thanks for posting that!

Related Entries and Links

No Related Resource entered.