After inserting picture, how to add space above & below it?

[Jane Dudgeon]

Hi all,
I am a brand new user to this forum. I'm an old RH user and struggling to figure out how things are done in Flare. I'm trying to format an image that was inserted. In RH you just clicked on image and edited the space above and below, and you could make other formatting options. How do you format the image in Flare please?
I am really, really frustrated and freaking out about how to do things in Flare. Oh someone help me please?

Thanks

- Jane

[lacastle]

Do you want margin/padding space, or <p> <br> space?

Have you read Chapter 9, Quick Start for RoboHelp Users, of the Flare manual?
http://www.madcapsoftware.com/assets/fl ... Manual.pdf

[doc_guy]

Jane,

I only used RoboHelp x5 for about 3 months and that was about 5 years ago, so I can't give much advice on the switch. However, I hope I can provide some help in getting accustomed to Flare, which from all accounts, is significantly different from RoboHelp.

First, let me suggest you get a book from Scott deLoach, MadCap Flare for RoboHelp Users. (View in Google Books; View on Amazon.com) Many RoboHelp converts have said this was a good book that helped describe the philosophical differences between the two programs.

Second, for this specific problem, remember that in Flare all styling is done with CSS. Even locally-applied styling is done with CSS. If you want to get the most out of Flare, I recommend that you brush up on, or learn, CSS. There are several references there that might get you started, but I'm not at my desk today. If you're interested, PM me, and I'll send you a list of books I use once I get back to the office.

So, in this case, you are going to adjust the CSS attribute that affects margin or spacing around the IMG element. If you want this to happen for ALL images, or multiple images of a certain type, then you'll make this change in the overall style sheet for the project. Open the Style Sheet (It's in the Resources/Stylesheets folder in the Content Explorer in Flare), and find the IMG element, and select it. On the right side of the screen, locate the property for "margin before" or "margin after" and change the value. Start with 10 pixels and save the style sheet, then go back to your document and see if that looks like how you want, and adjust it from there. You'll do a lot of this "work-in-stylesheet, switch-back-to-topic" stuff to get the stylesheet doing exactly what you want. It took me about two months before I finally stopped fiddling with my stylesheet every day. And I still fiddle with it several times a week.

Does this give you some direction?

[doc_guy]

Oh, and BTW, the Flare for Robohelp book, as far as I know, hasn't been updated for Flare 3.1, and certainly hasn't been updated for Flare 4. So there are even more features now than when the book was last updated. Which means that in the section where Scott talks about features that RoboHelp has that Flare doesn't, there are several things that are no longer accurate. (For example, Flare now allows Framemaker imports, and Reports are about to get a major face lift when Flare 4 is released.)

[MikeKatz]

Hi Paul
That's a great tip, thanks! Up to now, I've used a style for image shots, but that doesn't help when I am using screens inline in bulleted or numbered lists. This make sit look much better, and with far less work.

[doc_guy]

Glad it's helpful!

[MarinaMichaels]

Doc Guy's answer is excellent. I whole-heartedly agree about learning CSS. I am thankful every time I edit the CSS in Flare for an excellent class I took last year in CSS.

One thing I might add is that, if you want different styles for different images, you can create a new class in your style sheet for each different style. (Rather than create a local style.) That way, you can apply it as needed, or change it as needed in the style sheet, without having to find each instance.

Some CSS resources:

Hakon Lie and Bert Bos' Cascading Style Sheets: Designing for the Web (whatever the latest edition is) is an excellent reference. It purports to be an instruction book as well, but I wouldn't recommend it for that. Still, as a reference book, it is quite useful. The authors are two of the fathers of CSS, so they know what they are talking about.

Charles Wyke-Smith's Stylin' With CSS: A Designer's Guide is an excellent book for learning CSS, whether you are teaching yourself or taking a class.

There are several excellent free tutorials, such as at W3C (http://www.w3schools.com/).

There are also some excellent paid ones, such as through my local JC (anyone can sign up for online classes, no matter where they are (http://www.santarosa.edu/; get Jeff Diamond if you can. He's an excellent instructor); or through http://lynda.com. If you are going to use a different school, check on any potential instructors at http://RateMyProfessor.com. In general, I've found that a pretty good guide, though one must use a lot of judgment when reading the reviews.

[doc_guy]

Some CSS resources:

Hakon Lie and Bert Bos' Cascading Style Sheets: Designing for the Web (whatever the latest edition is) is an excellent reference. It purports to be an instruction book as well, but I wouldn't recommend it for that. Still, as a reference book, it is quite useful. The authors are two of the fathers of CSS, so they know what they are talking about.

Ditto. That is one of my two favorite CSS references. (I also agree that isn't not a great instruction book, but is a great reference.)

Another one I love is the O'Reilly book, "CSS: The Definitive Guide" by Eric A. Meyer. These two books are always at my right hand when I'm working in Flare. I'll have to check out the other one you suggested.

-Paul