Create a tip or note box with an image

[benm_130]

I would like to create note/caution/hint boxes with images filling the left-hand side. Using Flare 8, I created a new stylesheet from the 'modern' template, and I've tried all the settings that I can think of inside the Advanced view of the stylesheet with no luck. What am I missing?

This is what I'm trying to do:

hint.png

Thanks in advance!

[LTinker68]

You'd set the image as the background-image on the paragraph or DIV tag and set its position to not repeat. You then set the padding-left attribute on the tag to 50px or however much you need to clear the image. So the background-image supplies the icon and the padding-left places the text in the tag.

I'm pretty sure you can have a background-image and background-color defined in the same element and the image would be over the color, but you'd have to double-check that. If you can't, then you'd want to use a paragraph in a div or a div in a div. The outer element would set the border and background color and the inner element would do the background image and text.

Either way, make sure you test in both online and print outputs. It seems like the background image positioning didn't work as well in print output and I had to go with div-in-a-div, or maybe it was when I tried floating the image instead of using it as a background image. I think now I'm doing a div-in-a-div, but make sure you test it in as many outputs as you can before going too far.

[benm_130]

OK, your first suggestion worked great for online output, but as you mentioned, the image does not show up in printed outputs.

What do you mean by div-in-a-div?

[LTinker68]

What do you mean by div-in-a-div?

For my notes, tips, warnings, etc., I have snippets that are all set up in a similar fashion.

Code: Select all

<div class="noteCntr">
     <img src="../Images/miscTopicItems/note_info.png" class="noteImgFloat" title="Info" alt="Info" />
     <div class="noteContent">Text placeholder that will be replaced when inserted into topic...</div>
</div>

As you can see from the code above, there is an outer DIV with a class of noteCntr. This class sets the border color and background color (it also has code for rounded corners, for browsers that support it). This DIV's contents are the image icon used to denote if it's a note, tip, or warning and an inner DIV with a class of noteContent that will contain the actual content of the note. The associated style definitions are shown below (I forgot that I have the image float left). This div-within-a-div works in both WebHelp and PDF outputs. I doubt it would work in Word output, since Word doesn't like DIVs, but you might get lucky (I don't build Word outputs). Likewise, I don't built HTML Help output, but I would expect it to work there, too.

Code: Select all

div.noteCntr
{
	border: solid 1px #CE9B36;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 12px;
	padding-left: 6px;
	padding-right: 0;
	background-color: #fbf7ef;
	margin: 16px 0;
}

div.noteContent
{
	color: #000000;
	font-weight: bold;
	margin: 0px 20px;
	margin-right: 12px;
	margin-left: 25px;
}

img.noteImgFloat
{
	float: left;
	text-align: left;
	padding-right: 6px;
	clear: both;
}

[larc1990]

New forum member - new user of Flare 8: I am creating snippets as templates for my notes, cautions, warnings, etc... My snippets consist of a single row, two column table - an icon image on the left and the name place text on the left. I insert these snippets as needed in my doc, do the "convert to text" and type in the appropriate text as it applies for the instance. I have named the snippets accordingly - Note1, Caution1, EnvirHaz1, Warning1, and such.

What I need to know is that by "converting to text" and saving - does the snippet become regular text and thus unalterable if I should ever change the snippet origin template in the Resources folder and do a "save all"?

Objective: To be able to use a series of template snippets but then to have the option for snippet origin modification without losing the locally applied document text...in other words to keep it from reverting back to the origin snippet place holder text... let's say should I ever want to change the snippet icon image, font or spacing?

[LTinker68]

What I need to know is that by "converting to text" and saving - does the snippet become regular text and thus unalterable if I should ever change the snippet origin template in the Resources folder and do a "save all"?

Yes, converting to text breaks the link back to the original snippet, so any modifications to the snippet file will not be inherited by topics where the link was broken.

