素材分类

[Discuz插件] 插件之家风格 discuz下载附件图标美化特效

[复制链接]
猪猪侠 发表于 2016-3-18 22:33:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
本帖最后由 wsf 于 2016-3-18 23:59 编辑

[Discuz插件] 插件之家风格 discuz下载附件图标美化特效




演示效果如下图所示:


1.png


其实这个效果算不上插件。严格上来说是风格的二次修改,然后再增加了css就出来的效果。


注册会员免费哦!

使用说明

1、第一步
首先把下面的css放到你的风格里你的风格css地址路径是
\template\你的风格\common\extend_common.css

  1. /* 论坛附件美化 */
  2. .button {width: 200px;float: left;margin: 10px 0px;z-index: 2;}
  3. .button a {-webkit-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  4. display: block;height: 50px;width: 200px;position: relative;z-index: 2;color: white;font: bold 17px/50px Helvetica,Verdana,sans-serif;text-decoration: none;
  5. text-align: center;text-transform: uppercase;background: -webkit-linear-gradient(top,#00b7ea 0%,#009ec3 100%);}
  6. .vm {vertical-align: middle;}
  7. table {empty-cells: show;border-collapse: collapse;}
  8. .button p {background: #222;display: block;height: 40px;width: 180px;margin: -50px 0 0 10px;text-align: center;font: 12px/45px Helvetica,Verdana,sans-serif;
  9. color: #fff;position: absolute;z-index: 1;-webkit-transition: margin 0.5s ease;transition: margin 0.5s ease;-webkit-border-radius: 10px;border-radius: 10px;
  10. -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);box-shadow: 2px 2px 8px rgba(0,0,0,0.2);text-decoration: none;text-transform: uppercase;}
  11. .button:hover .top {margin: -80px 0 0 10px}
  12. .button:hover .bottom {margin: -10px 0 0 10px;}
  13. .buttonright {float: left;margin-left: 20px;font-size: 14.9px;font-family: Tahoma,"Microsoft Yahei",SimSun,Helvetica,sans-serif;padding-top: 14px;}
  14. .buttonright em {color: #CC0000;font-weight: bold;}
  15. .buttonright a {text-decoration: none;font-size: 14px;font-family: Tahoma,"Microsoft Yahei",SimSun,Helvetica,sans-serif;}
  16. .t_f .buttonright a {text-decoration: none;}
  17. .user_list a img {margin-bottom: 8px;border: none;}
复制代码

2、第二步
上传附件里的discuzcode.php文件到你风格论坛模板路径下
\template\你的风格\forum
游客,如果您要查看本帖隐藏内容请回复



3、第三步
按钮图标自己设计一个!或者直接用微三方的图标进行覆盖!
微三方-源码工厂的图标路径是:   http://www.openXchina.com/static/image/filetype/rar.gif
到此说明结束!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝0

帖子865

发布主题
阅读排行 更多
广告位
发布资源 上个主题 下个主题 快速回复 返回列表
关注官方微信

微信号:openXchina

微博:微三方

QQ1群:413980968

QQ2群:137904832

全国服务QQ:

1758175951

(工作日:周一至周五 9:00-17:00)
中国广东广州中山大道
service@openXchina.com

申请友链- 微三方-源码工厂(www.openXchina.com)    

Powered by openXchina! X3.4© 2009-2017 微三方 Inc.  粤ICP备15055119号