Need a way to indicate an important piece of information in your documentation? You can create styled boxes within MadCap Flare that calls out notes, warning, tips, or examples, all with CSS. Here’s an example of how they look:

css styled boxesYou 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.

  1. Right-click your stylesheet > go to Open with > Internal Text Editor.
  2. This will open up your stylesheet in the Text Editor view.
  3. Copy the code sample.
  4. Paste it at the bottom of your stylesheet.

css styled boxes

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’s 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

css styled boxes

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;
}

css styled boxes

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:

css-box-icon-1css-box-icon-2css-box-icon-3css-box-icon-4

 

 

However, you can use any image that you want! For example, the images used in this example were created at http://flaticons.net/.

Styled Boxes Using Auto-Numbers

css styled boxes

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;
}

css styled boxes

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.

  1. Open a topic in the Topic Editor.
  2. Type a new paragraph or select a paragraph where you want to apply the “Note” style.
  3. Right-click the block bar and select the p.note style:

css styled boxes

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 which 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;
}

css styled boxes

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

css styled boxes

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;
}

css styled boxes

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

  1. Multi-select the elements you want to group together by Shift+Clicking or highlighting the content.
  2. Go to the Home Ribbon > Select the Group button.
  3. In the Group window, select the div you created in your stylesheet.

css styled boxes

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.

  1. Create a snippet. (File > New > File Type: Snippet)
  2. In the snippet, apply the styled div to the single paragraph.
  3. Open a topic.
  4. Insert the newly created snippet.
  5. 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.
  6. Add your note information.

css styled boxes

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.

About The Author

Justin Bondoc

About Justin Bondoc

Justin Bondoc, Product Specialist, started at MadCap Software as a technical support engineer and turned to the evangelism team to promote the value of MadCap’s products and services to the community. In addition to spending his time educating potential and existing customers about all things MadCap Software, Justin likes listening to hip-hop, tackling his next art project, and exploring his creative side.

Last Modified: August 30, 2017

This entry was posted in MadCap Flare, Tips & Tricks. Bookmark the permalink.

Comments

  • Riley VanDyke August 17, 2017 at 1:47 PM

    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…

  • Gail Lorzing Gail Lorzing August 18, 2017 at 6:13 AM

    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.

  • Bob Buckley August 19, 2017 at 11:14 PM

    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

  • Bruce Conway September 8, 2017 at 12:11 PM

    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?

    • Justin Bondoc Justin Bondoc September 12, 2017 at 9:15 AM

      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

  • Gary Donnelly September 12, 2017 at 12:52 PM

    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.

  • Marion Verhaegh September 13, 2017 at 11:20 PM

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

    • Justin Bondoc Justin Bondoc September 14, 2017 at 10:18 AM

      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.

  • Adam Schell September 19, 2017 at 11:24 PM

    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.

    • Adam Schell September 20, 2017 at 4:32 PM

      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?

      • Justin Bondoc Justin Bondoc September 21, 2017 at 10:41 AM

        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?

  • Brent Robinson September 30, 2017 at 4:27 PM

    Great blog, simple and concise and using it now in a project. Thanks

  • Nick Letkeman October 3, 2017 at 8:44 AM

    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!

    • Justin Bondoc Justin Bondoc October 11, 2017 at 2:56 PM

      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!

  • Ken Billing December 5, 2017 at 10:46 AM

    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?

    • Justin Bondoc Justin Bondoc December 11, 2017 at 1:55 PM

      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

  • Lisa December 6, 2017 at 2:04 PM

    Thanks for the blog…these are sure to pump up my help system!

Have Something to Say?

Your email address will not be published. Required fields are marked *