Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MadCap Flare Tips and Tricks - Scott DeLoach, ClickStart

Tips for using MadCap Flare

  • Login to see the comments

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>