Skip to main content

Level Text and Image

The element Sidebar has been specialized in Paligo to serve both as a separate component (called floating sidebar) and as a general-purpose reuse wrapper element, see Create an Informal Topic. Find out more about Common General Elements.

The default setting for a sidebar is one column, with a gray background, a visible black frame and the text above the image. By adding a role attribute that divides the sidebar into two columns, the image and text inside it will be leveled with one another and the frame and background color is removed. You need to add one sidebar for each text and image pair.

Sidebar_Unleveled_small.png
Sidebar_Leveled_small.png

Note

To make this work in HTML output, you have to assign the sidebar a role, like "sidebar-css" and target that role with your CSS. Make sure to enable the role attribute as "class name" in the layout for the HTML / HTML5 configuration. Learn more about Role Attribute Values.

This example code will give the text 75 % of the sidebar width.

.sidebar-css {
  padding: 6pt;
  width: 75%;
  display: flex;
}

The instruction below shows how to level text and image for PDF output. You must publish the topic to be able to see the result.

  1. Open the topic via the The Content Manager.

    ContentManager.jpg

  2. Place the cursor where the sidebar element is to be inserted in the topic.

  3. Display the Element Context Menu by pressing:

    • Windows: Alt + Enter ⏎

    • Mac: Command ⌘ + Enter ⏎

    Element_Context_Menu_small.png

  4. Enter sidebar and select it from the menu.

  5. Add a title (optional), a para and a mediaobject by using the Element Context Menu.

  6. Select the sidebar in the Element Structure Menu below the toolbar.

    Sidebar_GoToElement_small.png

  7. Select Go to element.

  8. Add the attribute role to the sidebar element.

    Sidebar_Role_to_level_image_and_text_small.png

  9. Enter the value column-count: 2; column-gap: 10pt.

  10. Select Save. Save icon.

In this section: