Adding Bootswatch Themes to Bootstrap4XPages

Last week I started playing with Bootstrap4XPages. It’s been around for a few months now and is part of OpenNTF Essentials. But I finally got round to playing with it.

Although having lots of whitespace seems in vogue for websites, personally I don’t like that. So one of my first steps was to change the theme. Fortunately, Bootswatch allows a host of themes to just lay on top of Bootstrap, in the same kind of way versions of OneUI have various themes.

Tim Tripcony did a NotesIn9 some time ago using Bootstrap and Bootswatch themes from a CDN, rather than Bootstrap4XPages. So my first approach (because this was just for personal playing around) was to follow his steps to add the CDN reference as a stylesheet resource.

However, the theme did not render. Looking at the source, it was apparent why. Whether I added the CDN as a resource to a theme or on a Custom Control, it was still output as the first stylesheet resource on the XPage. Thus the specific settings were overwritten by the generic Bootstrap theme.

The solution was to download the relevant Bootswatch theme from http://bootswatch.com/. It’s just a case of selecting the theme you wish to use from the Themes dropdown, and from the resulting page, clicking on the Download menu option and choosing bootstrap.min.css.

That can then be pasted into a StyleSheet resource in your NSF.

There is one change that needs to be made, however. Because the Bootstrap theme is in a plugin but the relevant Bootswatch theme is in the NSF, there is a reference to glyphicons that will fail. As far as I can tell, it shouldn’t be needed in the Bootswatch theme, because the same setting is already in the Bootstrap theme, so I just removed the following piece of code:

@font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')}

Then it’s just a case of enabling the stylesheet for the application in the same way you would for anything else.

Speaking to other XPages developers, the consensus was that using a CDN was not a good method for an enterprise application, because there are no guarantees that it will work for all users – they may not have external web access, access may go via a proxy etc.

Thanks to Mark Leusink for confirming I wasn’t doing something stupid when it wouldn’t initially work!