基于Wordpress的B2主题美化-文章H标签与赞赏区域

今天给大家带来的是B2主题的文章H标签与赞赏区域美化效果与步骤。

今天介绍的这两个点都非常简单,只要把css放到子主题的style.css即可。

话不多说,直接开动。

效果展示

文章H标签

原版B2主题只有一个H2标签是有效果的,小编是修改了H2标签并增加了H3、H4、H5三个标签,毕竟H标签在SEO中占比还是挺高的,而且小编也经常需要用到。

/*文章内容美化H标签 start*/
.entry-content > h2::before{content: '';margin-right:0;}
.single-article .entry-content > h2{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #0061a8;
	font-size: 21px;
}
.single-article .entry-content > h3{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #037ad1;
	font-size: 18px;
}
.single-article .entry-content > h4{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #3a89c3;
	font-size: 15px;
}
.single-article .entry-content > h5{
	font-weight: bold;
	background-color: #f6f6f6;
	margin: 20px 0;
	padding: 5px 12px;
	border-left: 5px solid #FFC0CB;
	font-size: 12px;
}
/*文章内容美化H标签 end*/

赞赏样式

这个赞赏样式非常简单,眼见的大哥估计立马就看出来了,赞赏的渐变效果就是海报按钮的效果23333,当然这个渐变的颜色大家也可以自由发挥。

/*赞赏样式修改*/
.content-ds{
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    border-radius: 10px;
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background: linear-gradient(40deg,#e0c3fc,#8ec5fc);
    background: -webkit-linear-gradient(40deg,#e0c3fc,#8ec5fc);
}
.content-ds-button button{
    line-height: 34px;
    padding: 0 15px;
    box-shadow: 0px 8px 20px -5px #0061a8a3;
    transition: all .3s ease-in 0s;
    font-size: 12px;
    margin: 10px 0;
    background: linear-gradient(top,#0061a8,#2b5f85a8);
    background: -webkit-linear-gradient(top,#0061a8,#2b5f85a8);
}

人已赞赏
CMS教程WordPress教程

基于Wordpress的B2主题美化-文章详情页头部区域

2020-6-5 14:41:46

WordPress教程

[WordPress教程]免插件配置SMTP邮件功能教程

2020-7-3 15:06:48

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索