Discuz手机模版不支持有序列表和无序列表的修改方法
有序列表:
条目内容1;
条目内容2;
条目内容3...
无序列表:
条目内容1;
条目内容2;
条目内容3...
这两种列表对于文本排版来说非常重要,可以将很多条目列的很清楚,看起来整齐划一,一目了然,本人非常喜欢使用,但很多dz手机模版都不支持,编辑好后只有PC端显示,而手机端则没有,这怎么行?自己动手改它!
1、查找手机模版目录下的文件:/touch/forum/viewthread.php 或 viewthread_list.php、viewthread_node.php,以及/touch/portal/view.php等文件;
2、分别打开这些文件,论坛搜索:“$post[message]”,文章页面搜索:“$content['content']”;
3、对于出现在独立一行时,给他们加上一个div标签,方便加样式,如手机论坛页:<div class="gxy">$post[message]</div>
<!--{if !$_G[forum_thread][special]}--> <div class="gxy">$post[message]</div> <!--{elseif $_G[forum_thread][special] == 1}--> <!--{template forum/viewthread_poll}--> <!--{elseif $_G[forum_thread][special] == 2}--> <!--{template forum/viewthread_trade}--> <!--{elseif $_G[forum_thread][special] == 3}--> <!--{template forum/viewthread_reward}--> <!--{elseif $_G[forum_thread][special] == 4}--> <!--{template forum/viewthread_activity}--> <!--{elseif $_G[forum_thread][special] == 5}--> <!--{template forum/viewthread_debate}--> <!--{elseif $threadplughtml}--> $threadplughtml <div class="gxy">$post[message]</div> <!--{else}--> <div class="gxy">$post[message]</div> <!--{/if}--> <!--{else}--> <div class="gxy">$post[message]</div> <!--{/if}-->
手机文章页:
<div id="article_content"><div class="gxy">$content[content]</div></div>
4、增加CSS样式,找到手机模版对应的css文件,如手机论坛:css/extend_common.css、手机文章:/image/style.css,分别打开编辑增加如下内容:
/*220330Gxy添加,用于支持有序和无序列表*/ .gxy ul li{list-style-type:disc; margin-left:20px; line-height:2em;} .gxy ol li{list-style-type:decimal; margin-left:20px; line-height:2em;} .gxy ul,ul.litype_1,ul.litype_2,ul.litype_3{margin-left:10px; line-height:2em;} .gxy ol,ol.litype_1,ol.litype_2,ol.litype_3{margin-left:10px; line-height:2em;} ul.litype_1 li{list-style-type:decimal !important;margin-left:20px;} ul.litype_2 li{list-style-type:lower-alpha !important;margin-left:20px;} ul.litype_3 li{list-style-type:upper-alpha !important;margin-left:20px;} /*220330Gxy添加,用于支持有序和无序列表*/
注:由于本人比较喜欢行高设置为2,看起来比较清爽,所以增加了“line-height:2em;”,如不喜欢可删除每行里的这部分;
5、个别情况下自己喜欢:
去掉手机论坛viewthread_node.php中字体大小限制,搜索Message后的font-size: .17rem
修改几处手机版列表和页面字体大小,必要时增加行高设置,如:
.list_dt_yt a, .threadlist li a .plc .pi .message{ font-size: 16px; line-height:2}
6、完成!
7、个别站点(DGPXW)修改支持有序和无序列表记录:
PC端:/phpcms/templates/default/content,主要是show开头的html文件;
手机端:/m//phpcms/templates/default/content,主要是show开头的html文件;
都要修改多个文件
<div class="gxy"><?php echo $content;?></div>
PC端CSS:/css/inside.css
/*220330Gxy添加,用于支持有序和无序列表*/ .gxy ul li{list-style-type:disc; margin-left:30px; line-height:2;} .gxy ol li{list-style-type:decimal; margin-left:30px; line-height:2;} .gxy ul,ul.litype_1,ul.litype_2,ul.litype_3{margin-left:0px; line-height:2;} .gxy ol,ol.litype_1,ol.litype_2,ol.litype_3{margin-left:0px; line-height:2;} /*220330Gxy添加,用于支持有序和无序列表*/
手机端CSS:/m/style/mobile.css
/*220330Gxy添加,用于支持有序和无序列表*/ .gxy ul li{list-style-type:disc; margin-left:30px; line-height:2;} .gxy ol li{list-style-type:decimal; margin-left:30px; line-height:2;} .gxy ul,ul.litype_1,ul.litype_2,ul.litype_3{margin-left:0px; padding-left:0; line-height:2;} .gxy ol,ol.litype_1,ol.litype_2,ol.litype_3{margin-left:0px; padding-left:0; line-height:2;} /*220330Gxy添加,用于支持有序和无序列表*/
扫描二维码推送至手机访问。
版权声明:本文由 声光视趣 - blog.lavfun.com 发布,如需转载请注明出处。