This is a migrated thread and some comments may be shown as answers.

iOS Style Customization

10 Answers 111 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Norman
Top achievements
Rank 2
Norman asked on 26 Mar 2013, 06:03 AM
1- I am trying to change the height of the NavBar a few pixels more and I don't know how to do that. Is there any documentation that could show what tag should be invoke to style the elements of the app?

2- I am also trying to edit the height of the list and I was successful doing so with:

.km-ios .km-list > li {
  line-height: 2.2em;
}


The problem is that I'm not able to edit the border-radius the same way. It is only changing the rows that are not the top nor bottom. I would like to change the rounded corner radius to to the top and bottom rows only from a list of rows.

3- How can I make my web app run in offline mode? Can it save a manifest file locally once it loads for the first time?

4- How can I remove the word "Loading"  from the spinner popup when it is loading for the next screen? I would like to only show the spinner and, if possible, how can I change the spinner sprite or gif image?

5- If I do these changes, will it affect the Android and Windows Phone version?

6- I am also curious to see if someone have done something with KendoUI similar to the Windows Phone metro style (tiles).

10 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 28 Mar 2013, 08:59 AM
Hi Norman,

Have you checked the Kendo UI Mobile ThemeBuilder already? While you can't edit the NavBar height and border-radiuses, it may help you with some of the styling required.

That said, lets go over your questions:

1. All interface elements in Kendo UI Mobile are relative and depend on the font-size to allow easy resizing. You can change the font-size of the NavBar to resize it. NavBar height is also dependent by the View Title height. So, if you change the View Title line-height, it will resize the NavBar too. Choose the one that best suits your use case.

