Customize_Player_Mode

You can customize the play mode buttons to fit your corporate look. For example, if you want to change the color of the mode buttons upon mouse over, find the .button:hover element and change the color value.

The R_mode_* elements are located in the resource.xml file in the \lang folder for each language. Copy the elements you want to customize from the resource.xml in the Player style into the corresponding resource.xml in the skin. The images can be copied from the Customizable images folder in the Player style.

The tochover.jpg graphic shows customizations that can be made to the Player Mode buttons on the top of the Concept Pane. Player modes include SeeIt! TestIt!, KnowIt?, DoIt!, and PrintIt!. You can customize the icon, text, and button color of each mode button.

1 Mode button color (.button, .lastbutton, .button:hover): Use .button and .last button to customize the color of the buttons when the mouse is not hovering over the button. Use .button:hover to customize the color of the buttons when the mouse is hovering over the button.
2 Mode button background (tdbackground.png): Use this to change the background color of the mode buttons.
3 Mode button divider line (.dividerColor): Use this to customize the color of the divider lines between the buttons. Default value is background color #3E5782.
4 See It! mode button (seeit.png): Use this to customize the See It! mode button.
5 See It! mode text (R_mode_seeit): Use this to customize the text on the See It! mode button.
6 Try It! mode button (tryit.png): Use this to customize the Try It! mode button.
7 Try It! mode text (R_mode_tryit): Use this to customize the text on the Try It! mode button.
8 Know It? mode button (knowit.png): Use this to customize the Know It! mode button.
9 Know It? mode text (R_mode_knowit): Use this to customize the text on the Know It? mode button.
10 Do It! mode button (doit.png): Use this to customize the Do It! mode button.
11 Do It! mode text (R_mode_doit): Use this to customize the text on the Do It! mode button.
12 Test It! mode button (testit.png): Use this to customize the Test It! mode button.
13 Test It! mode text (R_mode_testit): Use this to customize the text on the Try It! mode button.
14 Print It! mode button (printitdoc.png, printithtml.png, printitpdf.png): Use this to customize the Print It! mode button.
15 Print It! mode text (R_mode_printit): Use this to customize the text on the Try It! mode button.
16 Jump in point arrow (jumpinarrow.png: Use this to customize the jumpin arrow icon on each of the modes.

Table of Contents Back

Customize_Player_Mode_Buttons