Skip to main content

Borders for Images (HTML)

For HTML outputs, you can use CSS to add borders around images and sections that contain images. For example, you could add a pink dotted line around your images, like this:

Image of a space shuttle. There is a dotted pink border around the image.

To create the pink dotted line border, we used this CSS:

.mediaobject img {
    border: 3px dotted #FF1493; padding:1em;
}

Our sample CSS styling works like this:

  • The .mediaobject img defines the class we are going to style. There are different classes for the different image types, as explained in Borders on All Images (HTML).

  • border: defines the start of the border styling.

  • 3px is the width of the border line

  • dotted is the style of the border line

  • #FF1493 is the color

  • padding: defines the start of the padding styling. The padding is the space between the image and the border.

When you style your own borders, you can use similar CSS. There are other border styles you could apply too, and if you want to find out more, we recommend the w3schools website as a resource.

Note

For information on setting image borders for PDF outputs, see Borders for Images (PDF).

Borders on All Images (HTML)

You can use CSS to add borders around all images, based on the image type. For example, you could add borders around all block images, but leave inline images to have no borders.

With images that are inside figures and informalfigures, you also have the option to add a border around the entire figure/informalfigure section. So you could have a border around the section, but not the image. Or you could have different borders around both.

Image of a space shuttle. It has been added to a topic as a figure, as it has a title (we are looking at the output topic). There is a pink dotted border but it is around the entire area allocated to the figure, and not around the edge of the image.

To use CSS to style image borders for HTML ouputs, follow the steps below. Note that for the examples provided, we have used a pink dotted border that is 3px wide. There is 1em padding (internal margin) on each image too. You can change the sizing, style, and padding as required.

Tip

For information on using CSS for border styles, we recommend the w3schools website.

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

    Note

    If you already use a custom CSS for your layout, you should edit that CSS file instead.

  2. Enter the CSS for the border styles you want.

    To style block images, add your border styling for the .mediaobject img class. For example:

    .mediaobject img {
    border: 3px dotted #FF1493; padding:1em;
}

    To style figure sections, add your border styling for the .figure class. For example:

    .figure {
    border: 3px dotted #FF1493; padding:1em;
}

    To style informalfigure sections, add your border styling for the .informalfigure class. For example:

    .informalfigure {
  border: 3px dotted #FF1493; padding:1em;
}

    To style inline images, add your border styling for the .inlinemediaobject class. For example:

    .inlinemediaobject {
  border: 3px dotted #FF1493; padding:1em;
}

    Note

    The figure and informalfigure classes are for styling the figure and informalfigure sections, not the images inside them. The images inside the sections are either block images that you can style with mediaobject img or inline images that you can style with inlinemediaobject.

  3. Save your CSS file.

  4. Select Layout in the top menu.

    Paligo editor. The Layout option in the header menu is highlighted.

    Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

  5. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  6. Select CSS, JS, logos and other assets in the sidebar.

    CSS_JS_logos_and_other_assets.png

  7. Select Upload in the CSS section.

    CSS settings box with a single field. The field has an Upload button.

    Important

    When you upload a CSS file, it will replace any CSS file that is currently associated with the layout.

    Note

    If you are using an HTML layout rather than an HTML5 layout, the CSS upload feature is in the General category.

  8. Drag your custom CSS file from your computer's file system onto the file upload dialog.

    File upload dialog. It shows an upload icon and instructs the user to drag and drop a file into the file upload area.

    Paligo uploads the CSS file to the Paligo server.

    Note

    You should only upload validated CSS files that have the .css file extension.

  9. Select Save. Save icon.

When you publish with that layout, the CSS styles will be applied to your published output.

Borders on Selected Images Only (HTML)

If you only want to apply borders to specific images, follow these steps:

  1. Open a topic that contains the image and then select the image.

  2. Select the parent element for the content that you want to style in the Element Structure Menu.

    • For a block image, the element is mediaobject

    • For an inline image, the element is inlinemediaobject

    • For a figure, the element is figure

    • For an informal figure, the element is informalfigure

  3. Select Go to element.

    The mediaobject element is selected in the element context menu. It reveals a menu, and in that menu, the Go to element option is selected.

  4. Add the role attribute in the Element Attributes Panel and give the attribute a name as value.

    We recommend that you use a name that is easy to recognize, for example, specialborder.

    Element attributes section shows that the mediaobject element is selected. It has been given the role attribute with a value of specialborder

  5. Select Save. Save icon.

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

    If you already use a custom CSS for your layout, you should edit that CSS file instead.

  7. To add borders that will only be used by images that have the defined role, add this code to your CSS:

    .specialborder img {
        border: 3px dotted #FF1493; padding:1em;
}

    Where:

    specialborder is the name of the value you gave to the role attribute in step 4.

    Note

    You can change the border style and color to meet your own requirements. The values used here are just examples.

  8. Save your CSS and Upload Customized CSS.

When you publish with that layout, the CSS styles will be applied to your published output.

Exclude an Image from the Border Styles (HTML)

You may find that you want most of your images to have borders, but there are some exceptions and these need to have no borders. Rather then set up every image border independently, you can apply borders to all images and then set your "exception" images to use different styling.

  1. Set the border styles that you want to apply to those images that are to have borders. For this, follow the instructions in Borders on All Images (HTML).

  2. Open a topic that contains one of the images that are to have no borders.

  3. Select the mediaobject element for the image.

  4. Add the role attribute In theElement Attributes Panel and set its value to noborder.

  5. Select Save. Save icon.

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

    If you already use a custom CSS for your layout, you should edit that CSS file instead.

  7. To disable borders on those images with the role you created in step 4, add this code to your CSS:

    .mediaobject.noborder img {
    border: none;
}

  8. Save your CSS file and Upload Customized CSS.

When you publish with that layout, the CSS styles will be applied to your published output.