XPages Mobile Controls iOS7 Theme

Red Pill Development has contributed an XSnippet on OpenNTF  that provides the CSS for an iOS 7 theme for mobile applications developed using the XPages extension library mobile controls.

Note: With Domino 9.0 it is necessary to place the CSS in the body of the XPage (outside the Single App control) because the current mobile theme adds its CSS files at the end of the <Head>. One approach to do this:-

1) Place the link inside a custom control

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/ios7.css">
</link>

2) Conditionally render the custom control based upon the device running IOS 7.

<xc:iOS7>
<xp:this.rendered><![fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][CDATA[#{javascript:var uAgent = context.getUserAgent().getUserAgent();
return (uAgent.match("iPhone") !== null  || uAgent.match("iPad") !== null)
&& uAgent.match('OS 7') !== null || param.platform == "iphone";}]]>
</xp:this.rendered>
</xc:iOS7>

Comparison (iOS 6 v iOS 7)

IOS7

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Peter Presnell
Peter Presnell
CEO at Red Pill NOW. Strategist, technologist, blogger, presenter, and IBM Champion 2011/12. For years many companies have invested heavily in the Notes/Domino platform and I see my role as helping to find paths forward for that investment.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: