当前位置:首页 > 源码分享 > 技术教程 > 正文内容

西京同城老白极简三栏主题修改备忘录

zjsn1个月前 (01-21)技术教程96

以下为zblog老白极简三栏主题修改备忘录

3.jpg

(1)移动端点击菜单按钮下拉菜单去掉全屏宽度,宽度改为240px style.min.css

.mainl{display:none;width:240px;position:fixed;top:45px;left:0;right:0;z-index:122;background-color:#fff}.

(2)PC端和移动端同时修改导航菜单栏行高 ,减小行高为36px, style.min.css

.widget_navbar li a{display:block;line-height:36px;text-align:center;font-size:16px;letter-spacing:.5px}

.nav ul ul li a{display:block;line-height:36px;text-align:center;font-size:16px;letter-spacing:.5px;padding:0 30px}

(3)修改移动端文章正文页边距过大,20减小10px, style.min.css

.article_content{padding:10px}

(4)修改文章正文标题页下显示内容,让电脑端显示一些内容在移动端不一样,修改post-single.php文件,加入判断

<div class="info">

{if ydjijian_is_mobile()}

<span><i class="fa fa-navicon"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>

<span><i class="fa fa-clock-o"></i>{$article.Time('Y-m-d')}</span>

<span><i class="fa fa-eye"></i>{$article.ViewNums}</span>

<span><i class="fa fa-commenting-o"></i>{$article.CommNums}</span>

{else}

<span><i class="fa fa-navicon"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>

<span><i class="fa fa-user"></i><a href="{$article.Author.Url}">{$article.Author.StaticName}</a></span>

<span><i class="fa fa-clock-o"></i>{$article.Time('Y-m-d H:i')}</span>

<span><i class="fa fa-eye"></i>{$article.ViewNums}</span>

<span><i class="fa fa-commenting-o"></i>{$article.CommNums}</span>

{/if}

</div>

(4)二级菜单划过改为绿色背景style.min.css

.widget_navbar li:hover>a{background-color:#d6623d;color:#fff}.widget_navbar li ul li:hover>a{background-color:#05c160;color:#fff}

(5)菜单加入图标,参考下面网站

https://www.thinkcmf.com/font/font_awesome/icons.html

(6)首页列表页,详情页图片加入圆角效果style.min.css中 border-radius: 4px;

列表页 .cms li .img img{width:100%;height:100%;object-fit:cover;overflow:hidden;transition:all .6s;border-radius: 4px;}

正文页 .article_content img{max-width:100%;height:auto;border-radius: 4px;}

(7)修改移动端文章正文标题下信息栏宽度过大,30减小为10px, style.min.css

.mainc .info{padding:15px 30px;border-bottom:1px dotted #ddd;color:#999;font-size:13px}

@media screen and (max-width: 980px) {.mainc .info{padding:15px 10px;border-bottom:1px dotted #ddd;color:#999;font-size:13px}}

(7)电脑版屏幕宽度小于980px隐藏,去掉980-1380px宽度中间出现横向滚动条,修改头文件header.php

这样虽然不显示右侧栏的,但占的位置还在,还需要修改CSS,自动计算宽度

@media screen and (max-width:1380px){.mainc{float:left;width:calc(100% - 470px);

(8)修改文章正文h3标题样式style.min.css,这里用了一个伪元素,目的是显示箭头,让箭头能内联

.article_content h3{font-size:18px;margin: 10px 0px; font-weight: bold;color:#000000;}

.article_content h3::before{content: "";background: url(images/arrow.png);display: inline-block;background-size:16px 16px;width:16px;height:16px;}

删除掉下面

.mainc h3{color:#150707;background-color:#f7f7f7;font-size:16px;border-left:2px solid #d6623d;font-weight:400;padding-left:40px;height:40px;line-height:40px;margin-left:-2px}

同时需要修改post-single.php文件,这个里面还有两个地方用了h3标签,我们改为h1

<h1>相关文章</h1> <h1>评论区</h1>

(9)移动端列表页显示时间,控制文件post-multi-cms.php,电脑端移动端共用,移动端style.min.css中隐藏,删除下面隐藏代码

.cms li .imgr span.time{float:none;display:none},修改个样式 .cms li .imgr span{display:inline-block;}

post-multi-cms.php文件中修改下不显示时分秒

<span class="time">{$article.Time('Y-m-d H:i')}</span>

(10)修改首页和列表页文章标题文字,当小于980px时移动端style.min.css

.cms li .imgr h5{height:75px;line-height:25px;white-space:normal;font-size:16px;font-weight:bold;margin-bottom:6px}

(11)去除空搜索问题,头文件加入如下代码

<script>

$(function(){

    $(".widget_div form").submit(function(){

        if($(this).find("input[type=text]").val().length == 0){

            $(this).find("input[type=text]").focus();

            return false;

        }

    });

$(".search form").submit(function(){

        if($(this).find("input[type=text]").val().length == 0){

            $(this).find("input[type=text]").focus();

            return false;

        }

    });

});

</script>

(13) 浏览器宽度小于980时列表页让 显示一行标题,还有正文。

这个参考了大于980宽度时的默认css,做了局部调整,如高度.

(14)正文页面标题只显示一行问题修改,style.min.css修改如下

.mainc h1{color:#150707;background-color:#f7f7f7;font-size:18px;border-left:2px solid #d6623d;font-weight:400;padding:10px 10px 10px 40px;line-height:150%;margin-left:-2px;text-overflow:ellipsis;overflow:hidden}

修改了padding,去掉设置的高度。当宽度小于980px时,.mainc h1{padding-left:20px;l}

(15)修改移动端头条和列表栏显示,判断宽度小于650px,增加下面样式

@media screen and (max-width:650px){.cms li .imgr h5{height:75px;line-height: 25px;white-space: normal;font-size: 16px;font-weight:bold;margin-bottom: 6px}.cms li .imgr p{display:none;}.cms li .imgr span{font-size:12px;}}

(16)首页和列表蓝标题下显示内容修改post-multi-cms.php

<span><i class="fa fa-folder-o" aria-hidden="true"></i><a href="{$article.Category.Url}" title="{$article.Category.Name}">{$article.Category.Name}</a></span>       

<span class="time"><i class="fa fa-eye", aria-hidden="true"></i>{$article.ViewNums}</span>

(17)修改文章正文页面行高,段落距离style.min.css

.article_content{font-size:16px;line-height:170%;word-break:break-all;word-wrap:break-word;padding-bottom:5px;position:relative}

.article_content p{padding:10px 0}.article_content table{font-size:14px;}.article_content table p{padding:2px 0}

(18)行内文字均匀 分布,左右对齐,修改style.min.css

.article_content p{padding:10px 0;text-align: justify;}

(19)默认文章内blockquote去掉引用背景图

.article_content blockquote{margin:10px;border:1px #d0d4c8 dashed;background:#f4f5f6;padding:8px 10px;border-radius:4px;}

(20)正文页面增加了个上下篇文章,修改post-single.php增加如下

<div id="related">

<h1>相近文章</h1>

<div class="related">

<ul>

  <li><span><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>{if $article.Prev}{$lang['tpure']['prev']}<a href="{$article.Prev.Url}" class="single-prev">{$article.Prev.Title}</a>{else}<span>没有最新的文章了..</span>{/if}</li>

             <li><span><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>{if $article.Next}{$lang['tpure']['next']}<a href="{$article.Next.Url}" class="single-next">{$article.Next.Title}</a>{else}<span>没有最新的文章了..</span>{/if}</li>

</ul>

</div>

</div>

(21)正文相关文章修改显示形式为左标题+右图片,目前改的图片貌似有bug,代码如下,还需要修改样式,让标题自动换行

<div id="related">

<h1>相关文章</h1>

<div class="relatedwang">

<ul>

{foreach GetList(6,$article.Category.ID) as $related}

<li><div class="imgleft" style="width:calc(100% - 170px);float:left"><h5><a href="{$related.Url}" target="_blank" title="{$related.Title}">{$related.Title}</a></h5></div>

<div class="imgright" style="width:160px;height:100px;float:right"><a href="{$related.Url}"><img src="{if $related->Metas->pic}{$related->Metas->pic}{else}{ydjijian_thumbnail($related)}{/if}" alt="{$related.Title}" style="width:160px;"></a></div>

</li>

{/foreach}

</ul>

</div>

</div>

样式修改如下:

.relatedwang ul{list-style:none;}.relatedwang li{display:block;font-size:16px;line-height:180%;padding:0 10px;margin-bottom:8px;height:100px;overflow: hidden;}


版权声明:本文由指尖十年发布,如需转载请注明出处,如有问题可在下面留言。

本站提供的一切软件、教程和内容信息来自网络收集整理,版权争议与本站无关,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系

本文链接:https://www.zjsn.net/?id=82

分享给朋友:

“西京同城老白极简三栏主题修改备忘录” 的相关文章

如何把自己支付宝免费认证为学生特权

如何把自己支付宝免费认证为学生特权

许多人知道,学生支付宝可以享受一些优惠特权,如果你不是学生,能不能享受到这些特权呢?办法总比问题多,最近外面很火的学生认证方法来啦!无需学生也可以认证!可领海底捞69折券、淘票票10元券等超多学生特权!步骤如下1、复制括号内的链接,将名字改成自己的【https://api.2xb.cn/xsrz/?...

中国移动联通电信用户如何免费开通电话防骚扰

中国移动联通电信用户如何免费开通电话防骚扰

现在的骚扰电话太多了,各种推销业务,如何屏蔽呢,看下面办法来了:移动用户:公众号“中国移动高频骚扰电话防护”点击菜单栏“业务设置”开启。电信用户:公众号“天翼防骚扰”点击菜单栏“业务设置”开启。联通用户:公众号“中国联通微厅”点击菜单栏“智慧沃服务”下拉到最底下开启。...

给网站侧边栏如何加上美女视频联播模块

给网站侧边栏如何加上美女视频联播模块

打开本站首页,有没发现右下角有个美女视频呢,哈哈,今天给大家分享下如何在网站上加美女视频。一个非常实用的侧边模块,可以自己在网站建一个侧边栏模块,粘贴下面代码进入保存,一般就可以了。不想看了点击下视频暂停,就不会继续了。<div>     <...

如何用JS代码制作网页复制功能

如何用JS代码制作网页复制功能

利用JS脚本来实现点击某个按钮或某段文字来复制相应的内容,网上提供了很多种方法,比如接管浏览器的复制功能,使用一些js复制插件等等,下面博文提供一个很多的js方法,几行代码的就能实现。js实现点击复制的功能先用js定义一个复制功能的函数,在复制触发时调用即可!/**  * @n...

PbootCMS模板主题可用标签大全(PbootCMS仿站必备标签)

PbootCMS模板主题可用标签大全(PbootCMS仿站必备标签)

以下为PbootCMS网站模板可用标签收集整理大全,免费分享1、公司信息标签适用范围:全站任意地方均可使用。标签作用:用于调取网站与公司相关的信息,对应后台的“基础内容>公司信息”。{pboot:companyname}公司名称{pboot:companyaddress}公司地址{pboot:...

全国各地优势产业大全一览(原产地特产)

全国各地优势产业大全一览(原产地特产)

无论你是做电商,微商,直播带货,都需要知道各地的优势产业,下面为大家分享全国各个产业带产地搜索省流助手:羽绒服:共青城、吴江、常熟睡  衣:汕头、佛山、揭阳、普宁、中山袜  子:诸暨、江阴羊毛衫:海阳(山东)羊绒衫:清河(河北)羊绒大衣:大连泳  装:葫芦岛手 ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。