在 icenium 中覆盖默认的 kendo-ui 样式答案

【问题标题】：overriding default kendo-ui styles in icenium在 icenium 中覆盖默认的 kendo-ui 样式
【发布时间】：2013-03-26 20:23:11
【问题描述】：

我的目标是在 Icenium 中设计一个 kendo-ui 移动应用程序，使其在使用它的每台设备上看起来都一样。当前目标包括 Android 和 IOS。

我的样式表是 head 部分的最后一个链接，以确保它覆盖应用程序中的任何其他样式。不过，这并没有帮助，因为 Telerik 的特殊性噩梦让我跳了无数圈，却收效甚微。

我束手无策-我已按照http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium 上的教程进行操作，到目前为止，我已经能够覆盖很少的样式。

例如：

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

根据 Telerik 的教程，我应该只需要覆盖默认的 ios 标题栏。但是，它摆脱了背景图像，但给我留下了背景颜色，它不允许我覆盖（它也不允许我改变文本颜色）。换句话说：

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

我的按钮类也有同样的问题：

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

并带有输入：

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

有一次，我什至注释掉了整个剑道默认样式表，当我在虚拟机中运行应用程序时，我仍然获得剑道默认样式。

如何覆盖 kendo-ui-mobile 的默认设置并设置应用程序的样式（在每台设备上都相同），而不是 Telerik 认为的外观（更接近原生 ui）？

【问题讨论】：

标签： css telerik overriding kendo-mobile icenium

【解决方案1】：

将平台强制设置为特定平台，并在此处使用 Kendo UI Mobile ThemeBuilder 对其进行样式设置：

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

【讨论】：

我明白为什么我们要强制使用一个应用程序平台，但是没有办法在直接的 css 中做到这一点吗？主题生成器不会让您编辑边框半径，并且就自定义级别而言似乎非常有限
Kendo UI Mobile 上的每个平台都由通用 CSS、图标和特定于平台的 CSS 组成。如果您有商业许可证，您将获得 LESS 部分并可以根据需要混合它们，但您需要 our fork of LESS 来编译它们。既然你用的是Icenium，我猜你没有商业授权，那么你可以得到Q1后的通用和图标CSSfrom here。您仍然需要 images 文件夹才能使用它。
感谢您的链接。感谢您提供帮助的尝试。经过进一步挖掘，Icenium 模拟器似乎直接没有应用我编写的样式 - 在调试器中查看它们之后，我编写的很多内容似乎都没有出现。（这可以解释为什么我在注释掉默认样式表后仍然获得默认的剑道样式）。这是 Icenium 中的已知错误吗？

【解决方案2】：

您可以在这里参考我的帖子Kendo mobile template styling/formatting not working - 我遇到了类似的问题，我的帖子可能会有所帮助。

【讨论】：