+

Search Tips   |   Advanced Search

Customize the new theme

Customize the new theme in Connections. The new theme is a packaged theme, available as a catalog offering on Greenhouse, and included by default in Connections 5.0. Once enabled, it can be customized through the Connections customization directory.

Enable the new theme, for more information, see Customize themes.

To customize the new theme, place the files shown under these directories.

  1. To override the theme, place the styles into these files:
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/defaultTheme.css 
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/defaultThemeRTL.css

  2. To add new styles to the theme, place the styles into these files:
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/custom.css
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/customRTL.css

  3. To override the application styles, place the styles into these files:
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/applications/activities.css
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/applications/activitiesRTL.css
    .
    .
    .
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/applications/wikis.css
    <CONNECTIONS_CUSTOMIZATION_PATH>/themes/gen4Theme/applications/wikisRTL.css

    The new theme does not support bidirectional (bidi) languages. However, we can add right-to-left (RTL) styles through customization.

  4. To customize image.png referenced in the following example rule:
    .lotusui30.lotusMain { 
                      background-image: url(path/to/image.png);
    }

    Place a custom copy in the folder:

    <CONNECTIONS_CUSTOMIZATION_PATH>/javascript/com/ibm/social/gen4/theme/css/
    defaultTheme/path/to/image.png

    IBM Connections parses the stylesheet, and resolves URLs of resources linked via url() CSS properties by rebasing them. In the example, IBM Connections parses and rebases this as:

    .lotusui30 .lotusMain { 
                       background-image: url("/connections/resources/web/com.ibm.social.gen4.theme/css/
    defaultTheme/path/to/image.png?etag=<version_stamp>");
    }


Results

The new theme is customized.


What to do next

To link to resources external to Connections in the stylesheet, and avoid that Connections rebases the paths, see:IFIX FOR PMR 42629,122,000.


Parent topic:
Add a custom theme to Communities