Creating Tenant-Specific Theme CSS Files


The tenant_theme.css file contains the .bip-logo class that identifies the address of the tenant workspace logo file in the background-image property. It also contains any additional customizations that alter the look and feel of the default portal frame and features.

To ensure that the symbolic IBFS Path in the main portal connects to the tenant_theme.css file for every tenant, you must save it in the Hidden_Content folder of each tenant workspace and include this folder in the full symbolic IBFS path. You must also use the same name for each tenant workspace theme file, tenant_theme.css.

You can use the Page Designer to create this file interactively as described in How to Configure Customized CSS Theme Files for Tenant Workspaces Using the CSS Editor. As an alternative, you can use the text editor to create a CSS file and enter the classes you wish to add or modify. If you use this method, be sure to open the text editor from the Hidden_Content folder within the tenant workspace, and select the CSS format, and ensure that all entries conform to syntax requirements and include valid data.

Procedure: How to Configure Customized CSS Theme Files for Tenant Workspaces Using the CSS Editor
 

  1. In the Workspaces view, in the Resources tree, expand the tenant workspace that requires a customized theme.
  2. In the content area Action bar, select the Other tab and then select Collaborative Portal to launch the Portal Designer.
  3. On the Layout tab, in the Portal group, click the Theme button splitter, then click Launch CSS Editor to open the Styling dialog box.
  4. On the toolbar, click the Show the Element Inspector button, and then click the Inspect elements style information button.

    Your cursor changes to a crosshair. You can also click the Highlight inspected element button to pinpoint the element that you want to style more easily.

  5. Click a portal element that you want to style. In this example, click the top banner.

    The Classes field is automatically populated with the correct CSS class name for the selected element, in our example bip-banner-top.

    Note: You can also select elements from the Elements drop-down list, or, if you know the CSS class name of the element, you can type it in the Classes field. You can also use the Search field to search for a CSS class using key words.

  6. In the CSS File Editor, click the Add Class text, type the name of your selected CSS class, preceded by a dot, and then press Enter.

    In our example, type .bip-banner-top

  7. Click the Add property text below the class and type the name of the property and the value to assign to it, separated by a colon (:). Type a semi-colon (;) at the end of the statement, and then press Enter.

    In our example, type background-color:#56b7e6;.

    The banner instantly changes color to the specified hue, as shown in the following image.

    The styling dialog box displaying the class and property for a blue background on the portal header and the portal display with a blue header.

    Note: If you have entered an invalid CSS class or attribute, the browser rejects it and the change is not reflected in the portal appearance. Any hexadecimal color value you enter is automatically converted into the equivalent rgb value.

  8. Repeat steps 5 through 7 for each component of the portal theme that you must customize for this tenant group.
  9. When your customizations are complete, add the .bip-logo class to the tenant_theme.css file as described in the following steps.
    1. In the CSS File Editor, click the Add Class text, type bip_logo, preceded by a dot, and then press Enter.
    2. Click the Add property text below the class name and enter:
      background-image:url(“Images/logofilename”)

      Where

      logofilename

      Is the name of the image file that contains the logo.

    3. Click the Add property text below the entry and add the following properties and their values:

      background-position:center;

      background-repeat:no repeat;

      height:45 px;

      width:150 px;

      For example:

      .bip-logo

      {

      background-image:url(“Image/CompanyOneLogo.png”);

      background-position:center;

      background-repeat:no repeat;

      height:45 px;

      width:150 px;

      }

  10. Click the Save button in the Styling dialog box.

    If a custom CSS file is already applied to this portal, your changes will be saved in that file. If the changes are new, the Save As dialog box opens.

  11. Navigate to the Hidden Content folder of the tenant workspace, name your new CSS file, tenant_theme.css and then click Save.
  12. Close the Styling dialog box.
  13. Click Save to save the file as tenant_theme.css in the Hidden_Content folder, and close the Portal Designer.
  14. Repeat this procedure for each tenant workspace.