iOS 7 status bar with AppBuilder windows client

[Jeelig]

Hi,
I'm using AppBuilder windows client for my iOS application (with phonegap, of course) and in fact I'm not using ION, but my own Apple License to build the native app on the mobile.
My problem today, is that I would like to have the iOS 7 status bar style, but none of the options available in the iOS properties of icenium seem to work.
I tried them all and the app still have like a iOS6 and lower header look.
What can I do to make it work?
Check attachements to see what I'm talking about

[Jeelig]

Anybody? Am I the only one having this problem?
If you know what to do, let me know ...

[domiSchenk]

what i did for my header to be colored is:

under Properties > Plugins > Core Plugins > Enabled Statusbar plugin

then i set  new kendo.mobile.Application(document.body, { statusBarStyle: 'black-translucent'  });

and with setting the header color:
.km-on-ios .km-header .km-navbar
{
    background-color: #10C4B2;
}

it worked for me.

If there is a still a black boarder just add a margin of -20px (i think)

[Jeelig]

Thanks a lot.
But i guess this is for Kendo Mobile ?!
I'm not using Kendo for my apps

[domiSchenk]

ah didn't see that you're not using kendo :-D
you are using jquery?

maybe this plugin: https://github.com/phonegap-build/StatusBarPlugin will help you

[Jeelig]

I tried the margin-top -20px. The header is pulled up, but still behind the black status bar

[Jeelig]

OK, I'll try this plugin and let you know

[Jeelig]

As StatusBar plugin is part of AppBuilder (since 3.2) all I had to do to solve the problem was to use this in the deveiceready event :
StatusBar.overlaysWebView(false);
+
StatusBar.backgroundColorByHexString("#FF0000");
or 
StatusBar.backgroundColorByName("red");

Hope it can be usefull to people facing the same problem in jquery.

Ref : http://blogs.telerik.com/appbuilder/posts/13-11-07/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7

Thanks again