Posted on

MadCap Flare: How to Update Stylesheets

madcap-flare-stylesheets

In the Madcap world of Flare (yes, I promise never to say that again), you can use stylesheets to give your tech docs a real edge.

For me, styles are one of the hidden secrets in Flare.

So, if you plan to publish your tech docs to PDF, Web, or HTML5, a crash course in CSS styles is maybe what you need.

Interested?

madcap-flare-style-1

How to Update Style Sheets

The nice thing about Madcap Flare is that you can control the design and layout with style sheets.

The ‘not so nice’ thing is that the UI takes a bit of getting used to. Once you understand how it works, it’ll be fine.

So, how do you start playing around with style sheets and jazzing up your online help?

You can change the colour, fonts, and layout of your online help (and printed documents), use the Stylesheet Editor.

To find this puppy:

  1. Go to Content Explorer, Resources, Stylesheets.
  2. Right-click or double-click on the style sheet to open the Stylesheet Editor.
  3. The Stylesheet Editor has two views:

Simplified

Advanced

  1. NB: If the list of styles is overwhelming, click Hide. This tidies things up and makes it easier to use.

madcap-flare-style-5

Filtering the list of Styles

  1. By default, Show all Styles is displayed.
  2. If you click on the drop-down menu, you can select the Table, Images, or Headings This helps if you just want to work on a specific style family.

madcap-flare-style-4

Filtering the Medium

  1. Medium means the output type, such as HTML5, PDF or Print.
  2. Click on the Medium drop-down menu, and select the output type you want to modify.
  3. Pay attention to this as you don’t want to change the wrong CSS settings.

madcap-flare-style-3

Filtering Properties

  1. Click this drop-down menu to view the properties alphabetically, by property groups, or other settings.
  2. Advanced v Simplified View
  3. Click View Advanced to switch back to the View Simplified.

madcap-flare-style-2

That’s it for this week.

Let me know if you run into any problems with your stylesheets. Sometimes one small setting can throw everything out of kilter.

Are we friends on Facebook? If not, jump over here.

Posted on

Madcap Flare: Snippets 101

madcap-flare-snippets-how-to-use

Snippets? Sounds familiar but what are they?

In the Madcap world of Flare, snippets are content ‘fragments’ you can re-use in different parts of your Madcap Flare projects.

Use snippets to insert:

  • Text
  • Tables
  • Images
  • Video

Why Use Snippets

If you find yourself typing the same text over and over, create a snippet instead.

madcap-flare-snippet-6

Create the content once instead of re-typing and reformatting it for each topic.

If you want to modify a snippet, change its contents and the text is automatically updated everywhere that the snippet is added.

Snippets are contained in .flsnp files (flare snippets).

You can share them with other authors or use them in other projects.

madcap-flare-snippet-3

Default Save location

Snippet are saved in the Content Explorer in the Resources\Snippets folder by default.

However, you can store it anywhere in the Content Explorer that you like.

Creating New Snippets

There are two ways to create a snippet.

  • Create Snippets From Existing Content — If you have already created content and want to use it as a snippet, use the Home ribbon or Format menu. Insert the snippet into other topics where you want it to appear.
  • Add Snippets — Add a new snippet and insert it into the topics.

madcap-flare-snippet-4

To create new snippets from existing content:

  1. Open the topic.
  2. In the XML Editor highlight the content that you want to turn into a snippet.
  3. In the Home ribbon, select Create Snippet.
    madcap-flare-snippet-7
  4. In the Snippet File field, type a new name for the snippet. After the snippet is created, you can see it in the Content Explorer.
  5. If you want the snippet to replace the highlighted text in the topic, select the Replace Source Content with the New Snippet check box.
  6. Click Create. The snippet is surrounded by brackets (if markers are turned on).
  7. Save.

Inserting Snippets

After you’ve created a snippet, you can insert it into a topic.

You can do this by using the ribbon or drag an existing snippet from the Content Explorer or File List window pane.

How to insert a snippet

  1. Open your file.
  2. Place your cursor where you want to insert the snippet.
  3. In the Insert ribbon, select Snippet. The Insert Snippet Link dialog box opens.
  4. Navigate to the snippet that you want to insert and select it.
  5. Click OK. The snippet is inserted and is surrounded by brackets (if markers are turned on).
  6. Save your work.

madcap-flare-snippet-1

Editing Snippets

When you edit a snippet, the changes are automatically updated in every topic where you inserted the snippet.

