DUX主题文章页相关推荐双栏显示

DUX主题是themebetter原创开发的一款基于WordPress程序的多功效主题,响应式结构,差异装备差异展示效果,精练大气 ,多装备支持、优化SEO,适用于垂直站点、科技博客、小我私人站,现在我站点使用的就是DUX主题,作为一个喜欢折腾的站长,对主题的修改优化自然是免不了的,DUX主题默认文章页的相关推荐是只显示一列数据的,本次教程是将原来的一列改为两列显示,这样显示的会更多一点而且页面也不会太长。
DUX主题文章页相关推荐双栏显示
上图是主题相关推荐的默认显示样式,接纳单栏显示,右边空出好大一块,就我小我私人感受不是太雅观,而且右侧空间有点虚耗,下面就将其修改一下,使其双栏显示。这次对主题的修改需要改变两个文件,划分是:main.css与mo_posts_related.php。本次教程是将原来的一列改为两列显示,这样显示的会更多一点而且页面也不会太长。在修改主题文件前我们最好先备份一下需要修改的文件,若是修改失败,可以直接使用源文件替换掉修改文件来举行恢复。教程异常简朴,找到dux的样式文件main.css,main.css文件是我们这次对DUX主题修改的重中之重,我们就是通过修改它内部的样式文件来实现相关推荐文章双栏显示的。首先,打开文件后CTRL+F搜索.relates ul,在函数后面添加overflow: hidden;语句,修改完成后的代码显示应该是这样的:

  1. .relates ul{
  2. 	list-style: disc;
  3. 	margin-left: 18px;
  4. 	color: #bbb;
  5. 	margin-bottom: 30px;
  6. 	overflow: hidden;
  7. }

然后在main.css文件的最后加上如下的代码:

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

你可以将main.css文件上传到网站原位置,查看效果如下:
DUX主题文章页相关推荐双栏显示
好了,到这一步相关文章双栏显示基本上就竣事了,若是有什么不懂的地方可以在下方留言谈论也可以联系站长。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 DUX主题文章页相关推荐双栏显示 https://zhutizhen.com/14578.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章