WordPress网站7B2主题美化之圈子搜索结果页调整

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

修改前:

wp网站7B2主题美化之圈子搜索结果页调整

.修改后

三列,搜索效果展示更佳

 

 

wp网站7B2主题美化之圈子搜索结果页调整

 

 

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

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

/www/wwwroot/www.baidu.com/wp-content/themes/b2

添加下面的代码

/*圈子搜索结果页面调整”*/
.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; } /*屏蔽帖子发布日期*/
.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.baidu.com/circle/bugs">星空</a></span></div>

隐藏即可

.document-cat-rot { display:none; } /*屏蔽圈子名称*/

 

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

    暂无评论内容