Looking for a way to indicate important pieces of information within your documentation? Creating styled boxes are a great way to call out notes, draw attention to warning signs, or even highlight tips and examples throughout your content. In today’s blog, we’ll cover the steps needed to master CSS boxes within MadCap Flare. Here’s an example of how they look:

You can either copy the styles and paste them into your stylesheet or you can download the Flare project by clicking here. This post focuses primarily on the “Note” style, but if you wanted to see how I created the other styles in the example above, take a peek at the Flare project.
Copying Styles to your Stylesheet via Internal Text Editor
If you will be copying and pasting these styles in your stylesheet, you will need to open it in the Internal Text Editor view.
- Right-click your stylesheet > go to Open with > Internal Text Editor.
- This will open up your stylesheet in the Text Editor view.
- Copy the code sample.
- Paste it at the bottom of your stylesheet.

Create Style Boxes using Paragraph Styles
While a div or table may seem necessary for creating styled boxes, you can actually use a single paragraph style instead. Using a paragraph style is great when your note will be a single sentence or a paragraph. Once the style is created, you can quickly apply the style to any of your paragraph elements. There are two different styles discussed here; the biggest difference between the two is that there is an image for one and an auto-number for the other. Feel free to tweak the look and feel to customize the way you want.
Styled Boxes with an Image

p.note
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #f0f7fb;
background-image: url(../Images/icons/Pencil-48.png);
background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #3498db;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
}

p.noteAlt
{
background-color: #f0f7fb;
background-image: url(../Images/icons/Pencil-48.png);
background-position: 9px 0px;
background-repeat: no-repeat;
border-left: solid 4px #3498db;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
}
Take a look at the “background-image” style property – do you notice that the path leads to an image? If you copy these styles directly into your stylesheet, the image will not appear. Make sure that you correct this path to point to your own image. If you would like to use the image I used, either download the example Flare project or save the images below:



However, you can use any image that you want! For example, the images used in this example were created at https://flaticons.net/.
Styled Boxes Using Auto-Numbers

p.note
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #f0f7fb;
border: solid 1px #3498db;
border-radius: 6px;
line-height: 18px;
mc-auto-number-format: '{b}Note: {/b}';
overflow: hidden;
padding: 12px;
}

p.noteAlt
{
background-color: #f0f7fb;
border-left: solid 4px #3498db;
line-height: 18px;
mc-auto-number-format: '{b}Note: {/b}';
overflow: hidden;
padding: 12px;
}
If you do not want to use an image for your note boxes, you can use an auto-number to make the style display text (Ex: Note, Tip, Example, Warning, etc.). The property that controls this is the “mc-auto-number-format” property. Notice the mc-auto-number-format in the code sample above says {b}Note: {/b}. The {b} in the property is used to bold text. If you’d like to apply formatting to the auto-number text you can add similar formatting tags within the property.
Apply the Paragraph Style
Once you’ve created these styles in your stylesheet you will want to apply them to your paragraphs.
- Open a topic in the Topic Editor.
- Type a new paragraph or select a paragraph where you want to apply the “Note” style.
- Right-click the block bar and select the p.note style:

Alternatively, you can use the Style Window (Home Ribbon > Style Window in Flare) to quickly apply styles.
If you have multiple lines of text that you need to insert into a paragraph, you can hold Shift + Press Enter to have multiple lines within a single paragraph item. However, if you need to add a list or if you need to add multiple paragraph elements in a box, you should also add a div in your stylesheet.
Using Divs for Styled Boxes
A div is a container element that groups other elements together. By using CSS you can apply style properties to the div. In other words, we are putting our paragraphs, lists, images, etc. in a box and using CSS to style the box.
Styled Divs with an Image

div.note
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #f0f7fb;
background-image: url(../Images/icons/Pencil-48.png);
background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #3498db;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
}

div.noteAlt
{
background-color: #f0f7fb;
background-image: url(../Images/icons/Pencil-48.png);
background-position: 9px 0px;
background-repeat: no-repeat;
border-left: solid 4px #3498db;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
}
Styled Divs with an Auto-number

div.note
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #f0f7fb;
border: solid 1px #3498db;
border-radius: 6px;
line-height: 18px;
mc-auto-number-format: '{b}Note: {/b}';
overflow: hidden;
padding: 12px;
}

div.noteAlt
{
background-color: #f0f7fb;
border-left: solid 4px #3498db;
line-height: 18px;
mc-auto-number-format: '{b}Note: {/b}';
overflow: hidden;
padding: 12px;
}
Once you’ve created these divs in your stylesheet, you will need to apply them to elements in Flare.
Applying a Div Style
- Multi-select the elements you want to group together by Shift+Clicking or highlighting the content.
- Go to the Home Ribbon > Select the Group button.
- In the Group window, select the div you created in your stylesheet.

Note: Instead of hitting the group button, you can instead press the Tab key as a keyboard shortcut.
Alternatively, if you do not want to click through these dialogs, you can use a snippet to insert formatted content.
Bonus Tip: Using a Snippet to Quickly Insert Formatted Content
If you plan to frequently use divs for notes and do not want to have to apply divs every time, you can use a snippet to quickly insert pre-formatted content.
- Create a snippet. (File > New > File Type: Snippet)
- In the snippet, apply the styled div to the single paragraph.
- Open a topic.
- Insert the newly created snippet.
- Since the snippet is linked to the snippet we need to break the link to make this editable. Right-click the snippet block on the left-hand side and select Convert Snippet to Text.
- Add your note information.

Now you have some cool styled boxes for your documentation. Feel free to try it out and write in the comments below on what you’ve created with styled boxes.
To download the sample Flare project, click here.
New to MadCap Flare? Start a free 30-day trial, which comes with free inquiries to our Platinum Level technical support. If you have any questions on how to customize your documentation, a technical support team member is ready to assist you.
Editor’s Note: Originally published on August 17, 2017.
I too put all note / caution / warning desing elements into a Snippet. In that Snippet I then apply a note / caution / warning condition tag to the corresponding element. I can then (a) quickly insert the Snippet, (b) apply the desired condition tag to display only the desired design element, then (c) convert it to text so that I can edit the note / caution / warning message…
Very helpful. I’m starting a new subject area next week and will be using styled boxes. Flaticons.net has the icons I’m needing.
smart girl from O.C.C.
Thanks for the sample code. I’ll try it out. I’ve been looking for something new for notes, warnings, etc. These look nice. I’ve used boxes like this, but this takes the frustration out of getting the images to place properly. Keep them coming!
Happy Flare User (mostly)
BobB
Wasn’t completely clear on the Autonumber explanation. Does a number appear somewhere in the note? Or, are there parameters/properties you can type into mc-auto-number-format: ‘{b}Note: {/b}’; —— to make numbers appear?
Hi Bruce,
In this specific example a number does not appear. However, if you would like numbering to appear you could use the increment number command “{n+}”. For example, if you needed to do figure numbering your format would look like: “Figure {n+} ” which would increment a number and display like “Figure 1” “Figure 2” and so on. For additional details about autonumbering check out the online help. https://help.madcapsoftware.com/flare2017r2/Content/Autonumbers/Shared/AutoNumber-Format-Examples.htm
Great stuff Justin! I honestly can’t recall exactly how I did mine back in Flare 10 but I do know that I used the auto number method for my Notes, Important, Tip etc boxes. I did my own graphics in Illustrator and used brand standard colors for my company. I used a bit of a different approach to styling my ANSI Danger, Warning and Caution panels since I wanted to not only incorporate the ANSI standard colors but also use the ISO international symbols for specific hazards. I used a combination of unique table styles and auto numbers for each hazard classification. One day when I remember how I did this I’ll share with the community.
What if…. I want the text in the note to be vertically aligned to the middle? Some of my notes are one-liners, others occupy the 3 lines I have allowed for when specifying the height of the box. The one liner looks odd at the top 🙂
I thought to sort it with “vertical-align: middle;” but that does not work.
It has been suggested to put in a linebreak – well, can do, but is not really a solution.
It has also been suggested to use the “display: table-cell;” – but that leads to a ‘Table cell outside table’ text which appears in the PFD.
My targets are CHM and PDF.
I’m starting to think it can’t be done….. ??
Hi Marion,
The easiest way to achieve this would involve using a table, table stylesheets, and a snippet. Using a table is what allows us to use the “vertical-align: middle” property and will be accepted across outputs.
First, create a table stylesheet to control the look of the note (borders, border-radius, background-color). Then in the table stylesheet set the first column’s vertical-alignment to “middle”.
Once your table stylesheet is set, create a new snippet > in the snippet add a 2 column table > assign your table stylesheet to the table > type “Note:” in the first column > Save the snippet.
Now that you have the snippet created you can use the “Convert to Text” method described in the post to insert the note.
I am trying to limit the width of the box to the text content contained within them, however I am getting an error when I use width: max-content, and auto doesn’t work either.
What can I use to without adding in a hard px or % number?
When I added display: inline-block; it just breaks the displaying of the box entirely.
I ended up using float: left; and clear: left; on the div, and I added clear: left; on the p tag. It works and looks fine on the examples I have, however, would this have caused issues I can’t see yet?
Hi Adam,
This is great! I can’t think of any issues immediately. Any chance you can post a code snippet of the elements you’re using and I’ll see if anything stands out?
Hi Justin,
I actually removed all the code I did not long after I succeeded in making it work. While it sounds good in theory to have those boxes align to the text length, on viewing, it made the guide look inconsistent and untidy.
Hi Adam,
Thanks for following up!
Great blog, simple and concise and using it now in a project. Thanks
Hey Justin!
Thanks for this great tip! I am wondering how I might be able to add some space between the auto-numbered “Note” and the text below it? Right now I have almost zero space between the auto-number and, for example, the bulleted list below it.
Thanks!
Hi Nick, this one is a bit tricky. There are a couple of ways to pull this off, but here’s one way to set it in the stylesheet without having to add any extra elements into topics moving forward.
You will need to add the following properties to a stylesheet via the internal text editor if you are creating print and web output.
/*Copy and paste the section below*/
div.note > :nth-child(2) {
padding-top: 10px;
}
@media print {
div.note > :nth-child(2)
{
padding-top: 0px;
}
div.note > :first-child
{
padding-top: 10px;
}
}
/*end*/
-Explanation of these properties-
At a high level, we want to add padding to the first element contained within a div. These properties accomplish that but the method is different per output type.
The first selector “div.note > :nth-child(2)” selects the second child element in a div and adds padding to it. The reason we need to use the second child is due to the fact that Flare wraps the autonumber section in a span tag when compiling an output.
Now the next selectors are in the “@media print” media query. Which means these styles will only apply when outputting to print.
The second selector “div.note > :nth-child(2)” is removing padding-top from the second child of div.note. This is necessary to negate the first selector in web output.
The last selector “div.note > :first-child” adds the padding-top properties. The reason we want to use first-child in print is because Flare does not wrap the autonumber section in a span tag when compiling the output.
Hope this makes sense! Adjust the padding-top: 10px properties to your liking and if you need additional help please contact MadCap technical support!
I’ve been using this technique for a long time in tri-pane output but in top nav output with a topic menu proxy, the topic menu overlays any note border/background in the same proximity on the page even though the note text wraps as expected. Anybody know of a CSS fix to make the border yield to the topic menu border?
Hi Ken,
If I’m picturing what you’re describing correctly it sounds like the note is going behind the menu proxy. If this is the case the “overflow: hidden” property should resolve this. Let me know if I’m picturing this incorrectly if so – please email me a screenshot of the behavior! jbondoc@madcapsoftware.com
Thanks for the blog…these are sure to pump up my help system!
Thank you! First solution to pop up in Google and it worked perfectly!
Hi great tip ! but the link to the sample project is broken……
Hi Yonatan, thanks for the comment – we just updated the sample project!
Justin, I’m trying to get the example, tip and warning code and copy and paste it into my project, but it looks like the link is no longer working. I get a 404 error. Is there another way to get that code? Thanks!
Hi Shelly,
Thanks for the comment – we just updated the sample project. Let us know if you have any questions!
Thanks for your work !
Justin, thank you for this! I have put your CSS codes p.note and div.note in our project.I have just one question. If I want to type next on the next line, when I press Enter, the style or div applies to the next line and I don’t know how to get outside the code without going into the Text Editor. Can you help?
This is really great! Thanks for posting. I have a question regarding print output. I’m wondering if you have any solution for bordered divs that span between two pages so that the bottom border does not show on the first page and the top border does not show on the second page so that it’s clear that the two pieces are part of the same note?
I tried setting box-decoration-break: slice; on the element in the print medium, but it didn’t seem to have an effect.
In that case where it is a div, there is not a way to remove the borders either. The page break avoid is the best way to prevent the div from breaking a page, however in the case that it does break a page, the border is always going to show up.
In the CSS file, navigate to your div class. In the properties list, expand PrintSupport, then in page-break-inside select avoid
Please feel free to reach out to support if you are still not getting the result you expect, we are happy to help!
The styles with the border look great in web output.
However, I too had problems in print output. The right border is not shown in many instances and also using the “Styled Boxes Using Auto-Numbers” method above means that when the print output is generated, that
the formatting, i.e. {b}Note: {/b} is shown in the document. I had to do a search & replace to get rid of it.
Hi Caz, I was not able to replicate this. Perhaps we can take a look at your style sheet, and see if we can help? Feel free to email me directly and I can help facilitate that, or you can reach out: https://www.madcapsoftware.com/support/contact-options.aspx My email is jmorse@madcapsoftware.com
Have a look at this. It provides a solution to the formatting issue:
https://forums.madcapsoftware.com/viewtopic.php?f=10&t=32371#p139863
Hope that helps!
KT
Thanks Justin for this article. Creating Styled Boxes for Notes has a lot of great information and is really helpful. Applying this works for pdf output when using the image option but for some reason the image will not display in the word output. Do you have any suggestions?
Thanks for your help,
Gloria
Hi Gloria,
Microsoft Word does not support background images, which is why the icons in the div do not show up in Word output. As a workaround, you can insert the icon as an image into the topic, and the icon will display when you build the Word output. This would likely require some minor img styling tweaks like margin and padding, to get the icon in the desired position in relation to the rest of the content in the div, but it will allow you to get the icons to display in Word outputs.
Hope this helps!
Thanks Justin, I have created this styled boxed on my website. Thanks again.