With CSS and auto-numbering you can easily create “Note”, “Tip”, or “Example” boxes by creating a paragraph style and applying it.  We’re going to be dropping this class in the Default (or “root”) medium of the CSS file used by the Flare target.

Note

This example works with both PDF and Web outputs. Since it does use some CSS3 for the rounded corners, the corners will appear ‘square’ in PDF and older browsers. 

Create the style

For the steps to create a new style class from withing the Flare CSS Editor, see http://webhelp.madcapsoftware.com/flare9/Default.htm#Styles/Creating_New_Styles.htm

To save some time, copy the code below and paste it into the CSS that you are using. This will create a paragraph style called “note” that we can use in the editor, and that we can access from the right-click menu from the structure bars.

  • In the Content Explorer, go to the Resources Folder
  • In the Resources Folder you should see a Stylesheets Folder
  • Right-click the style sheet that you are using and open it it using the Internal Text Editor
  • Copy and Paste the code below into it.
  • Save and Close the Internal Text Editor
p.note
{
     color: #616E14;
     border: solid 1px #BFD62F;
     background-color: #DAE691;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     border-radius: 6px;
     padding: 14px 20px;
     mc-auto-number-format: '{b}Note: {/b}';
}

Apply the style

Open a topic in the Topic Editor and either type a new paragraph or select a paragraph that you want to apply the “Note” style to.

Right-click the block bar and select the p.note style:

Apply Note Style

The note will be applied and it will be rendered similar as it will be in Web and Print (minus the rounded corners). Notice that because of the auto-numbering, the “Note” text is formatted bold and automatically added to the paragraph for you as part of the “box”.

Note Style in the Editor

You can use the same process to create several of these paragraph styles for Example, Tip, and other “boxes” that you may need.  You will want to change the style name and auto-numbering text to reflect the type of box it is. For example: paste another copy of the code above and name it p.example instead of p.note and change the mc-auto-number-format to ‘{b}Example: {/b}’.

About The Author

Jose Sermeno

About Jose Sermeno

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Last Modified: October 25, 2013

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

Comments

  • Shawn March 4, 2014 at 1:58 PM

    What a fantastic idea. But there appears to be a problem (a bug?) in Flare v10 that is causing inconsistent results. See my forum post here: http://forums.madcapsoftware.com/viewtopic.php?f=13&t=18473

    • Jose Sermeno Jose Sermeno March 4, 2014 at 2:20 PM

      Hi Shawn, thanks for the comment. I can’t seem to reproduce any issues using the p.note code provided, and your forum post looks to have been moved/deleted. Can you elaborate on what you’re experiencing? You can feel free to follow up directly if you’re still having issues: jsermeno@madcapsoftware.com

  • Media June 23, 2014 at 3:53 AM

    Hi Jose,
    Firstly, for the NOTE boxes you have on-line or in PDF files, there is also image. Can you also add images to tag without using a DIV or Table?
    Last but not least, how does MadCap Create these NOTEs? Do you use snippet or something?

    • Jose Sermeno Jose Sermeno July 2, 2014 at 10:06 AM

      Yes, you can add an image to any tag. The property you edit in the CSS is “background image”. Flare’s p.note class can be seen in the v10 project template “Online and Print Advanced”. In our content, we use this style class to identify “note” content. The content of each “note” is unique, so a snippet isn’t necessary. You would just type the content you wanted to be a “note”, and then apply the p.note class on that paragraph tag.

      The syntax of the class looks like this:

      p.note
      {
      background-color: #3e3e3e;
      background-image: url(‘../Images/NoteIcon.png’);
      background-repeat: no-repeat;
      border: solid 1px #404040;
      border-radius: 6px;
      color: #b3b3b3;
      mc-auto-number-format: ‘{b}{color #bed230}Note: {/color}{/b}';
      padding-bottom: 10px;
      padding-left: 40px;
      padding-right: 10px;
      padding-top: 10px;
      }

  • Dorit Sapir August 3, 2015 at 6:15 AM

    Can I have more than one paragraph in a single box?
    I noticed that once I press Enter, a new paragraph is started with a new Note box.

    • Jose Sermeno Jose Sermeno August 3, 2015 at 10:27 AM

      Yes you can. If you want to write more lines/blocks in the Note box, hold down the Shift Key, then press enter. This line break will allow you to enter more text/paragraphs inside the Note box.

      • Dorit Sapir August 5, 2015 at 8:03 AM

        Great! That works.
        But they are all the same style as the first line. Is there any way of getting a bullet or numbered list in there?

  • Linda Payne October 26, 2015 at 8:04 PM

    Hi Jose,
    This might be a real newb question. I am trying to use the “amazing em unit” but when I use ems in your code I end up with an elliptical shape, not the box. It seems to be the border-radius. Any ideas? The minute I switch to pixels it snaps to the rectangular shape. It probably has to do with the box model. I bet I should just read more. Linda

  • Chris Burden September 28, 2016 at 4:08 AM

    Jose,

    Here is an update we use. This adds a CR after the word ‘NOTE’ and lets you format the text. The CSS works around using the span over the autonumber part.

    .NoteX
    {
    mc-auto-number-class: Xlinebreak;
    border-radius: 10px;
    border: solid 1px #a52a2a;
    padding: 0em, 1.2em, 5px, 1.2em;
    mc-auto-number-format: ‘{b}Note{/b} ‘;
    page-break-inside: avoid;
    }

    span.Xlinebreak:after
    {
    content: ‘\A';
    white-space: pre;
    }

    span.Xlinebreak
    {
    color: #000000;
    font-size: 0.9em;
    line-height: 2em;
    }

  • Rosemary December 20, 2016 at 1:18 AM

    Just have a quick query. I’m having a problem getting boxes to display in HTML5 output. They look great in Preview mode, exactly as you would expect. In the IE output, however, only one line of the text is actually contained in the box. Could this be a browser issue??

    • Rachel Kim Rachel Kim December 23, 2016 at 10:26 AM

      Hello Rosemary, we were unable to replicate your issue on IE, and need more information to help you out. Can you reach out to tech support and open a ticket? Our staff would be able to take a look and help!

  • Cheryl Landes January 3, 2017 at 12:30 AM

    Love this, Jose! I tried it on a conversion project, and it works great. I’ve also customized it for some different types of notes, such as Important. Thanks for sharing this.

Have Something to Say?

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