Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    Editing and Configuring Page Elements

    Creative Studio provides a great number of styling options to ensure you can meet your branding guidelines and create engaging and useful information guides. The styling options provide an easy to use interface for non-technical staff by including element-specific styles. For more technical and CSS-skilled staff, Creative Studio includes out-of-the-box W3 CSS options and custom-build, page-specific classes.

    Creative Studio presents many features and options for editing your pages, from a simple drag-and-drop interface and style changes to comprehensive code injects and transformation features.

    Editing Content

    To edit content in your page, select the element that you want to edit. An edit menu appears at the top of the element on the right.

    edit_component_menu.png

    The options in the element edit menu are, from left to right:

    • Select the parent element of this element.
    • Move the element by clicking and dragging this icon.
    • Duplicate this element.
    • Remove this element.

    If you select the text of an element that lets you edit text, a text editor menu appears at the top of the element (on the left).

    edit_text_menu.png

    The options are:

    • Bold
    • Italics
    • Underlined
    • Strike through
    • Create a link element using the selected text

    Use Cases

    Duplicate a table row
    1. Select a cell in the table.
    2. Select the up arrow to extend the selection to the table row.
    3. Select Duplicate.
    Edit text
    1. Select the text element.
    2. Double-click the element to enter text-edit mode.
    3. Edit the text.
    Move a map below a certain text
    1. Select the map.
    2. Click (and keep clicked) Move and drag to the desired position in the page.

    Using the Style Settings

    In addition to simple editing using the in-place menus described above, you can comprehensively format every element using the style settings menu.

    By applying CSS classes to elements, you can easily stylize multiple components simultaneously. Style changes that you make are saved in all classes that you currently have selected, and therefore affect all elements to which these classes are applied. You can change a single element by creating a new class that is applied only to that element (or by not selecting any classes when you make your changes).

    To open the style settings menu:

    Select the style icon from the tools menu.

    tools_menu_with_style_highlighted.png

    The menu also appears when the component menu is currently visible and you select an element.

    The menu includes the following actions and areas.

    State selector CS-Stylesheets-State.png

    Select the state that you want to edit. If you do not select a state, the changes you make in the style settings menu affect all states. If you select a specific state, the changes you make affect only the selected state. The states are:

    • Hover - Styling for when the end-user hovers over the element (only relevant for devices in which the end-user can hover).
    • Click - Styling for when the end-user selects or taps the element.
    • Even/Odd - Styling for tables and repeating elements.
    Classes CS-Style-Classes.png

    This box contains the CSS classes that are applied to the current element. Creative Studio comes included with the following CSS libraries. You can apply additional existing classes (see Using Style Sheets) or create a new class (select the +).

    When making any style changes on this page (see below), you are actually changing all of the classes selected in this box. Therefore, any changes you make affect all elements that also have the selected classes applied to them. To change only this element, create a new class just for this element and ensure that only this class is selected.
    Component Settings CS-Style-ComponentSettings.png

    Element-specific settings. For the specific settings available for each element, see Adding Page Components..

    The remaining sections provide a simple interface to setting CSS properties for elements. Some familiarity with CSS is helpful (see W3 Schools), but you can play around with the settings and see the results in the WYSIWYG editing pane. Reminder: any changes you make affect all elements that also have the selected classes applied to them.
    General CS-Style-General.png

    Set the following options for positioning.

    • Float
    • Display
    • Position
    • Top, Right, Left, Bottom
    Dimension CS-Style-Dimension.png

    Set the following options for sizing, margins, and padding.

    • Size (width, height, max width, min height)
    • Margin
    • Padding
    Typography CS-Style-Typography.png

    Set the following options to configure font elements.

    • Font family
    • Font size
    • Font weight
    • Letter spacing
    • Color
    • Line height
    • Text align
    • Text Shadow
    Decorations CS-Style-Decorations.png

    Set the following options to configure the element's border.

    • Border radius
    • Background color
    • Border radius
    • Border
    • Box shadow
    • Background properties (image, position, repeat, attachment, size)
    Extra CS-Style-Extra.png

    Set the following transition options for the element.

    • Transition
    • Perspective
    • Transform

     

    • Was this article helpful?