Intec are delighted to be Platinum Sponsors at ICONUK on 12th September at IBM Southbank. Find out more and Register.
 

Blog

Adding Bootswatch Themes to Bootstrap4XPages

  |   Blog   |   3 Comments

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!

AUTHOR - Paul Withers

Paul Withers has been an IBM Champion since 2011, has been an OpenNTF Board Member since 2013, has worked with XPages since 2009, co-authored XPages Extension Library and was technical editor for Mastering XPages 2nd Edition. He is one of the developers on OpenNTF Domino API as well as contributor to a variety of other OpenNTF projects.

3 Comments
  • Timothy Briley | Apr 8, 2014 at 3:27 am

    CDN?

    • paulwithers | May 6, 2014 at 10:36 pm

      Content Delivery Network, a remote repository for commonly used CSS, JavaScript and other code

  • Keith Strickland | Apr 8, 2014 at 11:11 pm

    Content Delivery Network. Instead of defining the path to a css file or js file something like /bootstrap.min.css (from your nsf) you would use something like http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Post A Comment