CSS Tip: Creating Tip or Note Boxes without a Div or Table

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.

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

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

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:

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”.

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}’.

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.

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

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?

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.

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

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

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!