I have a confession (and it seems as though this blog turns in to my confessional more often that I’d care to admit!)…I’ve never really understood what Search Filters do.

Kind of like String Theory. I know all the words used to describe String Theory, but when put together in to sentences and paragraphs, not even Morgan Freeman can make it make sense.

Yes, I looked up Search Filters (not String Theory) in the Flare help system:

A filter can be included in the search feature to let users narrow their search based on concepts that you have inserted into topics. Concepts are simply markers that you add to topics that have some kind of relationship with each other. They are also used for inserting concept links into topics (such as the See Also link that you see at the bottom of this topic).

And I understood the words there – but I didn’t understand the concept, the “how do I apply this to my project” part of it…

…until very recently.

Now I get it.

I’ll tell you what I know them to be – and then I’ll show you how to build your own Search Filter Set.

Let’s say I write proposals as part of my job and I use Flare to do this. In every proposal, I have a recurring series of topics that, while the topic titles are similar or even exact, the content is not.

And let’s say that I wrote a topic on Subcontractor Management a few proposals back. I even know which proposal I wrote it for. And what I wrote was good. I’m not talking every day good – but rather proposal-winning good. I need to find that content.

So, I have the topic subject, Subcontractor Management, and the proposal name: FDA. But I need to find that particular topic among the many other topics and paragraphs that contain those words.

I could do a search in the online output of all of my proposals with these criteria: “FDA Subcontractor Management.” We won’t get in to how I should surround “Subcontractor Management” with quotes so only topics with those two words in that order are found…but the problem is, if the acronym is not included anywhere in the topic, I won’t find it. It simply won’t appear in my search results. Instead I will get a bazillion results that I’ll have to sift through until I realize that the topic I need isn’t listed in the results.



Now, the other option I can think of is to use the nav bar (TOC) on the left side of the online help and look for the FDA proposal, which I find quite easily…but how do I find the topic of Subcontractor Management quickly? I can’t unless I know exactly where to look.

To solve this problem, I’m going to create a Search Filter Set. In short, it will allow me to

  • Limit my search to a particular proposal
  • Use the Search feature of my online help
  • Use all the features that come with the search, like quotes around phrases

Capture123Much better! From 28 results to 2! I can live with that!

“That’s great,” you say, “but how I do make that little pull-down doohickey appear in my search bar?”

I’ll show you, but first I’ll give a quick list of steps:

  1. Create concept terms
  2. Apply concepts to topics
  3. Create Search Filter based on Concepts
  4. Add Search Filter to Target
  5. Go.

Create Concept Terms

First I have to create at least one concept term. In this instance, I’m going to create a series of concept terms based on the proposal name. So I’ll have FDA, DON, DOS, etc.

To create the first concept, I’m going to open a topic that was part of the FDA proposal.

Then, I open the Concept Window via the View tab in the ribbon.


The result is this handy-dandy window appearing on the right side of my Flare UI:


Now I already have a bunch of concepts created and they appear listed in the bottom half of the window. Your window may be empty if you have no concepts.

Just to be sure, I click in the open topic, preferably in the h1. Then I type ‘FDA’ in the Concept Term window. You’ll see a big green box appear in your h1, or wherever you clicked in your topic.


Applying the Concept to Topics

Don’t go panicking and saying, “Laura, I have a gazillion topics that need that concept applied! I will not open each one and do this!”

Trust me – I wouldn’t do it either. So here’s a great place to use the old tried-n-true Search and Replace feature.

I open my Find and Replace in Files window from the Home tab of the ribbon.


Then I flip over to the Text Editor of the topic I just added the concept to (yes I ended a sentence with a preposition…it sounds better!).


You’ll see that the concept term tag is sitting right inside the opening <h1> tag.

Instead of adding the concept to the <h1>, I’m going to add it to the <body>.


You’ll see that I am looking for the opening <body> tag and then replacing it with that same <body> tag plus the code for the concept.

Now to narrow the search:

Since all of the FDA topics in my project are in the FDA folder, I’m going to select (documents in the same folder) for Find in. And I change ‘All’ to ‘Topics’ in the File types.

Capture132Here’s the trick!

I make sure Find in Source Code is checked in Find Options.

Then I do the Find Next/Replace thing until that concept has been added to all the appropriate topics.

Create Search Filter based on Concepts

Now that I’ve applied the concept to the topics, now I have to create the Search Filter. And if you don’t know where those are – join the club. I had to look it up too. The answer: Project Organizer > Project > Advanced > Search Filters.


I open the default set and see this. Not that it’s a little blank and scary….but it’s a little blank and scary.


The first thing I did was click on the New icon – but when it created another row that looked exactly like the first one, I decided to just edit the existing item.

