plone 4的响应(和移动)主题(基于sunburst)
redomino.css3theme的Python项目详细描述
简介
响应的plone主题(基于sunburst)。
css3theme是plone 4的一个响应式(或者您喜欢的自动适应)主题,它自动适应您用来上网的设备的显示。这意味着,使用css3theme,您将拥有一个适用于市场上每个移动设备的单一主题。
屏幕截图:
< div >有用的东西
预设媒体查询最有用的屏幕大小:
< Buff行情>- 宽于980像素(桌面)
- 介于980px和650 px之间(平板电脑横向)
- 介于650px和480px之间(平板电脑纵向和手机横向)
- 窄于480px(手机图像)
javascript好东西
< Buff行情>- 用两个按钮管理plone列
- 添加了"decomment"和"dowhenvisible"。两个有用的jquery插件。 它们允许分离部分html并运行基于javascript代码的 屏幕大小
- ScrollTop:有助于在移动设备上滚动的按钮
Tinymce移动集成
< Buff行情>- 为要隐藏在移动设备中的内容添加了一个类
现代化集成(http://modernizr.com/" rel="nofollow">http://modernizr.com/)
< Buff行情>- 这将添加一些有用的类,以便根据浏览器设置网站的样式 能力
成瘾类和plone类
< Buff行情>js/no js类(启用javascript时检测)
oldie/lt-ie9/lt-ie8/lt-ie7(检测Internet Explorer版本)
没有列/有列一/有列二/有列一二 (检测列数)
匿名(检测用户是否匿名)
导航根(检测页面是否为导航根)
上下文类:自定义python脚本 css3theme_get_contextual_类(皮肤层)添加自定义上下文 类< /P>
用户定义的类(可以在每个页面上添加这些类 使用plone注册表-redomino.css3theme.classes)
用户定义的主体类:用户可以使用 饼干。有效类是plone注册表项中的类: redomino.css3theme.useraddableclasses。用户可以添加、删除类 使用"@userbodyclasses"视图(添加、删除、切换、重置)。 示例:
< Buff行情>- 用户体类?add=class1,class2添加这些类
- 用户体类?remove=class1,class2删除这些类
- 用户体类?toggle=class1,class2切换这些类
- 用户体类?reset=删除所有类
兼容性测试:桌面
完美:
- Firefox 3.6-13a
- 铬18
- 歌剧11
- IE 7-8-9(优雅地降级)
不支持:IE6(不完全支持Plone Sunburst主题)
兼容性测试:手机和平板电脑
完美:
- 平板电脑Android 2.2(ArchOS 70)纵向
- 平板电脑Android 2.2(ArchOS 70)横向
- 平板电脑Android 4(华硕变形金刚)人像
- 平板电脑Android 4(华硕变形金刚)布局
- 手机Android 2.2-2.3(HTC Desire HD、HTC Grafia)人像
- 手机Android 2.2-2.3(HTC Desire HD、HTC Grafia)环境
- IPAD2横向
- iPad2纵向
- iPhone 3G人像
- iphone 3g环境
- iPhone4人像
- iPhone 4横向
- iPhone2人像
- iPhone 2横向
- 黑莓操作系统6
几乎完美(太小)
- Symbian(5800)S60纵向
- Symbian(5800)S60横向版
尚未测试:
- 黑莓操作系统5
- WindowsPhone7
如何基于redomino.css3theme构建主题
1-添加对setup.py的依赖关系(我建议固定版本):
install_requires=[ 'setuptools', 'redomino.css3theme==1.5.5',
2-您的层接口必须继承css3theme:
from redomino.css3theme.browser.interfaces import IThemeSpecific as ICss3theme class IThemeSpecific(ICss3theme): """ """
3-您的皮肤层必须继承自css3theme(profiles/default/skins.xml):
... <skin-path name="My theme" based-on="css3theme"> <layer name="my_theme" insert-after="custom"/> </skin-path> ...
4-viewlets配置必须继承自css3theme(profiles/default/viewlets.xml):
... <order manager="plone.portalfooter" skinname="My theme" based-on="css3theme"> </order> ... <hidden manager="plone.portalheader" skinname="My theme" based-on="css3theme"> </hidden> ...
5-安装主题时必须安装css3theme(profiles/default/metadata.xml):
<?xml version="1.0"?> <metadata> <version>1000</version> <dependencies> <dependency>profile-redomino.css3theme:default</dependency> </dependencies> </metadata>