眼镜蛇 发表于 2015-3-3 13:40:49

Discuz!X系列启用手机客户端后针对电脑版界面的一些优化措施


其实在很早以前,Discuz!X 系列较新的版本已经集成了手机客户端插件(mobile),但是在启用该插件后,浏览电脑版界面存在一些美观度问题,需要优化。


主要问题:

1.使用客户端发帖后,帖子内容末尾自动加上了“来自:Android客户端”提示,但是和帖子内容挤在了一块,影响界面美观
2.帖子内容页左侧的用户头像位置,自动添加了客户端图标(安卓、IOS、WP),但是默认的图标实在是太大了,会遮挡头像,十分不美观






优化办法:

1.之前已经做过一些优化,具体参见:
http://www.wenliren.com/forum.php?mod=viewthread&tid=45999


2.可以尝试将图标显示缩小至原大小1/2(1:2优化),并调整图标css样式来优化。具体步骤为:
(1)下载以下路径的图片,使用图片处理工具(Fireworks或Photoshop)将其大小按比例缩至原图的50%(46*400 => 23*200),保存后上传覆盖原图
static/image/common/mobile-type.png注意:如果使用了扩展图片目录,则操作扩展目录下相应图片文件(一般存放在类似于 template/yourtmp/img/... 的目录中)
(2)按路径打开如下文件
template/default/common/module.css(3)查找如下代码
/** forum::forumdisplay,forum::viewthread,group::forumdisplay,group::viewthread **/
      /* 开启快速发帖和推荐表情时的样式 by Pony */
      #f_pst .bm_c { padding: 20px; }
                #f_pst .tedt { width: auto; }
                .hasfsl { margin-right: 170px; zoom: 1; }

      #f_pst .upfl { height: auto; max-height: 100%; }
                #f_pst .upfl td { padding: 4px 0; }
                #f_pst .atds { width: 100px; }
                #f_pst .px { padding: 2px; }
      /*
                Name:                        mod_mobile-type
                Level:                        Function
                Explain:                手机发帖的相关样式
                Author:                        Lushnis
                Last Modify:      Pony 1204111343
      */
      .mobile-type { position: absolute; margin: -5px 0 -85px 103px; width: 58px; height: 80px; background: url({IMGDIR}/mobile-type.png) no-repeat 100% 100%; }
                .ie6 .mobile-type, .ie7 .mobile-type { margin-left: 88px; }
                .mobile-type a { display: block; width: 46px; height: 80px; background: url({IMGDIR}/mobile-type.png) no-repeat 0 0; }
                        .mobile-type-2 a { background-position: 0 -80px; }
                        .mobile-type-3 a { background-position: 0 -160px; }
                        .mobile-type-4 a { background-position: 0 -240px; }
                .ie6 .mobile-type, .ie6 .mobile-type a { background-image: url({IMGDIR}/mobile-type-ie6.png) !important; }
      .mobile-location { padding-left: 20px; background: url({IMGDIR}/mobile-attach-2.png) no-repeat 0 0; }
      /*
                Name:                        threadbeginid
                Level:                        Function
                Explain:               起始动画或图片的位置样式
                Author:                        Jane
                Last Modify:      Jane 1210251731
      */
      #threadbeginid { position: fixed; top: 0px; left: 0px; z-index: 999; }
                #threadbeginid .beginidin { position: absolute; top: 0; right: 0px; z-index: 999; }
                #threadbeginid .beginidimg { background: white; filter:alpha(opacity=0); opacity: 0; }
/** end **/(4)将上述代码中首末行及中间的部分复制,追加粘贴至当前模板目录下的extend_module.css文件中
(5)继续编辑extend_module.css文件,参考如下代码修改相应的css参数
/** forum::forumdisplay,forum::viewthread,group::forumdisplay,group::viewthread **/
/* 客户端图标 */
/*
                Name:                        mod_mobile-type
                Level:                        Function
                Explain:                手机发帖的相关样式
                Author:                        Lushnis
                Last Modify:      Pony 1204111343
*/
.mobile-type { position: absolute; margin: -5px 0 -85px 132px; width:29p; height:40px; background: url({IMGDIR}/mobile-type.png) no-repeat 100% 100%; }
.ie6 .mobile-type, .ie7 .mobile-type { margin-left:117px; }
.mobile-type a { display: block; width:23p; height:40px; background: url({IMGDIR}/mobile-type.png) no-repeat 0 0; }
.mobile-type-2 a { background-position: 0 -40px; }
.mobile-type-3 a { background-position: 0 -80px; }
.mobile-type-4 a { background-position: 0 -120px; }
.ie6 .mobile-type, .ie6 .mobile-type a { background-image: url({IMGDIR}/mobile-type-ie6.png) !important; }
.mobile-location { padding-left: 20px; background: url({IMGDIR}/mobile-attach-2.png) no-repeat 0 0; }
/** end **/(6)保存,覆盖上传至当年使用模板相应目录;
(7)更新缓存,刷新页面查看修改后的效果。



演示链接:http://www.zaishuxia.com/thread-38-1-1.html







页: [1]
查看完整版本: Discuz!X系列启用手机客户端后针对电脑版界面的一些优化措施