Laura Charles Johnson, a 20-year veteran of the government contracting scene as a technical writer and online help developer, is a certified Advanced Flare Developer and Trainer, and was a featured speaker at MadWorld 2013. She also writes a blog about Flare at www.flareforhelp.com, where we found this great post about adding icons to show file types in links. We’ve re-published it here (with Laura’s permission) for you to check out:

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

For the thrilling conclusion of this post, head on over to Laura’s blog.

About The Author

Jennifer White

About Jennifer White

Jennifer White, a Product Evangelist at MadCap Software, has over 15 years of experience in writing, broadcasting, public speaking, marketing and social media management. Jennifer has also served as a social media manager, blogger, on-air host, writer and content provider for CBS Radio and Fox TV.

Last Modified: October 28, 2013

This entry was posted in MadCap Flare, Tips & Tricks. Bookmark the permalink.

Have Something to Say?

Your email address will not be published. Required fields are marked *