Given the examples you used, this is why you should use classes instead of inline styles -- if you do decide to change the font or spacing, you make the modification to the appropriate tag or class in the stylesheet, which will filter down to all content that uses that tag or class. The one example where it might not work is with replacing the image, but it depends on how the image is inserted. If you insert it in the topic then you'd have to do a find-and-replace in Flare to replace the old image with the new one. If you have the image inserted via the stylesheet, then you'd just change the image reference in the stylesheet.

[crdmerge]

If your users don't use IE 8 in Compatibility Mode (or IE 7), or if they use other browsers, you could simply add the :before pseudo-element to your styles. See http://www.w3schools.com/cssref/sel_before.asp for instructions.


Good luck,
Leon

[Craig.Prichard]

If anyone is interested, here is my solution.

CSS:

Code: Select all

div.note, div.warning, div.technical
{
	margin: 0 1.5em 1em 1.5em;
	padding: .5em .5em .5em 50px;
	width: auto;
	font-family: Helvetica, Verdana, Cambria, Georgia, sans-serif;
	font-size: 1.05em;
	text-align: left;
	background-repeat: no-repeat;
	background-position: 14px 10px;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
}

div.note p, div.warning p, div.technical p
{
	font-family: Helvetica, Verdana, Cambria, Georgia, sans-serif;
	font-size: 1.05em;
	text-align: left;
	padding-left: 14px; /* added to align the text with div.note's background-position: 14px */
}

div.warning
{
	background-image: url('../images/CSS/warning-32x32.png');
	background-color: #FAEBD7; /* AntiqueWhite */
}
div.warning .label
{
	color: #ff0000;
}

div.note
{
	background-image: url('../images/CSS/note-32x32.png');
	background-color: #F0F8FF; /* AliceBlue */
}
div.note .label
{
	color: #000080; /* navy */
}

div.technical
{
	background-image: url('../images/CSS/technical-32x32.png');
	background-color: #F0FFFF; /* Beige */
}
div.technical .label
{
	color: #2E8B57;
}

HTML:

Code: Select all

<div class="note"><span class="label">Note</span>
	<p>Content</p>
</div>

<div class="technical"><span class="label">Technical</span>
	<p>Content</p>
</div>

<div class="warning"><span class="label">Warning</span>
	<p>Content</p>
</div>

With slight tweaks for print output this works well for me.

[Scotty]

Do any of the proposed solutions above keep the note/warning/tip textbox in line (at same 'tab' level) with the preceding text? Or are they all left-justified? The solution I currently use keeps the text-boxes at the tab level of the preceding text (which is what I want), but the non-repeating background image doesn't appear in PDF output.

Any confirmation from Madcap that background-position not working in PDF output is a bug that they're going to fix?

[Scotty]

As a short aside to this, the solution I've gone with is to simply add transparent space to the top and left sides of my textbox icons (transparent space added to the actual graphic .jpg/.gif/.png file where the icon resides) so that I don't need to use the buggy background-position element. Not the most elegant solution, but simple and easy to maintain. It has the added benefit of actually showing the icon in the Flare XML editor rather than being hidden until generating a target.

[nickatwork]

I use a table for mine. 1 cell with the image, cell to the right with the text and a formatted <p> tag. Although it is not a single style, it uses <p> styles and table styles (td/tr/table) so I can update it etc just as easy as anything else. Then keeping it close by in a 'useful stuff' topic where I can just copy/paste a dummy table out of works well enough.

It works for both print and online perfectly. Of course it is not a glamourous solution, but it does work everytime. Word/PDF/online etc.

Nick.

[i-tietz]

OK, your first suggestion worked great for online output, but as you mentioned, the image does not show up in printed outputs.

Background images are always difficult for print. And even if it might theoretically be possible, the user might switch it off.

1.idea:
You could insert a table column and make it a snippet. Then the editor inserts it, converts it to text and enters the content.