How to edit a snippet

  1. To open the snippet:
  • Right-click on the snippet in a topic where it is inserted and select Open Link OR
  • Locate the snippet in the Resources\Snippets folder in the Content Explorer and double-click it.madcap-flare-snippet-5
  1. In the XML Editor update the snippet.
  2. Click Save.

Did that help?

Did it give you any new ideas on how to create your web help or tech docs? Fess up, stranger.

Oh yeah, we’re over here on Facebook.

Posted on

Madcap Flare: Logo Size and Settings for WebHelp

madcap-flare-logo-webhelp

Want to replace the default MadCap Flare logo for your online help?

Before you do, a few things to consider:

  • For IE 6 or older uses — save the logo as GIF with a transparent background. If you use PNG, the transparent portion of your image appears as black.
  • For IE 7 or newer — save the logo as PNG with a transparent background.
  • HTML 5 skin — create the logo 60 pixels high. The width depends how far you want it to stretch across the header.

One suggestion is to create the logo 55 pixels and leave a 5 pixel border to set it off from the other UI elements.

  • HTML 5 DARK skin — use white (or another light color) for the text to contrast with the dark background.
  • HTML 5 LIGHT skin — use… go on, have guess what color? J

Save the image somewhere you’ll remember, for example to your Content/Images folder.

Posted on

Madcap Flare: how to improve Search Engine Optimization

madcap-flare-search-engine-settings

Using Madcap Flare to create your WebHelp? Did you know you can add SEO information to the page headers? This improves their results in search engines queries and helps customers find information faster.

Want to know how? Follow these steps, grasshopper.

Madcap Flare: how to improve Search Engine Optimization

  1. In Project Organizer, click Targets, then open your target, for example, HTML5.
  2. In the Tag Editor, click Advanced.
  3. Click the Generate Site map check box. Enter the path to your site map.
  4. Click the Include importance check box. Select the number of results per page to appear and the abstract character limit.

Publish and check that the site map is included in the HTML output.

Madcap Flare: how to add meta tags to HTML5 and Web Help

madcap-flare-search-engine-1

You can add meta tags to your web files:

  1. In Project Organizer, click Targets, then open your target, for example, HTML5.
  2. In the Tag Editor, click Advanced.
  3. Click the Add meta tags to content check box.
  4. Enter the meta tags in the text box.

Publish and check that the meta tags are included in the output.

Madcap Flare: how to change the default logo

You can change the default MadCap logo that appears on the top left of HTML5 outputs.

You can remove the logo or replace it with your own logo:

  1. In Project Organizer, click Skins, then open your skin, for example, HTML5.
  2. Click Styles (second from end).
  3. In Global, click Main Page, Background, Image.
  4. Browse to your image and insert it.
  5. Click Preview to test how it looks.

If necessary, change the image size.

A second approach is as follows:

  1. In Project Organizer, click Skins, then open your skin, for example, HTML5.
  2. Click Styles.
  3. In Header, click Logo, Image.
  4. Browse to your image and insert it.
  5. Click Preview to test how it looks.

If necessary, change the image size.

Note: You can also add a Site Map as shown below.

madcap-flare-search-engine-2

Madcap Flare: how to enter the Title tag

The title tag is one of the most important

  1. In Content Explorer, right-click on your file, then click Properties.
  2. In Topic Properties, click Topic Title.
  3. Enter the title tag.

Publish and check that the title tags is included in the HTML output.

madcap-flare-topic-properties-1

 

Posted on

How to Remove the MadCap Logo in WebHelp Output

madcap-flare-remove-logo

When creating WebHelp with Madcap Flare, you can add your own logo instead of the default Madcap logo.

Here’s how to do it.

To remove the MadCap logo and replace it with your own logo:

  • Open the skin want to remove the logo from.
  • Click the Styles
  • On the Tool Item category, click Logo.

madcap-flare-logo

  • Click the General category in Logo.
  • To remove the logo, click on the image path and select None.
  • To add your logo, click on the image path and select your image.

If you’ve any questions about this. contact us on our Facebook Technical Writing page.

Posted on

Madcap Flare: How to add The Mark of The Web

madcap-flare-mark-of-the-web

Using Madcap Flare for WebHelp?

If you have problems getting Internet Explorer to run web help pages, added ‘Mark of the Web’ to your WebHelp files.

Madcap Flare: How to add Mark of the Web

You can add the Mark of the Web to HTML files so they run locally in Internet Explorer.

  1. In Project Organizer, click Targets, then open your target, for example, HTML5.
  2. In the Tag Editor, click Advanced.
  3. Select the Insert Mark of the Web check box.

PS – Join our Technical Writer’s page on Facebook.