Sencha Touch 2.3 自定义主题皮肤,颜色

写博客园越来越懒了,只写重点部分,不明白的可以Q我。

1.当你通过Cmd生成项目之后,App\resources\sass就是我们的样式源文件

2.想自定义自己的样式分为两种方式

  扩展:这个是基于st提供的皮肤上面做修改

  新建:基于st的base主题,做自己的主题

 两者基本一样,以扩展为例

3.打开App\resources\sass\app.scss

Sencha Touch 2.3 自定义主题皮肤,颜色
// 这里是需要继承的css样式,默认是default,当然如果你要扩展其他样式可以自己选择,例如:cupertino,bb10,mountainview等等
@import ‘sencha-touch/default‘;
@import ‘sencha-touch/default/all‘;

//这里是新增主题用的
//@import ‘sencha-touch/base‘;
//@import ‘sencha-touch/base/all‘;



// Custom code goes here..
//这里写自己的css,例如:

.dataview-basic {
    width: 100%;
    padding: 15px 0 15px 8px;
    border-bottom: 1px solid #dedede;
    background-color: #fefefe;
}

.dataview-selected {
    background-color: #f7f7f7;
}

// Examples of using the icon mixin:
//这里是一些图标的配置,新增等
// @include icon(‘user‘);
Sencha Touch 2.3 自定义主题皮肤,颜色

4.在app.scss中可以加入自己的css,提高加载的效率,而不必在app.json中配置(app.json中的配置会导致app.css和custom.css加载顺序的问题,很可能或导致程序第一次加载的时候,自定义的样式不起作用)

 

5.改变主颜色,例如(button,toobar)

主颜色的配置,请到:workspace\touch\resources\themes\stylesheets\sencha-touch\default\var

var文件夹,顾名思义都是参数,我们只需要变更这里面的参数,即可解决问题。

你可以选择单改某个模块,也可以修改全局的颜色,全局的颜色配置在_Class.scss

 

6.打开_Class.scss,我想你已经一目了然了。主颜色:$base-color: #4c4c4c !default;

7.里面的说明很多了,将basecolor该成自己喜欢的。

8.编译我们的css,系统cmd到生成的app目录里面(workspace/myapp/),执行命令

compass compile resources/sass

9.大功告成,尽情品味吧

Sencha Touch 2.3 自定义主题皮肤,颜色

上一篇:表达式树基础


下一篇:Cmake的install与file命令的区别