Customize Elements in the Custom.css File

After completing this topic, you will be able to customize Player graphic elements in the custom.css file.

Steps:

1. 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 1

2. In 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 2

3. Press the [Shift] key and click before the background-color: ; in the file.

   Step 3

4. Enter the hexadecimal value for the color you want to use.

    

   Enter the desired information into the field. Enter

    a valid value
    e.g.
    "408080"
   .
   Step 4

5. Click after the border-color: # in the file.

   Click in the field.

   Step 5

6. Press the [Shift] key and click before the border-color: ; in the file.

   Step 6

7. Enter the desired information into the field. Enter

    a valid value
    e.g.
    "408080"
   .
   Step 7

8. 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 8

9. Press the [Shift] key and click before the background-color: ; in the file.

   Step 9

10. Enter the desired information into the field. Enter

     a valid value
     e.g.
     "cc6699"
    .
    Step 10

11. We have also changed the background color of the play mode buttons when the mouse hovers over a button.

    Step 11

12. Although 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 12

13. We 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 13

14. Save the Notepad WSG custom.css file using the File menu.

     

    Click the File menu.

    Step 14

15. Click the Save command.

    Step 15

16. We 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 16

17. Notice 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 17

18. Notice the font and font size of the Try It! text in the bubble header. This is the result of customizing the .CurvedBoxText elements.

    Step 18

After completing this topic, you are able to customize Player graphic elements in the custom.css file.

Table of Contents  Start Topic