Articles in this section

Style Admonitions with CSS

Avatar
Anders
  • Updated
Follow

Paligo has several admonitions that you can use in your content, including note, warning, danger, important and tip. Each admonition has its own default styling, but you can customize their appearance if needed.

For HTML publications, use CSS to style the admonitions. You add the styling information to a CSS file and then upload that to the HTML layout that you will use for publishing. The following sections explain how to make some of the most common changes.

For PDFs, use the Admonitions settings on the PDF Layout Editor Options.

Tip

To learn about CSS, this CSS Tutorial covers the basics and has links to more resources.

Change Admonition Color (HTML)

You can use CSS to change the color of the admonitions for HTML outputs. When you add your own CSS, replace the color codes with those for the codes you want to use.

For each admonition, you can change the color of the:

  • Left-margin border

  • Background

  • Symbol

  • Label text

  • Body text

For example, you could change the default green colors and black text of a note to blue with white text.

Note_Default_small.jpg
custom-colors-note.jpg

To the left - Default Note colors. To the right - Customized Note colors.

To change the colors for admonitions:

  1. Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

  2. To change the color of the various parts of a note:

    /* This part changes the color of the left-margin border and the background  */

.note {
border-left-color:#c5c6c8;
background-color:#0540f0;
}

/* This part changes the color of the symbol  */

.note::before {
color:#ffffff;
}

/* This part changes the color of the label  */

.note h3 {
color:#ffffff;
}

/* This part changes the color of the body text  */

.note > p {
color:#ffffff;
}

  3. To style other admonitions, add extra code and replace .note with the name of the admonition (for example .warning).

    /* This part changes the color of the left-margin border and the background  */

.warning {
border-left-color:#c5c6c8;
background-color:#0540f0;
}

/* This part changes the color of the symbol  */

.warning::before {
color:#ffffff;
}

/* This part changes the color of the label  */

.warning h3 {
color:#ffffff;
}

/* This part changes the color of the body text  */

.warning > p {
color:#ffffff;
}

    Important

    Note that the danger admonition is called .warning.danger.

  4. Save your CSS file.

  5. Upload Customized CSS

    When you publish content using the HTML layout, the CSS styles you have added will be included in the published output. Your custom styles take priority over the built in styles.

Hide Admonition Label (HTML)

By default, admonitions have a text label with the admonition type shown before the admonition text. For HTML outputs, you can use CSS to hide the labels if you prefer to use admonitions that only use an icon.

For example, below the warning admonition has a "Warning" label.

warning-with-label.jpg
warning-with-no-label.jpg

To the left - Admonition label shown. To the right - Hidden admonition label and extra spacing applied to warning text.

To use CSS to hide or show the admonition labels:

  1. Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

  2. To hide admonition labels, use this CSS code:

    .caution h3, .important h3, .note h3, .tip h3, .warning h3{
    display: none;
}

    This sets the labels for all of the admonition types (caution, important, note, tip and warning) to be hidden.

    Tip

    If your labels are already hidden and you want them to be shown, change display:none; to display:block;

  3. Add some extra spacing for the body text of the admonition, to align it with the top of the admonition icon. This gives the text a 10px margin at the top, which is the same amount of spacing that is used for the icon, by default.

    To do that, add this code to your CSS:

    .warning > p, .note > p, .important > p, .caution > p, .tip > p {
    margin-top: 10px;
}

    Note

    If you have customized the position of the icon, you will need to adjust the text top margin to match your icon spacing.

  4. Save your CSS file.

  5. Upload Customized CSS

    When you publish content using the HTML layout, the CSS styles you have added will be included in the published output. Your custom styles take priority over the built in styles.

Change Admonition Symbol (HTML)

For HTML outputs, the admonitions use a symbol from FontAwesome 4.6.3 or earlier. This means you can change the symbol with a customized CSS file that references a different symbol.

For PDFs, you can change symbols by uploading your own symbol in the Admonitions settings on the PDF Layout Editor Options.

warning-with-label.jpg
warning-different-symbol.jpg

To the left - Default Warning symbol. To the right - Customized Warning symbol.

To use CSS to change the symbol for HTML publications:

  1. Refer to FontAwesome 4.6.3 to find the icon you want to use. Make a note of its code.

  2. Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

  3. To change the symbol for a note, use this CSS code:

    .note:before {
    content: '\f12a';
    font-family: FontAwesome;
}

    In this example, we have used f12a as the example code for a FontAwesome symbol. You will need to replace that with the code for your chosen icon.

  4. To adjust the spacing of the icon or its color. You can do that by setting its styles.

    .note:before {
    content: '\f12a';
    color: #2ab27b;
    font-size: 30px;
    top: 30px;
    font-family: FontAwesome;
}

    Here is an example of some styling for a note, where the color is set and the font size and top margin spacing have been increased.

  5. To style the other admonition types, add extra code and replace .note with the name of the admonition (for example .warning).

    .warning:before {
    content: '\f12a';
    color: #2ab27b;
    font-size: 30px;
    top: 30px;
    font-family: FontAwesome;
}

    Important

    Note that the danger admonition is called .warning.danger.

  6. Save your CSS file.

  7. Upload Customized CSS

    When you publish content using the HTML layout, the CSS styles you have added will be included in the published output. Your custom styles take priority over the built in styles.

Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk