Customising the Drag and Drop Avatar in Open Client |
Open Client Administration |
 |
|
Customising the Drag and Drop Avatar in Open Client |
Open Client Administration |
|
To configure the visual appearance of the Drag avatar, follow these steps:
Add an index.html file to your application resource folders. Do this by copying the index.html file from the appResources folder ( …/appResources/index.html) to your application resources folder (e.g. …/appResources/myApplication/index.html), where myApplication is the name of your application that you want to deploy using Open Client.
Create your style sheet, for example "myStyleSheet.css". Save your style sheet to the application resources folder (…/appResources/myApplication). This style sheet is used by the Open Client after the PROIVDefaultStyle.css, therefore any properties in it will override the default ones.
Edit the index.html, ensure that there is an empty DIV tag with an ID of "proiv_panel" and add a Link tag to your style sheet in the HTML header.
For example:
<head>
<link rel="stylesheet" type="text/css" href="myStyleSheet.css" />
</head>
The entire file should then look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyleSheet.css" />
</head>
<body>
<div id="proiv_panel"></div>
</body>
</html>
Add the relevant properties to the style sheet to customise the appearance of the Drag avatar.
The following table contains the style sheet properties can be used to alter the appearance of the Drag avatar:
|
Item |
Description |
|
.proiv-DragAvatar |
Top level style applied to the avatar in both the Drop Allowed and Drop Not Allowed states. |
|
.proiv-DragAvatarDropAllowed |
Style applied to the avatar when the drop is allowed. The default properties in this style sets the opacity to 1 (i.e. non-transparent). |
|
.proiv-DragAvatarDropNotAllowed |
Style applied to the avatar when drop is not allowed. The default properties in this style sets the opacity to 0.5 (i.e. transparent). |
|
.proiv-DragAvatarState |
Top level style applied to the avatar state image in both the Drop Allowed and Drop Not Allowed states. The default properties in this style sets the avatar state image size and width to 24 pixels. |
|
.proiv-DragAvatarStateDropAllowed |
Style applied to the avatar state image when drop is allowed. |
|
.proiv-DragAvatarStateDropNotAllowed |
Style applied to the avatar state image when drop is not allowed. |
To configure the visual appearance of the Drag avatar by replacing the avatar state images, follow these steps:
Locate the application appImages folder.
Replaced the dragallowed.gif and dragprohibited.gif images with the images that you want to use.
Save the file and run the Open Client application.
Topic ID: 800115