Add Images to Paragraph Styles?

[jsandora]

Is it possible to add an image to a paragraph style?

I have a few styles set up in my Flare project (for WebHelp output): tip, warning, note. Just adds some formatting to the paragraph so they stand out more.

I'd like to add an icon to these styles that is automatically inserted whenever I apply one of those styles to a paragraph.

Looked through all the settings on the Stylesheet for those styles, and only place that I saw something about images was under the "Unclassified" heading for the selected style (mc-image). After adding an image in that area, though it did NOT show up in my output.

I feel like there's a way to accomplish this without having to manually add an image before each paragraph with those styles. Just need some help finding the right area to do this.

Ideas/suggestions?

Thanks ...

[LTinker68]

Specify the image as a background-image for the paragraph and set it to not repeat. Then adjust the padding-left attribute and/or margin-left to get the image to the left of the paragraph.

Alternatively, you could create a snippet with placeholder text in a paragraph and float the image left. When you need that type of paragraph, you insert the snippet then break it from the snippet so you can modify the placeholder text.

[jsandora]

Thanks Lisa. I may be able to use the background image technique, but not exactly what I was hoping for.

I'm really shooting to replicate the way this page uses icons before callouts:

http://help.objectiflune.com/EN/planetp ... tware.html

Notice how the icons float next to the callout and its formatting. That's the look I'd like to achieve.

That page uses a DIV class. Is that how I should set up formatting for my callouts? Would it be any different than a subclass of <p> like I have it now?

[LTinker68]

Either div or paragraph will work. They're both block elements. The main difference is that a div can contain multiple paragraphs, blockquotes, lists, etc., whereas a paragraph is a single block (although you can have an image tag in it, for example). If you think you might want to do multiple paragraphs in a note/tip/warning block or have lists in them, then the div would be a better option.

Keep in mind, however, that Word output doesn't like DIVs (PDF output can also have problems, depending on how you have the div set up). If you need to output to Word and need a block that contains multiple paragraphs or lists, etc., then you might want to think about using a table instead. You put the image in the first column and the second column contains the note/tip/warning content. The table tag is supported fairly evenly in all the outputs, so that might actually be the better way to go. You can put the table setup in a snippet, insert the snippet into a topic, then break the snippet's inheritance so you can edit the placeholder text.

[crdmerge]

You could create a list style with the image as the list item marker.

Check out the Try it Yourself in "An Image as The List Item Marker" in the w3schools tutorial at http://www.w3schools.com/css/css_list.asp.

You would simply add a UL with only one LI, which has the image specified.

You could also use the (non-list) ::before pseudo-element; however, that element is not recognized by IE lower than IE 8 (unless users are enabling Compatibility View, which effectively turns it into IE 7 and it won't work). The Mozilla browsers work fine with it.


Good luck,
Leon

[LTinker68]

You could create a list style with the image as the list item marker.

And, again, Word doesn't like images for the bullet icons. Or rather, they don't appear in the Word output, but it's a simple step to open the output in Word and re-specify the image for the list style.

[jsandora]

Does Flare allow subclasses for the Table style?

My three callouts have different formatting, and will use different icons. Is it possible to set up table.warning, table.tip, table.note styles that all look different?

[LTinker68]

You can make classes, but it's not the best method you'd want to use to automatically insert the image, if that's what you're thinking of doing by having the image. If you're talking about things like different colored borders and text backgrounds for the different styles, then yes, you could use classes. Actually, you'd probably want to use class names with complex selectors. If you can provide more detail about what you want to do style-wise, then we can provide some more details.