Creating Note, Tip, Warning Styles with Images

[Keri M]

Hello,

I am trying to replicate some custom Word template styles created by another department in my company. For text displayed in a Warning, Note, or Tip box, I need to create corresponding styles that have a graphic and ideally auto-populate the title of the style in italic. The styles should also allow me to enter unique text. (See image below.)

Capture.PNG

How do I go about doing this? I will be publishing my documentation in PDF and WebHelp formats.

Thanks in advance for your help,
Keri

[kwag_myers]

Add the image as the background (no repeat) and set the padding-left to a few pixels more than the width of your image to set the margin of your text. Example:

Code: Select all

p.info
{
	background-image: url('../Images/info.gif');
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: left center;
}

[Keri M]

Thanks for your help. I made your suggested changes and then tweaked the autonumbering properties a tad to enable a note type to appear above the image. This is what it looks like.

Capture2.PNG

Is there a way to enable 'Notes' to be left aligned (without left padding), but have 50 px of left padding for the note text? I'd also like to add padding below 'Notes' and before the graphic so there is a little gap.

[kwag_myers]

If it were me, I'd add the label to the image:

NoteImageEx.png

I had to add some padding: 15px bottom, 30px top, and 50px left.

[Keri M]

Adding the text to the image itself is not ideal because in the PDF version my images blur. I fear it will look worse if the text is blurry too. Not sure if anyone else can work out how I can achieve this?

I've gotten this far which looks OK, but it doesn't match perfectly. It's annoying because I need the label to have different properties from the text itself. This is with the mc-auto-number-position set to inside-head.

Tip.png

If I set it to outside-head, the label almost moves to where I want it (above the image), but the image disappears and the text gets messy.

Tip2.png

[ChoccieMuffin]

You could do worse than look at Mike Hamilton's latest webinar as it covers just this topic! In a bit of a rush but I'm sure you'll be able to find it on the Madcap website.

[MattyQ]

It's a little more advanced, but you can also use the ::before selector to add images to your notes/hints/tips. We do this in part because most of the icon images we use are actually from a font file (a la the way Font-Awesome does things). Here's a glance at what they look like:

notestyledemo.png

CSS follows:

Code: Select all

.Note
{
	background-color: #fdffd9;
	background-image: -webkit-linear-gradient(#fdffd9 65%, #ffffff);
	background-image: -moz-linear-gradient(#fdffd9 65%, #ffffff);
	background-image: -o-linear-gradient(#fdffd9 65%, #ffffff);
	background-image: linear-gradient(#fdffd9 65%, #ffffff);
	border: 1px solid #ffcc00;
	border-radius: 0.5em / 0.5em;
	box-shadow: 0 2px 2px 1px #e6e6e6;
	padding: 5px;
	font-size: 11pt; /* Only if you want to specify a font size different from the normal font size you use. If you want it to inherit the last defined font-size, omit this property */
	font-family: Arial; /* Where 'Arial' is whatever font you want your note to be. If you want it to use the font previously defined, omit this property. */
}

.Note::before /* This selector tells the browser we want to insert content before the element. Fortunately, that still means inside the border and background defined by the class. */
{
	color: #ffcc00;
	display: inline-block; /* Makes the icon a block element, rather than a flow element */
	font-family: bbbb; /* Where bbbb is whatever font you're pulling the icons from. E.g. 'Trebuchet MS' or Arial */ 
	font-size: 16px;
	font-style: normal; /* This and the following three properties clear out any weight or size styles that may have been inherited */
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	speak: none; /* A browser reader won't try to speak the icon when it comes up in the text */
	text-transform: none;
	-webkit-font-smoothing: antialiased; /* Only necessary if your font is looking chunky in webkit browsers (Chrome, etc) */
	-moz-osx-font-smoothing: grayscale; /* Only necessary if your font is looking chunky in a Mac-based Firefox browser */
	content: "\xxxx\00a0";  /* \xxxx should be replaced with the hex code corresponding to the glyph you want to display. For example, in Arial, \0021 would correspond to an exclamation point. The \00a0 automatically adds a space between the glyph and the rest of the content. */
}

This may not be compatible with some older browsers, but should work across almost all current browsers (I think Opera's mobile browser is the exception, but that's super trimmed-down).

[Keri M]

I got it! Watched the webinar and fiddled around with my styles and it is working. I do have one additional question though. I have increased my line height to account for the image, however, whenever I have text that goes beyond one line, I have a large gap in between. I am guessing this is a limitation of having the style contain the image and the text part of the note?

Notes.png

[mattf]

Keri,
I just copied the alert styles (note, tip, etc.) in Flare's online help and modified them with my own icons and color schemes. Here's what my "important" alert looks like in my output:

important_alert.png

Here's the style for the class "p.important":

important_alert_style.png

I have similar classes for p.note and p.tip. The icon stays in the upper left corner no matter how long the text is. The icons are PNGs measuring 31 x 31 pixels.

Hope this helps.
-Matt