Skip to main content

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.