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

This forum is for all Flare issues not related to any of the other categories.

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

Postby jcoria on Tue Jun 24, 2008 6:01 am

LTinker68 wrote:
forfear wrote: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
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

Re: Flare in Action!

Postby LTinker68 on Tue Jun 24, 2008 8:33 am

jcoria wrote: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/docs/api/Content/Resources/Stylesheets/help.css -- you could look through that for the style you want.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

Re: Flare in Action!

Postby Dave Lee on Tue Jun 24, 2008 8:37 am

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).
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Flare in Action!

Postby jcoria on Tue Jun 24, 2008 8:46 am

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
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

Re: Flare in Action!

Postby Dave Lee on Tue Jun 24, 2008 9:09 am

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).
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Flare in Action!

Postby jcoria on Tue Jun 24, 2008 9:17 am

Dave Lee wrote: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.
Image
I want to get it like the salesforce example.
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

Re: Flare in Action!

Postby Dave Lee on Wed Jun 25, 2008 3:24 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Flare in Action!

Postby jcoria on Wed Jun 25, 2008 6:45 am

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
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

Re: Flare in Action!

Postby Dave Lee on Wed Jun 25, 2008 8:08 am

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';.
You do not have the required permissions to view the files attached to this post.
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Flare in Action!

Postby jcoria on Wed Jun 25, 2008 8:23 am

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

Image

Thank you.

JCoria
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

Re: Flare in Action!

Postby Dave Lee on Wed Jun 25, 2008 8:39 am

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.)
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Flare in Action!

Postby LTinker68 on Wed Jun 25, 2008 9:17 am

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

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

Re: Flare in Action!

Postby jcoria on Wed Jun 25, 2008 9:27 am

I finally got it....!!!

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

Thanks for all your help.

JCoria
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

Re: Flare in Action!

Postby KevinDAmery on Wed Jun 25, 2008 1:10 pm

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.
Until next time....
Image
Kevin Amery
Certified MAD for Flare
KevinDAmery
Propellus Maximus
 
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

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

Postby LTinker68 on Wed Jun 25, 2008 3:05 pm

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

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

Re: Flare in Action!

Postby SteveS on Wed Jun 25, 2008 3:33 pm

Nice work, Dave. Stylesheets all over the world are being modified right now...
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
SteveS
Propellus Maximus
 
Posts: 1989
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).

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

Postby jcoria on Wed Jun 25, 2008 3:40 pm

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

Image

Thanks for all the help on this.
jcoria
Propeller Head
 
Posts: 83
Joined: Mon Oct 22, 2007 12:57 pm

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

Postby Dave Lee on Thu Jun 26, 2008 3:05 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

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

Postby KevinDAmery on Tue Jul 01, 2008 7:36 am

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?
Until next time....
Image
Kevin Amery
Certified MAD for Flare
KevinDAmery
Propellus Maximus
 
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

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

Postby LTinker68 on Tue Jul 01, 2008 7:40 am

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

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

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

Postby LTinker68 on Tue Jul 01, 2008 7:55 am

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

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

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

Postby KevinDAmery on Tue Jul 01, 2008 8:11 am

Tables are mucky, though: if you use a table style it insists on adding all that extraneous inline formatting.
Until next time....
Image
Kevin Amery
Certified MAD for Flare
KevinDAmery
Propellus Maximus
 
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

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

Postby LTinker68 on Tue Jul 01, 2008 10:40 am

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

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

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

Postby shubhransu on Tue Mar 08, 2011 4:16 am

This works great for online format. But I do not get the desired output in PDF generated from Flare.
shubhransu
Jr. Propeller Head
 
Posts: 3
Joined: Wed Nov 04, 2009 12:48 am

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

Postby Dave Lee on Tue Mar 08, 2011 5:11 am

shubhransu wrote: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).
Dave Lee
Master Propellus Maximus
 
Posts: 5753
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Flare's General Discussion

Who is online

Users browsing this forum: Google [Bot] and 5 guests