多说实现界面优化
2015-01-27 21:12
141 查看
之前就感觉这个默认的界面有点丑(当然是我自认为),但又指不出来是哪里。
本来的初衷只是想改一下评论框里的提示文字,Google百度了很多资料 楞是没找到。
最后发现在多说的后台管理里是可以自定义的 ⊙﹏⊙b汗
查资料的过程中,发现了别人的一些样式风格,于是借鉴一下,就这样顺便也把我这个给改了...
完善了以下内容
修改评论框背景色
修改评论框文字格式
自定义头像css效果
修改"发布"按钮
来窥视一下修改之前和之后的对比
多少还算是有一点改观的。
原文首发:麦田技术博客
作者:itmyhome
参考资料:多说自定义CSS 让你的多说评论动感起来
本来的初衷只是想改一下评论框里的提示文字,Google百度了很多资料 楞是没找到。
最后发现在多说的后台管理里是可以自定义的 ⊙﹏⊙b汗
查资料的过程中,发现了别人的一些样式风格,于是借鉴一下,就这样顺便也把我这个给改了...
完善了以下内容
修改评论框背景色
#ds-thread #ds-reset .ds-textarea-wrapper { background: #ffffff; }
修改评论框文字格式
#ds-thread #ds-reset .ds-textarea-wrapper textarea,#ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text{ display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; border: none; }
自定义头像css效果
#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0s; -moz-animation-duration: 0s; -ms-animation-duration: 0s; -o-animation-duration: 0s; animation-duration: 0s; -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -ms-animation-duration: 0.7s; -o-animation-duration: 0.7s; animation-duration: 0.7s; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } #ds-reset .ds-avatar img:hover{ -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; }
修改"发布"按钮
#ds-thread #ds-reset .ds-post-button { font-weight: normal; font-size: 12px; text-shadow: none; border: 0; line-height: 23px; width: 100px; background: #00a3cf; color: #fff; }
来窥视一下修改之前和之后的对比
多少还算是有一点改观的。
原文首发:麦田技术博客
作者:itmyhome
参考资料:多说自定义CSS 让你的多说评论动感起来
相关文章推荐
- 安卓小说阅读器实现之二 搜索界面的实现与优化
- 多说实现界面优化
- C# 优化基于插件的开发框架实现Ribbon界面与功能的分离附DEMO
- angularjs实现 - 增加/删除/修改/查询/排序(优化界面)
- React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化
- Android Toast优化--通过自定义布局实现界面美化
- 基于最新版本React Native实现JsBundle预加载,界面秒开优化
- [置顶] React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化
- 【DOS界面下的小优化】C++实现TCP协议下的CS架构的图书馆书籍管理系统(数据库mysql)
- 第六周(2) 后台代码编写、客户端具体功能实现与界面优化
- 多说实现界面优化
- 微信切换界面延时加载的实现方法是优化ViewPager中加载Fragment
- MyFlag Step12:后台代码编写、客户端具体功能实现与界面优化
- 第七周(1) 后台代码编写、客户端具体功能实现与界面优化
- 基于wheel的省市县,界面实现优化
- 第六周(1) 后台代码编写与客户端具体功能实现以及界面优化
- 【Android界面实现】对Listview控件的效率优化
- 注册界面的优化之ActionBar组件的应用之(一)ActionBar组件的布局实现
- myflag step 13:后台代码编写、客户端具体功能实现与界面优化
- MyFlag Step11:后台代码编写、客户端具体功能实现与界面优化