Styling Pages With Custom CSS


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.

To specify a CSS class for an object on a page, select the object and, on the Properties panel, type a class name into the text box for the Classes property. You can specify multiple classes for an object by separating the class names with spaces, and you are encouraged to use the same class names for multiple items on the page. When you assign attributes to a class in the CSS tab, they will affect all elements on the page that are assigned to that class.

Procedure: How to Change the Color of a Panel Using CSS

You can change the background color of a panel by assigning a class to the panel and then adding the background-color attribute to the class using CSS.

  1. Open WebFOCUS Designer. On the WebFOCUS start page, click the plus menu and then click Create Visualizations, or, on the WebFOCUS Home Page, click Visualize Data.

    WebFOCUS Designer opens in a new browser tab.

  2. Select a workspace and a data source available from that workspace.

    Once you select a data source, WebFOCUS Designer loads with options to create a single content item.

  3. Click the Add visualization button to transform the visualization from a single content item to a page.
  4. Optionally, create new content in the visualization and add new containers to the page for additional content.
  5. Select a container on the page.
  6. On the Settings tab of the Properties panel, in the text box for the Classes property, type a class name of your choice, as shown in the following image.


    Properties panel showing panelclass as the Class

  7. Click Outline on the sidebar to display the visualization outline.
  8. Click CSS.

    The CSS text editor opens.

  9. Add a CSS declaration to change the background-color attribute for the class used by the panel.
    1. Reference the class name that you specified in the Classes property.

      Type a period (.) followed immediately by the class name, then an opening curly bracket ({), and press the Enter key.

      The closing bracket is added automatically.

    2. Within the brackets, type background-color, followed by a colon and then a color string.

      For example, to make the color of a panel, for which panelclass is the value of the Classes property, to a bright blue, you could use the following CSS declaration.

      .panelclass {
    background-color: rgb(0,180,240);
}
  10. Save the visualization and close WebFOCUS Designer.
  11. Run the visualization from the WebFOCUS Home Page.

    The custom CSS is applied to the specified container.