Adding and Editing a Skin Component

Now you need to add a skin component to the project and modify it.

How to Add a Toolbar Skin Component

1. In the Project Organizer, right-click the Skins folder and select Add Skin.

2. In the dialog, select HTML5 Component - Topic Toolbar, and in the File Name field enter Toolbar.

   

3. Click Add. The file is added to the Project Organizer and opens to the right.
4. In the Topic Toolbar Skin Editor, select the Setup tab.

5. The "PreviousTopic" and "NextTopic" buttons are already added on the right side of the editor, so you don't need to select them. But let's remove the other button. Double-click CurrentTopicIndex, moving it to the left side.

   

How to Add Custom Buttons

1. At the lower-left of the editor, click .

   

2. In the dialog, enter Email as the name of the new button, then click OK.

3. On the left side of the editor, double-click Email to move it to the right. Then at the bottom of the right side, click to move it to the bottom of the list of buttons. This means the button will display third in the toolbar.

   

4. Click again.
5. In the dialog, enter Help as the name of the new button, then click OK.

6. On the left side of the editor, double-click Help to move it to the right. Then at the bottom of the right side, click to move it to the bottom of the list of buttons. This means the button will display fourth in the toolbar.

   

How to Add JavaScript to the Custom Buttons

1. Copy the following.

   Copy

   function sendMail() {
   var email=('myname@company.com');
   var ccemail=('othername@company.com');
   var subject="Feedback from topic: " + document.title;
   var body="Feedback from topic: " + document.title + " (" + window.location.href + ")";
   var link = "mailto:" + email
           + "?cc=" + ccemail
           + "&subject=" + subject
           + "&body=" + body;
   window.location.href = link;
   }

2. On the right side of the Topic Toolbar Skin Editor, select Email.

3. On the lower-right, click Edit.

   

4. In the dialog, paste the code that you copied.

   

   Note Let's leave the code as it is, but in an actual project, you would replace the email addresses, as well as the subject and body text, with whatever you want.

5. Click OK. The code displays on the right side of the editor.
6. On the left side of the editor, select the Styles tab.

7. Expand the Toolbar > Button style group, and select Email.

   

8. In the properties section, expand Background.

   

9. To the right of the Image field, click .

10. In the dialog, click , then find and select the Email image you downloaded and saved to your computer. After you find it in the dialog, select Open, then OK. The image file is shown in the field.

    

11. Expand the Event property.

12. Copy the following extra piece of JavaScript and paste it into the Click field.

    Copy

    sendMail(); return false

    

13. From the Toolbar > Button style group, select Help.

14. Repeat the steps above to select the Help image you downloaded, and copy/paste the following JavaScript into the Event > Click field.

    Copy

    window.open('https://docs.madcapsoftware.com/doc-team/Source-Control.pdf'); return

    

    Note This particular piece of JavaScript opens a MadCap Software PDF. But in an actual project, you can replace the URL with your own.

15. Click to save your work.
16. Build and view the All-About-Austin-HTML5 target.
17. Open any topic other than the Home page.
18. Click the buttons in the toolbar at the top of any topic to test them.