Documentation Center

Changing the orientation of the graphics panel

You can orient the graphics panel for desktop display either vertically or horizontally (the default). On tablet devices, the layout of the graphics panel is always automatically adjusted based on tablet orientation. Modifying the panels.xml file associated with a publication allows you to change the relative positions of the graphics and main content panels.

About this task

By default, when displayed horizontally, the graphics panel appears above the main content panel, as in the following example.
You can use the Reorient Text and Graphics icon () on the top bar banner to toggle between horizontal and vertical display. By default, when displayed vertically, the graphics panel appears to the left of the main content panel, as in the following example.

You can modify the LiveContent\templates\FullSupport\etc\skins\Carbon\templates\config\panels.xml file to reverse the relative placement of the graphics and main content panels, that is, to cause the graphics panel to appear below the main content panel when displayed horizontally, and to the right of the main content panel when displayed vertically.

Perform the following steps to change the relative placement of the graphics and main content panels.

Procedure

  1. In a text editor, open the following file for editing:
    LiveContent\templates\FullSupport\etc\skins\Carbon\templates\config\panels.xml
  2. To display the graphics panel vertically, that is, to the right of the main content display panel, do the following.
    1. Locate the following element.
      <panel id-"mainContainer" class="containerPanel" type="container">
           ...
      </panel>
    2. Within this element, ensure that the definition of the contentPanel element appears before the definition of the graphicsPanel panel.
    3. Edit the definition of the contentPanel element to read as follows.
      <panel id="contentPanel" class="contentPanel" type="shared">
           <description>the main content container</description>
           <height>*</height>
           <width>*</width>
           <relation target="graphicsPanel" orient="v"/>
      </panel>
    4. Edit the definition of the graphicsPanel element to read as follows.
      <panel id="graphicsPanel" class="zeroHeightPanel" altcollapse="1">
           <description>a panel inside the main content container that holds a graphic and its controls</description>
           <height>*</height>
           <width>*</width>
      </panel>
    When the publication is opened, the graphics panel appears to the right of the main content panel. Clicking the Reorient Text and Graphics icon causes the graphics panel to appear below the main content panel.
  3. To restore the default and display the graphics panel horizontally, that is, above the main content display panel, do the following.
    1. Locate the following element.
      <panel id-"mainContainer" class="containerPanel" type="container">
           ...
      </panel>
    2. Within this element, ensure that the definition of the graphicsPanel element appears before the definition of the contentPanel panel.
    3. Edit the definition of the graphicsPanel element to read as follows.
      <panel id="graphicsPanel" class="zeroWidthPanel" altcollapse="1">
           <description>a panel inside the main content container that holds a graphic and its controls</description>
           <height>0</height>
           <width>*</width>
           <relation target="contentPanel" orient="h"/>
      </panel>
    4. Edit the definition of the contentPanel element to read as follows.
      <panel id="contentPanel" class="contentPanel" type="shared">
           <description>the main content container</description>
           <height>*</height>
           <width>*</width>
      </panel>
           
    When the publication is opened, the graphics panel appears above the main content panel. Clicking the Reorient Text and Graphics icon causes the graphics panel to appear to the left of the main content panel.
  4. When you have finished making changes, save and close the file, and exit the editor.