Cascading style sheets, or CSS, is a commonly used language that allows you to style different components on a page. CSS properties include font style, text color, background color, and much more. Custom CSS can be applied to specific objects on a page by specifying a CSS class for the object, and then using a class selector in your CSS code.
You can apply custom cascading style sheet (CSS) properties and JavaScript code to a page, allowing you to significantly enhance the page with countless styling options and run-time behaviors using code that you write yourself. CSS makes it easy to style different elements on a page by applying various styling properties to them, while JavaScript is a robust programming language that you can use to customize a page with dynamic and interactive features not normally available in WebFOCUS Designer.
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.
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.
You can choose to hide certain content items from smaller devices, especially when dealing with large or multi-faceted items like maps or HTML pages. When an item is hidden from a device, the other items around it re-flow into the empty space and retain the responsive layout.
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:
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.
A number of tools in WebFOCUS Designer support your efforts to apply styling to pages and page components. You can resize content, hide content from smaller devices if it interferes with a responsive layout, edit page, section and container properties, apply filters, themes and styles, and create custom templates.
You can create a page in two ways. When you create a visualization with new content using the Create Visualizations option on the plus menu of the WebFOCUS start page or the Visualize Data option on the WebFOCUS Home Page, and then add a second item to it by clicking Add visualization, it transforms from a single item into a page. Alternatively, transform a single item into a page without adding a second container by clicking Convert to page. You can then create new charts and reports directly withing the page.
Pages use containers to display multiple content items, and provide run-time options such as the ability to expand and collapse containers, navigate between items in a multi-content container, apply and clear filter selections, and even use custom functionality added using JavaScript. You can customize and style the entire page as well as sections, containers, and filter controls on the page using an intuitive set of options as well as CSS themes and custom CSS enhancements.
