Skip to end of metadata
Go to start of metadata

In release 17 of the XPages Extension Library, a new theme was added to the Bootstrap plugin, namely the "Bootstrap3_blank.theme". The new “blank” theme provides all of the necessary definitions for an XPages Bootstrap theme except for the Bootstrap CSS and Javascript files. This means that application developers can easily insert their own custom Bootstrap build by extending the blank theme.

Unlike the two existing themes, "Bootstrap3.theme" and "Bootstrap3_flat.theme", this new theme is not visible in the theme dropdown list in Domino Designer. The reason for this is that this theme is considered to be a theme for advanced use cases and is unlikely to be one that is used commonly by XPages application developers. Also, by itself, this theme will not work out of the box since it is missing the Bootstrap resources and requires some extra steps to use it properly.

The steps for using the blank theme are as follows:

  1. Create a custom build of Bootstrap.
    1. On the Bootstrap website at http://getbootstrap.com/customize/, you can easily customize your own Bootstrap build, by altering many of its default properties and components. Then click on “Compile and Download” to download your custom Bootstrap build.
    2. Alternatively, if you fork the Bootstrap git repository, you can locally generate your own custom build. See the following instructions on the Bootstrap website for more info: http://getbootstrap.com/getting-started/#grunt.
  2. Add your custom built Bootstrap files to your NSF. Specifically you will need to add these files, though some are optional: 
    1. bootstrap.min.css (required)
    2. bootstrap.css (optional)
    3. bootstrap-theme.min.css (optional)
    4. bootstrap-theme.css (optional)
    5. bootstrap.min.js (required)
    6. bootstrap.js (optional)
  3. Create a new theme in your application (for example, customBootstrap3.theme).
  4. Set your theme to extend `Bootstrap3_blank` (see Example 1 below).
  5. Add the bootstrap resources you require to the theme (see Example 1 below).
  6. After the bootstrap css file(s), you need to add two other CSS file references. One to the "dbootstrap.css" file and the other to the "xsp-mixin.css" file (see Example 1 below). It is important that these CSS files are loaded after the bootstrap CSS and in the order shown below. This is so that the CSS specific to the XPages controls will be applied correctly.

Example 1. A theme that extends the “Bootstrap3_blank.theme”

    <theme extends="Bootstrap3_blank" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
      <resources>
        <styleSheet href="/bootstrap.min.css"></styleSheet>
        <script src="/bootstrap.min.js" clientSide="true"></script>
        <styleSheet href="/.ibmxspres/.extlib/responsive/dijit/dbootstrap-0.1.1/theme/dbootstrap/dbootstrap.css"></styleSheet>
        <styleSheet href="/.ibmxspres/.extlib/responsive/xpages/css/xsp-mixin.css"></styleSheet>
      </resources>
      <control>
        <name>ViewRoot</name>
        <property mode="concat">
          <name>styleClass</name>
          <value>xsp dbootstrap</value>
        </property>
      </control>
    </theme>

7. (Optional) If you want to include the file "bootstrap-theme.min.css" or "bootstrap-theme.css" in your custom theme, which provide additional Bootstrap styling, then you need to add the desired CSS file and change the styleClass property of the ViewRoot in your custom theme. This is to ensure that it works correctly in your XPages application.

Example 2. Theme that uses “bootstrap-theme.min.css”

    <theme extends="Bootstrap3_blank" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
      <resources>
        <styleSheet href="/bootstrap.min.css"></styleSheet>
        <styleSheet href="/bootstrap-theme.min.css"></styleSheet>
        <script src="/bootstrap.min.js" clientSide="true"></script>
        <styleSheet href="/.ibmxspres/.extlib/responsive/dijit/dbootstrap-0.1.1/theme/dbootstrap/dbootstrap.css"></styleSheet>
        <styleSheet href="/.ibmxspres/.extlib/responsive/xpages/css/xsp-mixin.css"></styleSheet>
      </resources>
      <control>
        <name>ViewRoot</name>
        <property mode="concat">
          <name>styleClass</name>
            <value>xsp dbootstrap bootstrap-theme</value>
        </property>
      </control>
    </theme>

8. In the xsp.properties of your application, now select your custom theme in the application theme dropdown.

  • No labels