MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart


Published on

Tips for using MadCap Flare

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart

  1. 1. Flare Hot Tips and Cool Tricks Scott DeLoach [email_address] Founder, Click Start Certified Flare Instructor Author, MadCap Flare Advanced CSS Training Guide Co-author, MadCap Flare Training Guide
  2. 2. Tips and tricks <ul><li>Importing Word and FrameMaker documents </li></ul><ul><li>Styles </li></ul><ul><li>Variables and snippets </li></ul><ul><li>Printed documentation </li></ul><ul><li>WebHelp </li></ul><ul><li>Hacks… </li></ul>
  3. 3. Importing Word and Frame documents <ul><li>To set the topic order in the TOC: </li></ul><ul><li>Organize (using Move Up / Move Down ) the imported documents on the Source Files tab. </li></ul><ul><li>To map styles: </li></ul><ul><li>1 Select the document(s) to import . </li></ul><ul><li>2 On the Stylesheet tab: </li></ul><ul><ul><li>Don’t select a stylesheet. </li></ul></ul><ul><ul><li>Select Preserve MS Word Styles . </li></ul></ul><ul><ul><li>Don’t select Convert Inline Formatting to CSS Styles . </li></ul></ul><ul><li>3 Map your paragraph and character styles as needed. </li></ul><ul><li>4 After you import, assign your new topics to your stylesheet. </li></ul>
  4. 4. Styles <ul><li>Creating a span class </li></ul><ul><li>Creating a non-scrolling region </li></ul>
  5. 5. Creating a span class <ul><li>To create a span class: </li></ul><ul><li>1 Select the span tag in the stylesheet editor. </li></ul><ul><li>2 Click Add Class . </li></ul><ul><li>3 Type a name and click OK . </li></ul><ul><li>4 Format the style as needed. </li></ul><ul><li>To apply a span class: </li></ul><ul><li>1 Select content in a topic. </li></ul><ul><li>2 Select the span class from the style drop-down list. </li></ul>
  6. 6. Creating a non-scrolling region <ul><li>1 Open your stylesheet in the Internal Text Editor. </li></ul><ul><li>2 Add the following properties to the body style. padding: 5em 0 0 0; background:url(nothing) fixed; </li></ul><ul><li>3 Add the following properties to the h1 style: position:fixed; _position:absolute; top:0; _top:expression(eval(document.body.scrollTop)); margin-top:0; padding-top:0; left: 0; padding-left: 10px; width: 100%; _width:expression(eval(document.body.clientWidth)); background:gray; </li></ul>.
  7. 7. Variables and snippets <ul><li>Using a variable for a TOC book or page label </li></ul><ul><li>Using a variable as a link’s target </li></ul><ul><li>Overriding variables in a target </li></ul><ul><li>Replacing text with variables </li></ul>
  8. 8. Using a variable in a TOC label or link target <ul><li>In a TOC: </li></ul><ul><li>For the book or page label, type: mcvariable: variablesetname . variablename </li></ul><ul><li>In a link: </li></ul><ul><li>1 Open the Insert hyperlink dialog box. </li></ul><ul><li>2 Select topic in project, external topic, website, or email. </li></ul><ul><li>3 For the link location, type: mcvariable: variablesetname . variablename </li></ul>
  9. 9. Overriding variables in a target <ul><li>1 Open a target. </li></ul><ul><li>2 Select the Variables tab. </li></ul><ul><li>3 Click the variable’s definition. </li></ul><ul><li>4 Type a new definition. </li></ul>
  10. 10. Replacing text with variables <ul><li>1 Press Ctrl-F . The Find and Replace window appears. </li></ul><ul><li>2 For Find what , type the text you want to replace. </li></ul><ul><li>3 For Replace with , type the following: <MadCap:variable name=&quot; variablesetname . variablename &quot; /> </li></ul><ul><li>4 For Find in , select (whole project) . </li></ul><ul><li>5 For File types , select Topics . </li></ul><ul><li>6 Select Find in source code . </li></ul><ul><li>7 Click Start . </li></ul><ul><li>8 Click Replace All . </li></ul>.
  11. 11. Printed documentation <ul><li>Creating cross references </li></ul><ul><li>Setting margins </li></ul><ul><li>Setting a page numbering format </li></ul><ul><li>Including a TOC, index, or glossary in print documents </li></ul><ul><li>Removing heading levels from the TOC </li></ul>
  12. 12. Creating cross references <ul><li>1 Open a topic. </li></ul><ul><li>2 Position your cursor where you want to add the link. </li></ul><ul><li>3 Select Insert > Cross-Reference . </li></ul><ul><li>4 For Link To , select Topic in Project . </li></ul><ul><li>5 Click Topic and select a topic. </li></ul><ul><li>6 Select an xref class. </li></ul><ul><li>7 Click OK . </li></ul>
  13. 13. Setting margins and a page number format <ul><li>1 Open or create a master page for printed documentation. </li></ul><ul><li>2 Right-click the topic body proxy. </li></ul><ul><li>3 Select Edit Body Proxy . </li></ul><ul><li>4 Click Printer Page Properties . </li></ul>
  14. 14. Including a TOC, index, or glossary in print <ul><li>1 Add a new topic. </li></ul><ul><li>2 Delete the content in the topic. </li></ul><ul><li>3 Select Insert > Proxy > Insert TOC Proxy . </li></ul><ul><li>4 Open your TOC. </li></ul><ul><li>5 Add a page that links to your proxy topic. </li></ul>
  15. 15. Removing heading levels from the TOC <ul><li>1 Open your stylesheet. </li></ul><ul><li>2 Select the print medium. </li></ul><ul><li>3 Select a heading level. </li></ul><ul><li>4 Open the PrintSupport group. </li></ul><ul><li>5 Set the mc-heading-level to 0. </li></ul>.
  16. 16. WebHelp <ul><li>Formatting help control links as buttons </li></ul><ul><li>Adding search acronyms </li></ul><ul><li>Adding an email button to the toolbar </li></ul>
  17. 17. Formatting help control links as buttons <ul><li>1 Open your stylesheet. </li></ul><ul><li>2 Select one of the following styles: </li></ul><ul><ul><li>conceptLink </li></ul></ul><ul><ul><li>keywordLink </li></ul></ul><ul><ul><li>relatedTopics </li></ul></ul><ul><li>3 Add a border. Use a thicker bottom and right border. </li></ul><ul><li>4 Consider changing the background color and font size and/or color. </li></ul>
  18. 18. Adding search acronyms <ul><li>1 Select Project > Advanced > Add Synonym File . </li></ul><ul><li>2 Type a name for the synonym file and click Add . </li></ul><ul><li>3 Add a directional or group synonym: </li></ul><ul><ul><li>To add a directional synonym, type the Word and Synonym. </li></ul></ul><ul><ul><li>To add a group synonym, type the group items separated by =. </li></ul></ul><ul><li>4 Select the Stem option to include plurals and gerund phrase versions of your terms. </li></ul>
  19. 19. Adding an email button to the toolbar <ul><li>1 Open a WebHelp skin and select the Styles tab. </li></ul><ul><li>2 Select the ToolbarItem style group. </li></ul><ul><li>3 Click Add Class and type a name for the style class, such as &quot;Email.&quot; </li></ul><ul><li>4 Open the Basic property group. </li></ul><ul><li>5 Select Icon , PressedIcon , and HoverIcon images. </li></ul><ul><li>6 Type a Tooltip , such as &quot;Send an email.&quot; </li></ul><ul><li>7 Open the Type property group. </li></ul><ul><li>8 Set the OnClick value to: document.location=’mailto: emailaddress ?subject= subjectofemail &body= bodyofemail ’; </li></ul><ul><li>9 Select the WebHelp Toolbar tab and add your button. </li></ul>.
  20. 20. Tricks and hacks <ul><li>Tricks </li></ul><ul><li>Drag-and-drop index keywords </li></ul><ul><li>Moving table rows and columns </li></ul><ul><li>Hacks </li></ul><ul><li>Opening/Closing all drop-down, expanding, toggler, and glossary links </li></ul><ul><li>Auto-expanding drop-down, expanding, toggler, and glossary links when printing </li></ul><ul><li>Changing related topics, keyword, or concept link text in a topic (not globally) </li></ul>
  21. 21. Opening/Closing DHTML links <ul><li>function showHideAll() { </li></ul><ul><li>var showHideLink = document.getElementById(&quot;showHide&quot;); </li></ul><ul><li>var allSpans = document.getElementsByTagName(&quot;span&quot;); </li></ul><ul><li>var allDivs = document.getElementsByTagName(&quot;div&quot;); </li></ul><ul><li>var allPs = document.getElementsByTagName(&quot;p&quot;); </li></ul><ul><li>if (showHideLink.innerText == &quot;Show All&quot;) { </li></ul><ul><li>showHideLink.innerText = &quot;Hide All&quot;; </li></ul><ul><li>for (i=0; i<allSpans.length; i++) { allSpans[i].style.display = &quot;inline&quot;; } </li></ul><ul><li>for (i=0; i<allDivs.length; i++) { allDivs[i].style.display = &quot;block&quot;; } </li></ul><ul><li>for (i=0; i<allPs.length; i++) { allPs[i].style.display = &quot;block&quot;; } </li></ul><ul><li>} </li></ul>
  22. 22. Opening/Closing DHTML links (cont) <ul><li>else { </li></ul><ul><li>showHideLink.innerText = &quot;Show All&quot;; </li></ul><ul><li>for(i=0; i<allSpans.length; i++) { if (allSpans[i].className == &quot;MCExpandingBody&quot;) allSpans[i].style.display = &quot;none&quot;; } </li></ul><ul><li>for(i=0; i<allDivs.length; i++) { if (allDivs[i].className == &quot;MCDropDownBody&quot;) allDivs[i].style.display = &quot;none&quot;; } </li></ul><ul><li>for(i=0; i<allPs.length; i++) { if (allPs[i].outerHTML.indexOf('MadCap:targetName=') != -1) allPs[i].style.display = &quot;none&quot;; } </li></ul><ul><li>} } </li></ul>
  23. 23. Auto-expanding links when printing - A <ul><li>@media print { </li></ul><ul><li>span.MCExpandingBody { display: inline !important; } </li></ul><ul><li>div.MCDropDownBody { display: block !important; } </li></ul><ul><li>p { display: block !important; } </li></ul><ul><li>} </li></ul>
  24. 24. Auto-expanding links when printing - B <ul><li><script> </li></ul><ul><li>document.write(&quot;<style> @media print {&quot;); </li></ul><ul><li>document.write(&quot;span.MCExpandingBody { display: inline !important; }&quot;); </li></ul><ul><li>document.write(&quot;div.MCDropDownBody { display: block !important; }&quot;); </li></ul><ul><li>document.write(&quot;p { display: block !important; }&quot;); </li></ul><ul><li>document.write(&quot;}&quot;); </li></ul><ul><li>document.write(&quot;</style>&quot;); </li></ul><ul><li></script> </li></ul>
  25. 25. Changing help control link text <ul><li>Add this code to a js file </li></ul><ul><li>function changeMCLinks() { </li></ul><ul><li>var links = document.links; </li></ul><ul><li>for (i=0; i<links.length; i++) { </li></ul><ul><li>if (links[i].className.indexOf(&quot;MCRelatedTopics&quot;) != -1) links[i].innerText = &quot;See Also&quot;; </li></ul><ul><li>if (links[i].className.indexOf(&quot;MCKeywordLink&quot;) != -1) links[i].innerText = &quot;See Also&quot;; </li></ul><ul><li>if (links[i].className.indexOf(&quot;MCConceptLink&quot;) != -1) links[i].innerText = &quot;See Also&quot;; </li></ul><ul><li>} } </li></ul><ul><li>Add this code to your topic before the </body> tag </li></ul><ul><li><script>changeMCLinks();</script> </li></ul>
  26. 26. Resources <ul><li>Forums </li></ul><ul><li>Knowledge base </li></ul><ul><li>Getting Started guide </li></ul><ul><li>WebHelp skins </li></ul><ul><li>WebHelp examples </li></ul>
  27. 27. Questions? Scott DeLoach Founder, Click Start Certified Flare Instructor [email_address] MadCap Flare Certified Test Review + Developer’s Guide available
  28. 28. About Click Start <ul><li>Click Start provides certified training and consulting for: </li></ul><ul><li>MadCap Flare </li></ul><ul><li>Adobe RoboHelp </li></ul><ul><li>Adobe Captivate </li></ul><ul><li>We offer public, online, and private (onsite) classes, and group discounts are available. See for more information. </li></ul><ul><li>If you need help: </li></ul><ul><li>Learning Flare, RoboHelp, or Captivate </li></ul><ul><li>Migrating to Flare from RoboHelp or another product </li></ul><ul><li>Designing stylesheets for online help </li></ul><ul><li>Creating use cases and wireframes/prototypes </li></ul><ul><li>Developing Web-based training </li></ul><ul><li>Adding embedding user assistance or context-sensitive help to an application </li></ul><ul><li>Give us a call: 404.520.0003 </li></ul>