Specialized DIV (split from "Flare in Action!" thread)

[jcoria]

Salesforce uses Flare! http://www.salesforce.com/us/developer/ ... /index.htm

That is a very nice site. Nice color scheme, and I love the Note DIV.

Kudos to whomever did that site.

I like this also. It would be nice, if this area had a location for code bits to help other out to get desired effects. I have something simliar, but I would much prefer to use the div used in the salesforce site. I like how the text Tip, Note are inline with the border that surrounds the text and icon. Would love to be able to have that set up as in the CSS, so all I would have to do is change the class.

JCoria

[LTinker68]

I like this also. It would be nice, if this area had a location for code bits to help other out to get desired effects. I have something simliar, but I would much prefer to use the div used in the salesforce site. I like how the text Tip, Note are inline with the border that surrounds the text and icon. Would love to be able to have that set up as in the CSS, so all I would have to do is change the class.

Well, the stylesheet for that site is located at http://www.salesforce.com/us/developer/ ... s/help.css -- you could look through that for the style you want.

[NorthEast]

That note style uses a fieldset tag (not a div), which has a legend tag inside it with the 'Note' text. Mind, I'm not sure how easy all of that is to apply in your topic (and also Flare doesn't appear to show the legend tag in the style list).

You could set up something similar-ish (and easy to apply) by using a div and an auto-number class. For example, in my project I use a div for notes that uses an auto-number span class to automatically add a note icon and "Note" text.

Code: Select all

div.note
{
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	border-color: #dae0df;
	border-width: 1px;
	border-style: solid;
	background-color: #f0fadf;
	mc-auto-number-class: noteTitle;
	mc-auto-number-format: 'Note';
}

span.noteTitle
{
	color: #7e8b7a;
	font-weight: bold;
	vertical-align: top;
	line-height: 26px;
	background-image: url('../Images/note.gif');
	background-position: left top;
	background-repeat: no-repeat;
	padding-left: 20px;
}

To apply this, just group the note content using the div.note style.

Edit div.note to change the box style, and edit span.noteTitle to change the "Note" text, style or icon.
(The note icon in this example would be located in the project at Content\Resources\Images\note.gif).

[jcoria]

Thanks for the responses. Dave, you created a new class in your CSS to reflect the code snippet you placed in your post?

We do not use icons, but rather different colors to treat, Notes, Tips and Warnings. However, we do use the surrounding lines (ours are dashed) and padding. We have a new propriatary help generator that uses open source that is founded on the DITA model. All of our apps help are migratingto that. There is an existing look and feel handed down by the design and tech comm group. I have it almost copied, however, the inline Notes, Tips, and Warnings with the girding box I have been unable to complete. I have to place it inside rather than inline with the borders.

JCoria

[NorthEast]

Ah, if you're not actually using Flare to generate the help, then you couldn't use Flare auto-numbering to insert the "Note" text (or icon).

[jcoria]

Ah, if you're not actually using Flare to generate the help, then you couldn't use Flare auto-numbering to insert the "Note" text (or icon).

I apologize. I am using Flare right now. The migration of the other help system is slow moving. Maybe next year. What I am trying to do, is get the look and feel identicle as possible to the new system. How can I get the Note, Warning and Tip label inline with the border?

JCoria

This is mine now.

I want to get it like the salesforce example.

[NorthEast]

If you use a span class to control the "Note" text formatting (the way I mentioned earlier), then you could use relative positioning to move it up a bit so that it overlaps the div border.

I played around for a couple of minutes and got this - it'll need tweaking, but you get the general idea (look at it in preview/output, the editor doesn't handle positioned elements).

Code: Select all

div.note
{
	border-color: #ff0000;
	border-style: dashed;
	border-width: 2px;
	padding: 4px;
	mc-auto-number-class: noteTitle;
	mc-auto-number-format: 'Note';
}

span.noteTitle
{
	color: #ff0000;
	background-color: #ffffff;
	position: relative;
	top: -14px;
	margin-left: 6px;
	padding-left: 4px;
	padding-right: 4px;
}

