B2主题美化之圈子搜索结果页调整

分享一个适用于WordPress网站7B2主题美化的教程:圈子搜索结果页面调整,将原有的一列搜索结果改为三列,取消了结果中发帖时间的显示,大家可以进一步修改以适应自己网站的风格。

B2主题美化之圈子搜索结果页调整

1.圈子搜索结果页修改效果

修改前后对比:

B2主题美化之圈子搜索结果页调整
修改前
B2主题美化之圈子搜索结果页调整
修改后

2.圈子搜索结果页修改教程

在子主题的style.css文件,或者主题的样式文件均可

/wp-content/themes/b2

添加下面的代码

/*圈子搜索结果页面调整-https://www.xingkongweb.com/64270.html”*/
.document-cat-item { flex-flow: initial; text-align: left; width:20%; padding: 18px 10px 18px 0;}
.document-cat-item .ym-menu{ margin-left: 28px;}
.document-top { height: 320px;}
.document-top h2 { margin: 8px auto 16px;}
.document-cat-box img { border-radius: 0; padding: 0 16px 0 0;}
.document-cat-item h2 { margin: 0 0 5px 0;}
.document-cat-item p { font-size: 14px;}
.document-content h2 { margin-top: 28px; }
.document-row-right { display:none; } /*屏蔽帖子发布日期-https://www.xingkongweb.com/64270.html*/
.document-row { width: 33.3%; display: inline-block; vertical-align: top; }
 @media screen and (max-width:768px){
	.collection-item{ width: 100%;}
    .b2-collection-img { max-width: 76px; height: 48px; }
    .document-cat-item {display: inline-block; text-align: center;}
    .post-type-archive-document #primary-home {margin-top: 118px;}
    .document-row { width: 100%; }
    .document-cat-item img { width: 38px; height: 38px; margin-left: 12px;}
 }

3.进一步修改

其实就简单的css样式调整,从上面代码我们可以发现日期的类名为:document-row-right

相似的,参照下面的代码可以找到圈子名称:document-cat-rot

<div class="document-cat-rot"><span><a href="https://www.xingkongweb.com/circle/bugs">老-白-博客-</a></span></div>

隐藏即可

.document-cat-rot { display:none; } /*屏蔽圈子名称*/
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
广告位招租919838898
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索