2. idea (never checked or even tried - just an idea):
Generate a list format (that uses the graphics as "bullet".

[LTinker68]

Generate a list format (that uses the graphics as "bullet".

Won't work directly in Word output, but it will create a style for it, so it's fairly quick to go into the Word output and modify the style to point to the image.

[sdcinvan]

What do you mean by div-in-a-div?

For my notes, tips, warnings, etc., I have snippets that are all set up in a similar fashion.

I tried this exactly as presented but my code results only display a square box. What am I doing wrong?

The css code:

Code: Select all

div.noteCntr
{
	border: solid 1px #CE9B36;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 12px;
	padding-left: 6px;
	padding-right: 0;
	background-color: #fbf7ef;
	margin: 16px 0;
}

div.noteContent
{
	color: #000000;
	font-weight: bold;
	margin: 0px 20px;
	margin-right: 12px;
	margin-left: 25px;
}
 
img.noteImgFloat
{
    float: left;
	text-align: left;
	padding-right: 6px;
	clear: both;
}

And the HTML code:

Code: Select all

  <div class="noteCntr">
            <img src="../Images/miscTopicItems/note_info.png" class="noteImgFloat" title="Info" alt="Info" />
            <div class="noteContent">Text placeholder that will be replaced when inserted into topic...</div>
        </div>

The only part missing is the .png image but that wouldn't cause any issues.

[LTinker68]

1. Where are you seeing the square corners? In the authoring environment or the generated output?

2. What browser are you using to view the output? If you try other browsers, does it appear rounded? As I mentioned in the other thread, when you go to the Flare v9 help website, do you see rounded corners on the Search box, or are they also square?

3. Do you have more than one stylesheet in the project, and if so, is the target pointing to the correct stylesheet?

4. Did you clear (delete) the output folder before building? If you did, then you might have to clear the browser cache and reload the site to see the changed styles.

[sdcinvan]

1. Where are you seeing the square corners? In the authoring environment or the generated output?

2. What browser are you using to view the output? If you try other browsers, does it appear rounded? As I mentioned in the other thread, when you go to the Flare v9 help website, do you see rounded corners on the Search box, or are they also square?

3. Do you have more than one stylesheet in the project, and if so, is the target pointing to the correct stylesheet?

4. Did you clear (delete) the output folder before building? If you did, then you might have to clear the browser cache and reload the site to see the changed styles.

Hello Lisa,

I was trying to make rounded corners for PDF output only. It appears that Flare only supports this in HTML5 output. What a pity that Flare doesn't allow this for PDF/printed media.

[sdcinvan]

1. Where are you seeing the square corners? In the authoring environment or the generated output?

2. What browser are you using to view the output? If you try other browsers, does it appear rounded? As I mentioned in the other thread, when you go to the Flare v9 help website, do you see rounded corners on the Search box, or are they also square?

3. Do you have more than one stylesheet in the project, and if so, is the target pointing to the correct stylesheet?

4. Did you clear (delete) the output folder before building? If you did, then you might have to clear the browser cache and reload the site to see the changed styles.

Hello Lisa,

The problem is (and I strongly feel this is a problem) is that Flare doesn't support a number of css3 properties in a PDF target. I mentioned this in another thread as well. Although much less important, even Flare's XML editor doesn't visually support those css3 properties. In the above example, you should see the same rounded corners in the XML editor, your HTML5 target, and your PDF target.

Flare was designed to allow multiple output formats... that is one of its fantastic features! I really hope this is resolved soon.

Partly because of this problem, I had to stop production on one of my projects and complete it in Adobe InDesign.

[LTinker68]

According to W3schools (http://www.w3schools.com/cssref/css3_browsersupport.asp), CSS3 isn't yet a W3C standard. Browser support is mixed, and in some cases, you have to add a prefix to a tag to get it to work for a specific browser. It could be that MadCap is waiting for it to become a W3C standard, or -- more likely -- whatever PDF generator they use hasn't yet implemented full CSS3 support.

You can certainly submit a feature request, but it sounds like in this case that they're at the mercy of browsers and the PDF engine. Which isn't all that unusual -- web designers are well used to having to tweak code and styles to make their web pages work the same or near-same in as many browsers as possible, but sometimes, you just can't do it, no matter how much tweaking you do.