[jcoria]

Thanks for the instruction. I am almost there. However, I am having difficulty in getting the end result. In the preview, the noteTitle span looks good but does not seem to work with the div. How do I get the two to work together. The Note text appears in the dotted box, but the span is not working for some reason? i have the mc-auto-number-class set to noteTitle, but it does not seem to be acquiring the format?

Thanks for the great help..

JCoria

[NorthEast]

The example I posted works fine for me.
I just entered a few lines of paragraph text, selected them, then grouped them with a div.note.

note.gif

Just to be clear, you don't include the text "Note" in your note text in the div, or apply the span.noteTitle style to anything. The "Note" text is automatically added by the auto-number format, set using mc-auto-number-format: 'Note';.

[jcoria]

I must be doing something wrong. Your example looks great. Here is my setting in the autnumber section of the div.



Thank you.

JCoria

[NorthEast]

Strange, the settings I posted work fine for me.
You've included the span.noteTitle style in your stylesheet?

(If you do get it working, I'd also add a top margin to the div.note style, as the "Note" text can overlap text that's above the div.)

[LTinker68]

Also, are you looking at it in the final output or just in the XML Editor? Sometimes the XML Editor doesn't display things exactly right, so always check how it looks in the Preview. Sometimes you even have to build the project and check it in the output.

[jcoria]

I finally got it....!!!

Thanks so much. I left out the background color for one.

Thanks for all your help.

JCoria

[KevinDAmery]

This has been a useful discussion. I've recently begun restructuring my topics, and wanted to put a topic TOC at the top--this Div treatment works perfectly to set the TOC off from the rest of the content.

[LTinker68]

FYI... I separated these last few posts into a new thread.

[SteveS]

Nice work, Dave. Stylesheets all over the world are being modified right now...

[jcoria]

How can I get the text inside to move to the left? I added a margin top in the div class as suggested, but it made no difference...?



Thanks for all the help on this.

[NorthEast]

Ah, I think you're applying the div direct to the note text, I've been adding a div using Format > Group.

That means I have a div tag that contains the p tag(s) (and whatever else) that make up the note content.

This still leaves a gap at the top of the div mind. Anyway, this is about as much time as I can spend on this, hope you work out a way to get it looking the way you want.

[KevinDAmery]

Much as I like this for online output, I haven't been able to get the same effect in print (since Flare doesn't seem to pass on the Div formatting to Word). Anyone had any luck on that score?

[LTinker68]

Haven't really tried. Do you get any clues if you go the other direction -- create a short Word doc with a text box positioned inline at the top of the page, then save the document as a web page and see what type of tag it uses? I wonder if Word will change it to an iframe instead of a DIV.

[LTinker68]

I did a quick test going in reverse (Word to HTML). Word outputted it with a custom DIV containing a custom <p> tag. However, Word indicated that some formatting would be lost when reopening the HTML file in Word. When I opened the Word-created HTML file in Word -- it didn't recognize the DIV that it had created. In fact, it turned the entire DIV block into an image, instead of editable text.

So it's definitely on Word's end that it doesn't recognize or know how to deal with DIVs. Although it would be nice if MadCap could figure out a workaround from within Flare. But in the short-term, you might have to stick with tables.

[KevinDAmery]

Tables are mucky, though: if you use a table style it insists on adding all that extraneous inline formatting.

[LTinker68]

True, but you can take the inline formatting out manually and Word knows what to do with tables.

Of course, a custom paragraph tag may work just as well. Won't have the nice option of it being a container tag like a DIV or table are, but if it's just for a line or simple paragraph, then it should be fine.

[shubhransu]

This works great for online format. But I do not get the desired output in PDF generated from Flare.

[NorthEast]

This works great for online format. But I do not get the desired output in PDF generated from Flare.

I use the first code sample that I posted, and it works fine for my own WebHelp and PDF outputs.
(It won't work in Word targets.)

In the second code example, the Note text uses relative positioning to move it up, so that it is in the middle of the line.
Relative positioning will only work in the help outputs, and not for PDFs (or any print target).