CODEWITHSUNDEEP
csstelerikoverridingkendo-mobileicenium
Eddie Prislac
Eddie Prislac

Reputation: 145

overriding default kendo-ui styles in icenium

My goal is to style a kendo-ui mobile app in Icenium to look the same on each device it's used on. Current targets include Android and IOS.

My stylesheet is the last link in the head section, to ensure that it overrides any other styles in the app. It hasn't helped, though, as telerik's specificity nightmare has me jumping through an insane number of hoops and getting very little accomplished.

I am at my wits end- I have followed the tutorial on http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium, and so far, have been able to override very few styles.

for instance:

.km-ios #tabstrip-scan .km-navbar
{
    background-image:none;
}

should be all I need to override for the default ios titlebar, according to Telerik's tutorial. However, it gets rid of the background image, but leaves me with a background color, which it will not allow me to override (it also will not allow me to alter the text color). In other words:

.km-ios #tabstrip-scan .km-navbar
{
    background-image:none;  // works
    background-color: #d9d1ba; //doesn't work
    color: #333333;  //doesn't work either
}

I have the same problems with their button classes:

.km-ios .km-button 
{
    height: 32px; // works
    width: 100% // doesn't work;
    background-image: none; // doesn't work
}

and with inputs:

.km-ios input[type=text]
{
    width:100% // doesn't work
    border-radius: 3px; // doesn't work
    -webkit-border-radius: 3px // also doesn't work;
}

At one point, I even commented out the entire kendo default stylesheet, and was still getting the kendo default styles when I ran the app in the virtual machine.

How can I override the kendo-ui-mobile defaults and style the app how I want it to look (the same on every device), rather than how Telerik thinks it should look (closer to native ui)?

Upvotes: 2

Views: 3941

Answers (2)

DropHit
DropHit

Reputation: 1724

You might reference my post here Kendo mobile template styling/formatting not working - i was having a similar issue and my post might help.

Upvotes: 1

Bundyo
Bundyo

Reputation: 2193

Force the platform to a specific one and style it with the Kendo UI Mobile ThemeBuilder here:

http://demos.kendoui.com/mobilethemebuilder/index.html

Upvotes: 3

Related Questions