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），保存后上传覆盖原图

1. static/image/common/mobile-type.png

复制代码

注意：如果使用了扩展图片目录，则操作扩展目录下相应图片文件（一般存放在类似于 template/yourtmp/img/... 的目录中）
（2）按路径打开如下文件

1. template/default/common/module.css

复制代码

（3）查找如下代码

1. /** forum::forumdisplay,forum::viewthread,group::forumdisplay,group::viewthread **/
   
2.         /* 开启快速发帖和推荐表情时的样式 by Pony */
   
3.         #f_pst .bm_c { padding: 20px; }
   
4.                 #f_pst .tedt { width: auto; }
   
5.                 .hasfsl { margin-right: 170px; zoom: 1; }
   
6. 
   
7.         #f_pst .upfl { height: auto; max-height: 100%; }
   
8.                 #f_pst .upfl td { padding: 4px 0; }
   
9.                 #f_pst .atds { width: 100px; }
   
10.                 #f_pst .px { padding: 2px; }
    
11.         /*
    
12.                 Name:                        mod_mobile-type
    
13.                 Level:                        Function
    
14.                 Explain:                手机发帖的相关样式
    
15.                 Author:                        Lushnis
    
16.                 Last Modify:        Pony 1204111343
    
17.         */
    
18.         .mobile-type { position: absolute; margin: -5px 0 -85px 103px; width: 58px; height: 80px; background: url({IMGDIR}/mobile-type.png) no-repeat 100% 100%; }
    
19.                 .ie6 .mobile-type, .ie7 .mobile-type { margin-left: 88px; }
    
20.                 .mobile-type a { display: block; width: 46px; height: 80px; background: url({IMGDIR}/mobile-type.png) no-repeat 0 0; }
    
21.                         .mobile-type-2 a { background-position: 0 -80px; }
    
22.                         .mobile-type-3 a { background-position: 0 -160px; }
    
23.                         .mobile-type-4 a { background-position: 0 -240px; }
    
24.                 .ie6 .mobile-type, .ie6 .mobile-type a { background-image: url({IMGDIR}/mobile-type-ie6.png) !important; }
    
25.         .mobile-location { padding-left: 20px; background: url({IMGDIR}/mobile-attach-2.png) no-repeat 0 0; }
    
26.         /*
    
27.                 Name:                        threadbeginid
    
28.                 Level:                        Function
    
29.                 Explain:                 起始动画或图片的位置样式
    
30.                 Author:                        Jane
    
31.                 Last Modify:        Jane 1210251731
    
32.         */
    
33.         #threadbeginid { position: fixed; top: 0px; left: 0px; z-index: 999; }
    
34.                 #threadbeginid .beginidin { position: absolute; top: 0; right: 0px; z-index: 999; }
    
35.                 #threadbeginid .beginidimg { background: white; filter:alpha(opacity=0); opacity: 0; }
    
36. /** end **/

复制代码

（4）将上述代码中首末行及中间的部分复制，追加粘贴至当前模板目录下的extend_module.css文件中
（5）继续编辑extend_module.css文件，参考如下代码修改相应的css参数

1. /** forum::forumdisplay,forum::viewthread,group::forumdisplay,group::viewthread **/
   
2. /* 客户端图标 */
   
3. /*
   
4.                 Name:                        mod_mobile-type
   
5.                 Level:                        Function
   
6.                 Explain:                手机发帖的相关样式
   
7.                 Author:                        Lushnis
   
8.                 Last Modify:        Pony 1204111343
   
9. */
   
10. .mobile-type { position: absolute; margin: -5px 0 -85px 132px; width:29p; height:40px; background: url({IMGDIR}/mobile-type.png) no-repeat 100% 100%; }
    
11. .ie6 .mobile-type, .ie7 .mobile-type { margin-left:117px; }
    
12. .mobile-type a { display: block; width:23p; height:40px; background: url({IMGDIR}/mobile-type.png) no-repeat 0 0; }
    
13. .mobile-type-2 a { background-position: 0 -40px; }
    
14. .mobile-type-3 a { background-position: 0 -80px; }
    
15. .mobile-type-4 a { background-position: 0 -120px; }
    
16. .ie6 .mobile-type, .ie6 .mobile-type a { background-image: url({IMGDIR}/mobile-type-ie6.png) !important; }
    
17. .mobile-location { padding-left: 20px; background: url({IMGDIR}/mobile-attach-2.png) no-repeat 0 0; }
    
18. /** end **/

复制代码

（6）保存，覆盖上传至当年使用模板相应目录；
（7）更新缓存，刷新页面查看修改后的效果。



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