XPages and Me

My Journey into XPages Development

Tag Archives: Themes

Diving into Bootstrap and Font Awesome – Part 5: Checkbox Group

If you want to style your XPages Checkbox Group with Bootstrap, simply wrap it inside a div with the class “checkbox”

Read more of this post

Dabbling in Bootstrap and Font Awesome Series Overview

I’ve pretty much wrapped up my “Dabbling in Bootstrap and Font Awesome” series, so, I wanted to give you a list with links to all the topics covered:

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 8: DB Profile and Theme

As I’ve mentioned in my previous post, I have a DB Profile document where I can set the Bootstrap navbar type, navbar look, navbar container and the content container I’d like to use across my whole application. It also contains a setting for the Bootstrap field size (read more here) and in this post, I am going to explain how I reference and use that setting in my theme.

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 3: Living on the (IE) edge

As I mentioned in Part 2, to make IE8 / IE9 play nicely with Bootstrap / Font Awesome, you need to add additional JavaScript files. But that is not all. You’ll also need to make sure that IE8 / IE9 is not running in compatibility mode.

So, yours truly did what any good developer would do, who has to work with IE8 / IE9, and added a meta tag to my theme that would command IE to always run as its latest version with IE=edge, which looked something like this:

<resources>
  <metaData>
    <httpEquiv>X-UA-Compatible</httpEquiv>
    <content>IE=edge</content>
  </metaData>
</resources>

However, IE wouldn’t listen even though I commanded it to do as I command. I also tried to put the following code into the “beforeRenderResponse” event of my XPage, but no cool Font Awsome icons and the fields on my form didn’t look right either:

if (context.getUserAgent().isIE()) {
    var response = facesContext.getExternalContext().getResponse();
    response.setHeader('X-UA-Compatible', 'IE=edge');
}

It was starting to drive me nuts, to put it politely and I was just about to give up on Font Awesome, until I noticed this while using IE8’s Developer Tools:

Read more of this post

Dabbling in Bootstrap and Font Awesome Part 2: The order of things – how to set up your Theme

When setting up your theme in order to use Bootstrap, the order in which CSS and JavaScript files are getting loaded is important. This is especially true when using Bootstrap with IE8 / IE9, as this requires additional JavaScript files, so, IE8 / IE9 will play nicely with Bootstrap.

Note: For my applications, I didn’t use any CDN sites to load the CSS and JavaScript files. My audience might not be connected to the internet, so, I decided to download all the files needed and put them in a web resources database from where they can be referenced from any application. That way, I just have to update any CSS and/or JavaScript files in one place. But this is not important for the topic of this post, however you load your files is fine.

Also, I won’t go into detail as to how to add Font Awesome / Bootstrap CSS and JavaScript files to your application as there are already plenty of blog posts regarding these topics. Simply do a search “XPages Bootstrap” or “XPages Font Awesome” and you’ll find these posts.

The way I set up my themes (I use additional bootswatch themes) was inspired by Tim Tripcony’s video post on NotesIn9 136: Using XPages with Bootstrap 3 and FontAwesome.

Lets get started.

Read more of this post