This post is in response to Melinda’s question about “snippetizing” part of a list (that is now my favorite word!). Melinda, thanks for the scenario – I hope this helps…

Her original question was:

Laura, I have a set of steps in an ordered list that I want to snippetize because the same steps appear in multiple procedures. However, when I create the snippet as an ordered list, it automatically starts with step 1. Because it’s a snippet, not a list, there’s no command to merge with the previous list. Is there a way to force the snippet to always continue the previous numbering?

I’ve set up the scenario here:

snippetize2Steps 4 and 5 are used over and over throughout my help project and I want to create a snippet to speed things up. I create a snippet called last_steps that looks like this:

snippetize3

Notice how the numbering starts at 1…which is not what I want. How do I fix this so it shows the next starting number, regardless of the number of steps ahead of these two in the list?

Since I’m all about denial – maybe the numbering will fix itself when I actually add the snippet to the topic.

snippetize1

No luck.

Maybe it will work when I do a build…

snippetize4Nope.

Let’s look at the snippet code:

 <body>
        <ol>
            <li> Click OK.</li>
            <li>Click Yes to Confirm.</li>
        </ol>
    </body>

The reason the numbering is starting over is because these two steps are in their own <ol> tag. And unless otherwise told, the numbering will start over at the beginning of each <ol> tag.

I could remove the opening and closing <ol>s but that results in broken code and an even more incorrect page.

snippetize5Now that I’ve shown what doesn’t work – let’s talk about what does work.

What we need to do is tell that <ol> tag in the snippet to continue whatever numbering it encounters. So I’m going to open the snippet and click in the first step. Now I’m going to click on the menu of list actions:

snippetize7

And I see this list. Click on Continue Sequence.

snippetize6

Nothing really changes to give me the idea that something has happened – so I check out the snippet code.

<body>
        <ol MadCap:continue="true">
            <li> Click OK.</li>
            <li>Click Yes to Confirm.</li>
        </ol>
    </body>

Notice how the <ol> tag has changed to include the MadCap: continue=”true” statement.

I go back to the topic with the snippet in it and it still looks wonky.

snippetize9

But, because Denial’s not just a river in Egypt, I try the Preview..

snippetize10No. Way.

I do a build.

snippetize11It STILL WORKS!

Try it – and let me know if this works for you.

Share

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:

attributes1

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:

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.

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:

attributes2

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.

attributes3

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:

attributes5

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:

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

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:

a[href$='.pdf']
{
    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:

a[href$='.JPG']
{
    background: url('../Images/file-jpg-small.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 40px;
    background-size: contain;
}

a[href$='.zip']
{
    padding-left: 40px;
    background: url('../Images/file-zip-small.png') no-repeat left;
    background-size: contain;
}

a[href$='.docx']
{
    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:

attributes1

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.

This a-mazing awesomeness does not work in PDF output, unfortunately.

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).

Share
%d bloggers like this: