Styling Pages

When you add content to a page, it is automatically placed in a container. To move and resize the content item, move and resize the container into which it was placed by dragging the container or its resizing handles. You can also configure and style a container by selecting it on the page and then using the options on the Settings and Format tabs of the Properties panel. Note that the options for a container are separate from those for the content item inside the container. To select the container, click the container toolbar, or select a container from the Outline tab of the sidebar. Empty containers can be added to the page by selecting the Container tab on the sidebar and dragging the selected container type into the canvas. A highlighted area shows where the container will be placed.

There are several types of containers. The default container for a single item is a panel container. The panel container is a basic container type that includes a title bar and toolbar with a run-time menu, as shown in the following image.

The run-time menu provides the ability to refresh the content in the container by default. If the content currently visible in the container uses the AHTML output format, additional In-Document Analytic run-time options are added to this menu. For more information about In-Document Analytics, see Overview of In-Document Analytics. You can also add custom options to the run-time menu and to the container toolbar using embedded JavaScript. For more information, see Enhancing Pages With Custom JavaScript.

To add multiple items, such as charts, reports, and images, to a single container, use the tab, carousel, or accordion container types. These container types include the same features as the panel container, as well as controls to navigate between multiple content items. You can add another content item to a container by selecting the Content tab on the sidebar, navigating to an item, and dragging it onto the existing container. You are given options to add the new item to a new tab, panel, or slide, or replace the visible, existing item in the container.

In a tab container, navigate between items using the tabs below the title bar. You can double-click the text in a tab to change it, and right-click a tab to delete, duplicate, or reorder it. A tab container is shown in the following image.

A carousel container allows you to switch between content items by clicking a dot at the bottom of the container, or by clicking arrows that appear when you point to the left or right side of the container. When creating a page, right-click a carousel container to duplicate, reorder, or delete a slide. You can set a carousel container to automatically cycle between content items using the options described in Automatically Advancing Slides in a Carousel Container. A carousel container, with navigation arrows, is shown in the following image.

Accordion containers place content in collapsible panels. You can expand and collapse items in an accordion container by clicking a panel label. When creating a page, right-click an individual panel in an accordion container to rename, reorder, duplicate, or delete the panel. An accordion container is shown in the following image.

Other types of containers serve more specific purposes. The grid container type, only available in pages assembled from existing content, can be used as a filter container, as an alternative or in addition to the filter toolbar. Once you add filter controls from you content to a page, you can drag them from the default location in the filter toolbar into the grid control. Select the filter bar within the panel from the outline, and then select the Format tab to change the number of columns in the grid container. You can also drag a text label or submit button to the grid from the Control tab on the sidebar.

You can use a panel group container to keep a set of vertically arranged panels together when responsive folding occurs as the size of the page changes. To use a panel grid container, add it to the page, then drag new containers, content items, or fields into it. For more information, see Adding Panels to a Responsive Container.

A link tile container allows you to display a content item or image on a page that can be clicked to access additional, outside content. Drag the link tile container onto the page, then, from the Settings tab, use the link tile Background, Content, Attach all parameters, and Target properties, to set the displayed and target content, and configure how the link tile behaves. For more information, see Linking to External Content From a Page.

You can use the Explorer widget to provide access to the Workspaces view of the WebFOCUS Hub or WebFOCUS Home Page. This allows anyone accessing the page, or a portal containing the page, to open and run content items and create new content, depending on their privileges. In the Explorer widget, you can navigate through workspaces, folders, and content items from the Resources tree and Content area, and create new content using options in the +Content menu. For more information, see Providing Access to Content Items and ibi WebFOCUS Tools.

Right-click any type of container to access a shortcut menu of options. These include the ability to refresh the container content, change the title of the container, access the Settings or Format tabs, duplicate the visible content item, change the container type, or delete the container. If you select multiple containers, you also have the option to combine them into a tab, accordion, or carousel container.

You can resize content on a page, at any time, using the sizing handles and the shaded placement area that appear on the canvas. When you hover over a container on the canvas, a series of handles appear. Drag a handle in the direction that you want to resize the item, as shown in the following image.

The content container snaps to the nearest row and column when you resize it. To change the number of columns in a section on the page, allowing more granular container widths, select a section, open the Format tab, and select an option from the Number of Columns area. 12 is the default. You can also change the amount of space between containers by selecting the entire page and typing a size for the Margin property, on the Format tab.

The Properties panel displays the properties for the element that is selected. To access container properties, select a container from the canvas or outline. To access section properties, click the grid inside the canvas, or select a section from the outline. To access page properties, click the page header or the toolbar, or select a page from the outline. If the page header and the toolbar are hidden, you can also access page properties by clicking the canvas outside a grid section.

The following properties are available when you select an entire page.

Settings tab:

• ID. Contains a read-only unique CSS identifier.
• Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code.
• Show page heading. Toggles between hiding and showing the title in the header.
• Show page toolbar. Toggles between hiding and showing the page toolbar.
  • Show page refresh. Toggles between showing and hiding the refresh button on the page toolbar.
  • Show export. Toggles between showing and hiding the Export menu on the page toolbar. You can export a page as a PDF or as a .png image. Select just the PDF or just the Image check box to make just one of these export options available from the page, in which case the Export menu turns into an Export button.
• Include Page Filters. Select this check box to add a filter toolbar to the page, even if no filters have been added yet. Clear this check box to remove the filter toolbar.

  If Include Page Filters is selected, you can select one of the following options to change the position of the filter toolbar:

  • Below Header. The filter toolbar is placed below the page toolbar and header. This is the default.
  • Above Header. The filter toolbar is placed above the page toolbar and header.
  • Left Position. The filter toolbar is aligned vertically along the left side of the page, below the page header.
  • Modal. The filter toolbar is accessible in a modal window overlaid onto the page. Click the Show filters button on the page toolbar to open the modal window and make filter selections.

Format tab:

• Theme. Allows you to select a theme for the page. The default options are Designer 2018, Light, Midnight, and Vivid. Administrators can configure additional themes that will be available to users from this property. For more information, see Applying Themes and Styles to Pages.
• Margin. Controls the size of the margin between the border of the page and the content.

  Note: If the margin property is set to 0, you cannot select a section on the page from the canvas or access the section shortcut menu options. As a workaround, change the margin property value to 20px temporarily to gain access to the section and its options.

• Maximum width. Controls the maximum width of the page.
• Page Heading Style. Provides a selection of typeface styles for the page heading. Additional header text formatting can be done using CSS. For example, you can assign a class to the page and use the font-family property to change the header text font.

The following properties are available for sections.

Settings tab:

• ID. Contains a read-only unique CSS identifier.
• Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code.
• Collapsible. Toggles between collapsible and noncollapsible modes of the selected section.

Format tab:

• Style. Allows you to choose a style for the selected section, or select Default to use the theme selected for the page.
• Row height. Sets the height of the section that is currently selected on the canvas. The default value is 60px.

  Note: Changing the row height does not change the margin, which can be configured on the page level.

• Number of Columns. Allows you to change the number of columns in a section, enabling more granular panel widths. Panels snap to the nearest column and row when you resize them. 12 columns are used by default, and 28, 45, and 80 column options are also available.

The following properties are available for containers.

Settings tab:

• Container Settings. Provides access to the following properties.
  • ID. Contains a read-only unique CSS identifier.
  • Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code.
  • Show title. Toggles between hiding and showing the title.
  • Show toolbar. Toggles between hiding and showing the container toolbar.
  • Show On. Allows you to hide the selected container or item from displaying on specified devices. The options include desktop, tablet, and mobile.
  • Autoplay interval. Available for carousel containers. Allows carousel slides to automatically cycle based on the selected interval, in seconds. When set to 0, autoplay is disabled.
  • Rerun content. Available for carousel containers. When the Autoplay interval is set to a value higher than 0, the Rerun content option allows you to refresh the content on each slide of a carousel container when it appears. If Rerun content is not enabled, then the content on each slide only loads the first time it appears.
• Container Customization. Provides options that allow users to change the content in a page at run time. Includes the following properties.
  • Lock container. If disabled, allows users to change content in the panel at run time. This property is enabled by default.
  • Select content from. Allows you to set the initial directory that users will see when they click the Add content button.

    Note: To see the full value displayed in the field, widen the Properties panel area by clicking the separator and dragging it to the right.

  • Lock path. When enabled, limits the content selection area to the directory that is specified in the Path property. This property is enabled by default.
  • Flatten list. If enabled, hides the folder hierarchy and the breadcrumb trail within the directory that is specified in the Path property. This property is disabled by default.

    Note: This property is especially useful if you want to display different widgets to different users based on their roles. For example, you can create a series of subfolders with content and then apply security rules to show and hide these subfolders from users based on their group membership. Then you can configure the Path property to display the parent of these subfolders and flatten the list. Now each user can only see the widgets they are authorized to see in a simple list without any folders to navigate.

  • Hide tags. If enabled, hides tag buttons in a flattened list. This property is disabled by default. It remains inactive when the Flatten list property is disabled.
  • Initial view. Determines the initial view of the directory that users will see when they click the Add Content button. The options are Grid and List.

    Note: Users can change the view at run time inside the Select Item dialog box.

Format tab:

• Style. Allows you to choose a style for the selected container or item.

The following options are available for content items in a page assembled from existing content. New content items in a page provide standard content creation options, in addition to these.

Settings tab:

• Content Properties. Provides access to the following properties.
  • ID. Contains a read-only unique CSS identifier of the content item. You can reference this ID in custom JavaScript and CSS code as well as drill-down targeting procedures.
  • Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code as well as drill-down targeting procedures.

Format tab:

• Content Format. Provides access to the following property.
  • Theme. Select a theme to apply to the content item. You can explicitly select a theme, or have the item inherit the theme used in the page. When the item is part of a page assembled from existing content, you can also select Use content theme to use the theme originally applied to the item, ensuring that it does not get overwritten by the page or portal theme. For more information, see Applying Themes and Styles to Pages.

Using a carousel container is one way to put multiple charts, reports, and other content items into a single container. Carousel containers include an unobtrusive control that allows users to cycle through the items added to it, as shown in the following image.

Unlike tabbed or accordion containers, carousel containers also include the option to autoplay the content within them, allowing you to show all of the content in the carousel container without requiring user interaction.

To enable autoplay for a carousel container, select the container and open the Settings tab on the Properties panel. The Autoplay interval and Rerun content properties are available in the Container Settings section. To enable autoplay, set the Autoplay interval to a value higher than zero (0) to enable autoplay. The Autoplay interval is the amount of time, in seconds, that each slide is shown before advancing to the next slide.

When the Autoplay interval is set, the Rerun content option becomes available. This option is turned off, by default. When enabled, the content on a slide of the carousel container refreshes each time it is displayed. When Rerun content is not enabled, the content on each slide only loads the first time it is displayed, and it is not refreshed unless manually prompted from the menu on the container toolbar.

How to: Apply a Theme to a Page Apply Styles to Sections Apply Styles to Containers Create a Custom Theme

While customizing your page, you can apply themes and styles to various page elements. The general theme of the page is defined by the Theme setting, which you can configure in the Properties panel, on the page level. A theme affects the look of the entire set of elements on the page, including colors, opacity, and typeface styles. Themes also dictate the color schemes available as styles on the Format tab when editing sections, filters, or containers.

By default, the theme selected for a page is passed on to content in the page. You can select content items inside a container and change the theme for each one individually from the Format tab. If the content item was added to the page from the Content tab, you can additionally choose to use the original theme of the content item, instead of inheriting the page theme or selecting a specific theme to use.

There are four themes that WebFOCUS Designer offers:

• Designer 2018
• Light
• Midnight
• Vivid

To add a theme to this list, create a folder in the Global Resources area, in the Custom folder within the Themes folder. In that folder, you can add a custom StyleSheet to use with charts and reports, and a custom CSS file to use for pages. The .sty file and .css file must both be named themes.

Note: To facilitate the creation of a custom theme, you can copy and modify properties from one of the themes included with WebFOCUS. This makes it easy to identify the default classes used in a WebFOCUS Designer page.

Once you select a theme, you can further modify it by configuring styles. You can also save your unique combination of a theme and styles as a custom theme.