I changed ‘My Subset’ to ‘FDA’ and now I have to associate a concept. When I click on Concepts, the Select Concepts for Search Filter window opens.


You’ll see that I have a bunch of concepts already in this project – but for this exercise, I’m just going to move FDA over via the arrow.


Add Search Filter to Target

OK, we’re almost home! Stay with me!

Finally, I need to tell Flare to use this Search Filter with the right target. I open my HTML5 target, go to the Advanced tab, and look for the Filter File field. I select the search filter I’ve been working on.


Whew!  I’m done. All that’s left is the build. When the build is done, this is how my search works:



I could have titled the post “Using Attribute Selectors” but a) that’s boring and b) if you don’t know what an attribute selector is, you won’t know how awesome this trick is.

Essentially, I want certain links in my help system to show what file format they are via a cute little icon that appears without me having to remember to do this every single time.

And how is this done? All together now….

CSS! Woot!

It’s done through attribute selectors and it’s wonderful: saves time and adds consistency.

Here’s what I want to achieve:


What I don’t want to do is take the time to insert a little tiny icon every time I add a hyperlink to my help. First, there’s no chance I’ll remember to do it…and secondly, what a time sink! No way!

Instead, via CSS, I want an icon automatically added to hyperlinks based on what file type it is.

Here we go:

[note color=”#EABA66″]I am using CSS3 code here – meaning if you’re building for users with IE7 or lower, the icons will not appear. The good news: The links will still work. So there is a graceful degradation.[/note]

I’m going to use icons for Word docs, zipped files, PDF files, and JPGs. I create a list of links to files and I have this:


It’s kinda boring – but entirely functional. But I want to add some pizzazz, some icons. I’m using the four circled below. I can use this technique for any file type – but I’m just using these four in this example.


One thing to note, the work we’re doing here technically falls in to the category of “complex selectors” so creating the properties for them should be done in Flare’s text editor not the StyleSheet Editor. To do that, instead of double clicking on your stylesheet to open it, right-click on the file and select Open in Internal Text Editor. You’ll see something like this:


Since I’m working in the default medium (for online work), I can add my code near the top of my stylesheet. By the way, there’s a ton of info about organizing your stylesheet, etc – but I’m not going to get in to that now. I’m just going to work near the top of  the file.

Since I want the icon to appear ONLY for hyperlinks, I’m going to be working with the <a> tag.

Here’s the code behind the topic:

        <h1>File Type Attributes</h1>
        <p>List of Files</p>
            <li><a href="File Types/form-crib-sheet.zip">form-crib-sheet</a>
            <li><a href="File Types/moose_family.JPG">moose_family_photo</a>
            <li><a href="File Types/Creating a Title Page for PDF Using MadCap Flare.docx">Creating a Title Page</a>
            <li><a href="File Types/Flyer.pdf">Flyer</a>

The genius here is that I’m not going to apply a style to the <a> tags which is what I’d do for most classes. I’d have to select a style class. Here, I’m just going to add the code to the stylesheet and be done. This is very much in the spirit of “set it and forget it.”

In my stylesheet, I’m going to add this:

    background: url('../Images/file-pdf_small.png');
    background-repeat: no-repeat;
    padding-left: 40px;
    background-position: left center;
    background-size: contain;

To translate, it means that any link (a) with a URL (href) that ENDS with ($) .pdf will have an image positioned to the left of and centered vertically to the link itself. It will appear only once (no-repeat), will have 40 px of space between the bullet and the link (the image will be in that space), AND will be resized to fit in the height of the tag (background-size:contain).

I add the other three bits of CSS:

    background: url('../Images/file-jpg-small.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 40px;
    background-size: contain;

    padding-left: 40px;
    background: url('../Images/file-zip-small.png') no-repeat left;
    background-size: contain;

    background: url('../Images/file_doc_small.png') no-repeat left;
    padding-left: 40px;
    background-size: contain;

While this seems like a lot of work, you only have to do it once. After that, you’re done.

There are a couple of things I want to bring to your attention:

1. Notice how the .JPG is capitalized. That’s intentional and necessary. When I left it lowercase (when the file suffix was caps), the image did not appear.

2. Notice how my Word doc shows ‘.docx’. When I originally typed ‘.doc’ – the image didn’t appear. Changed it to ‘.docx’ and POOF!, it worked.

The results of the CSS on this topic:


Now, I have this awesome feature in my help project that shows an icon every time I have a link to a certain file type. The image is always in the same place, the same size, no surprises.

[note color=”#EABA66″]This a-mazing awesomeness does not work in PDF output, unfortunately.[/note]

Try it and let me know what you think. And feel free to send questions via the comments or email (although comments are more share-y).

Page 1 of 111234510...Last →

Recent Posts