2. The border-radius of the list items is set on the first and last item only and has a rather high specificity. To change it, try like this:
.km-ios .km-listinset > li:first-child,
.km-ios .km-listgroupinset .km-list > li:first-child
{
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

.km-ios .km-listinset > li:last-child,
.km-ios .km-listgroupinset .km-list > li:last-child
{
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

.km-ios .km-listinset > li:first-child:last-child,
.km-ios .km-listgroupinset .km-list > li:first-child:last-child
{
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


3. Kendo UI Mobile doesn't offer anything specific about that, check this article how to work with application cache.

4. Currently the loader uses a font icon for the spinner as there are issues with WebKit masks on some platforms. The image there is auto rotated. You can use a plain image like this:
.km-ios .km-loading:after
{
    color: transparent;
    background-image: url("images/icon.png");
    height: 1em;
    vertical-align: middle;
}


The text is placed in an H1 element inside the loader, remove it like this:
.km-ios .km-loader h1
{
    display: none;
}


5. The styles above use the .km-ios class which will constrain them only to iOS, so - no. Replace it with .km-root to target all platforms (though better not do it for the loading image as on WP it is handled very differently).

6. Unfortunately I'm not aware of such project.

Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Norman
Top achievements
Rank 1
answered on 29 Mar 2013, 10:43 PM
Hi Kamen:

Thanks for your excellent reply!

I have a few questions:

If I set the background-image for the .km-loading I won't be able to set an animated GIF image right?  How can I change that font icon that holds the current spinner?

How can I increase or change the font size and font type of the header (nav bar)?

Is there a way to set a splash screen for all 3 devices (iOS, Android and Windows Phone)? I was thinking on having to put a <div> only with a full size image (depending on the screen height and width of the device) and, after a timer of 3 seconds, redirecting to the first screen of the web app. But I wanted to see if there is something simpler as for iOS there is a link line that works but not on Android and WP as far as I know.

Also, is there a way to add an icon image (tile) when creating a shortcut of a web app (URL) in Windows Phone? Right now it takes a screenshot of the app and that becomes the image of the tile.
0
Norman
Top achievements
Rank 1
answered on 29 Mar 2013, 11:11 PM
I was also wondering:

1 - How can I make the Back and any button in the navBar to be a little bit bigger in height? Is it the same way as the navBar, by increasing the font size? How do I do that?

2 - How can I see the Meebo CSS provided in the KendoUI framework but using iOS?

3 - How can we customize in the CSS the background image/color, header bar (navBar) and other elements of the style for iOS, Android and Windows Phone? Let say I am Coca-Cola and I would like to make my app red in all 3 versions but keeping the UX the same as provided by KendoUI. How can I set the background color to be red on all 3 versions (or an image), the header bar to be black for iOS and the to keep the same color style among the 3 operating systems?

4 - How can I add a button in the navBar that could make a call to the GPS and display my location in the Google Maps API as well as a predefined pushpin?
0
Kamen Bundev
Telerik team
answered on 02 Apr 2013, 12:39 PM
Hi Norman,

I understand that it is convenient to ask many questions in one support ticket or thread, but this makes tracking and handling your support history more difficult and we encourage you to separate your inquiries to several threads or tickets, so that we can focus on each one of them.

Note that many of your questions are already answered in our documentation (Forcing Platform Styles or Creating Custom Icon Font) or can be handled by the Kendo UI Mobile ThemeBuilder (NavBar and buttons font-size). Other questions are not related to Kendo UI Mobile at all, but instead should be handled by PhoneGap or Icenium - the ones about the splash screens, WP tiles and GPS.

Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Norman
Top achievements
Rank 2
answered on 02 Apr 2013, 05:52 PM
Hi Kamen:

Thanks for the references and feedback. I will do the postings from now on through different threads per topic. 

Just to clarify, I won't use and don't like to use at all PhoneGap or any native wrapper. The functionality that I am asking (GPS and Splash screen) are completely web functionality for web apps that at least iOS handles without any need to be wrapped inside a native app. What I was hoping to see was more documentation on handleing this kind of things (GPS and Splash screen) for web apps and in the multiple devices. Right now, for iOS, it is just a simple line to add to the index.html to display the splash screen using the webkit format. But, to handle the diversity of screen sizes in iOS and layout format (landscape or portrait) I use a javaScript to display different images (as Splash Screen). My concern is more on how can I find a hack or trick (if KendoUI may have one) to display the Splash screen (or force the display of it) on Android devices since the OS of Android doesn't reach to the webkit line that iOS uses? I was thinking of maybe doing an initial screen with a div and then a redirect with a timer but I don't know if Kendo offers something else. In regards to the GPS, it is a great benefit that this device funcionality works on web apps (being the only thing) and it would be great if Kendo could provide some examples on how to leverage that and the google API. 
0
Norman
Top achievements
Rank 2
answered on 03 Apr 2013, 01:49 AM
Why I keep getting Invalid post content when I try to reply?
0
Kamen Bundev
Telerik team
answered on 04 Apr 2013, 10:59 AM
Hello Norman,

GPS (geolocation) support in all browsers is roughly the same and is based on the Geolocation API standard. There's no need for a wrapper for it as it is the same in every supported browser. Check this HTML5 Rocks article about it - it doesn't list IE as supported but IE10 does in fact work on that page.

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Norman
Top achievements
Rank 2
answered on 11 Jun 2013, 12:05 PM
Hi Kamen:

Here I am including the files that I am referring too.  I'm not using a tab bar but I suppose the issue doesn't have to do with how you access 2 separate map screens. When I access the first one I have no problems. When I access the second one it doesn't show up.  Take a look.
0
Kamen Bundev
Telerik team
answered on 12 Jun 2013, 07:57 AM
Hi Norman,

I'm afraid I don't understand what these files are for and how they are connected with the rest of your questions in this thread. If the files are related to the thread, can you clarify to which question in it and if they are not, can you post a new thread or a support ticket and explain your problem in detail? Thank you in advance.

Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Norman
Top achievements
Rank 2
answered on 12 Jun 2013, 10:55 AM
Hi Karen:

I post it on the wrong thread. Here is where I just posted it 

http://www.kendoui.com/forums/mobile/application/using-google-maps-in-kendoui-application.aspx#boEYOK6aG2OF1P8AAFTdxQ

Tags
General Discussions
Asked by
Norman
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
Norman
Top achievements
Rank 1
Norman
Top achievements
Rank 2
Share this question
or