爱分享
分享是一种态度

DUX主题相关推荐改为双列显示并美化

大家有没有觉得文章下面的相关推荐只有一列显示右侧特别空档不是特别美观,下面晒出修改前修改后的对比效果:

修改前单列显示
修改后双列显示

改成双栏是不是美观多了,修改其实很简单,方法如下:

一、修改main.css文件

在文件搜索”.relates ul”字段,在下面添加“overflow: hidden;”,下面贴上修改后代码:

.relates ul{
	list-style: disc;
	margin-left: 18px;
	color: #bbb;
	margin-bottom: 30px;
	overflow: hidden;
}

在main.css文件底部添加:

/*相关文章推荐使用双栏*/
.relates ul li {
	width: 50%;
	float: left;
	word-break: break-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

二、修改mo_posts_related.php文件添加图标文字进行美化

在文件中搜索<a href= , 均在<a href=……前面添加以下代码:

&nbsp&nbsp&nbsp<i class="fa fa-hand-o-right"></i>&nbsp&nbsp

打开网页文章页面查看文章下的相关推荐是不是美观多了!

赞(2)
未经允许不得转载:爱分享 » DUX主题相关推荐改为双列显示并美化

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址