After completing this topic, you will be able to customize Player graphic elements in the custom.css file.
Steps:
You have copied the graphic elements that you want to change to the custom.css file in the skin. You will customize the following elements:
- the color of the divider lines that appear between and around the Table of Contents and Concept panes.
- the color of the play mode buttons as they appear in the Player and when you point to them (hover over them).
- the font and font color of the play mode text in the bubble header.
Step 1In the Player TOC section, you will make changes to the .background element for the divider lines.
Click after the background-color: # in the file.
Step 2Press the [Shift] key and click before the background-color: ; in the file.
Step 3Enter the hexadecimal value for the color you want to use.
Enter the desired information into the field. Enter
Click after the border-color: # in the file.
Click in the field.
Step 5Press the [Shift] key and click before the border-color: ; in the file.
Step 6Enter the desired information into the field. Enter
In the Outline w Playmodes section, you will make changes to the background color and hover (mouse over) color of the play mode buttons.
Click after the background-color: # in the file.
Step 8Press the [Shift] key and click before the background-color: ; in the file.
Step 9Enter the desired information into the field. Enter
We have also changed the background color of the play mode buttons when the mouse hovers over a button.
Step 11Although you do not have to remove uncustomized values, leaving them in clutters the file and may be confusing if you edit it at a later time. To save time we have deleted the uncustomized values for the Outline w PlayModes section for you.
Step 12We have also customized the Bubble section and deleted the uncustomized values for you. Notice that we have used the name of the color (red) for the .CurvedBoxText value.
Note: For standard web colors, you can enter the name of the color instead of the hexadecimal value of the color. The Colors dialog box shows the standard Web Colors and the associated names and values.
Step 13Save the Notepad WSG custom.css file using the File menu.
Click the File menu.
Step 14Click the Save command.
Step 15We have published the outline with the customized WSG skin.
Notice the color changes to the divider bars.This is the result of customizing the .background elements.
Also view the change to the color of the play mode buttons. This is a result of customizing the .button, .lastbutton, #playmodetable element.
Step 16Notice the different color of the play mode button when you hover over it. This is the result of customizing the .not-touch .button:hover element.
Step 17Notice the font and font size of the Try It! text in the bubble header. This is the result of customizing the .CurvedBoxText elements.
Step 18After completing this topic, you are able to customize Player graphic elements in the custom.css file.