Xpages Mobile CSS: iOS7

Question

I have an Xpages app and I want to surface some pages from that app into my iPhone App. I want the Xpages pages to look like iOS7 so the users have the same experience in the app and don't know they are not in a native app.

IBM has not updated their mobile CSS yet.

But there is some CSS that goes a long way to fixing this:

http://redpilldevelopment.com/xpages-mobile-controls-ios7-theme/

I was able to make script library in my app and then I was able to get the CSS into a page, all using the instructions on the site.

What I don't get is how to make my app use the css theme? When I view the page on my iPhone some of the page is rendered like ios7, but much is not. Do I have to match up each individual element on the page to the class in the custom css?

Answer 1

It depends on your page I guess. Not every control has a "mobile renderer". DataView does for instance but viewPanel does not. So that could be why you're seeing it fine for some things but not others.

I believe in 9.01 with the latest extension pack it's easier to override the mobile them. It had been pretty difficult before. I think that's why your linked article mentions that the iOS7 theme can't be in the Head tag.

You might need to override styles for anything that doesn't look like iOS7.