zblog博客主题Hopelee · 希望(心动之选)主题一些美化设置
时间:2022年05月26日
/来源:网络
/编辑:佚名
分享一个zblog主题Hopelee · 希望(心动之选)主题一些美化设置
喜欢此主题,如需购买主题可以点击链接购买希望(心动之选)主题版权归李洋博客所有
Zblog应用中心链接 https://app.zblogcn.com/?id=21851
首页调用默认侧栏,分类列表及其他(搜索、标签等)调用侧栏2,文章页调用侧栏3,手机移动端导航调用侧栏5。
主题自带三个侧栏模块,分别是热门、热评和随机显示侧栏,设置在主题配置,全局配置中设置热门时间及调用文章数量。
主题首页带有两个CMS模块,可根据类型自行选择是否开启,主题设置,全局设置,首页CMS模块设置。
主题后期将接入商品模板页,适配LayCenter 3.0+版本,可实现在线购买商品等功能。
轮播图设置确保每张图片尺寸一致才行,否则可能会出现高低不同等错乱情况。
主题还集成海报、点赞、打赏、文章收藏(用户中心适配)、一键分享等功能。
较为不错的SEO优化及全新自适应代码,可实现“多终端同步”。
预留对应接口及联盟广告接口,多一份收入,多一分稳定。
设置方法
在主题设置 >> 全局设置 >> 自定义css功能里面开启并添加CSS样式(使用自定义css功能防止主题更新导致CSS样式没了)
/*H标题*/
蓝色底纹标题CSS样式
CSS
.single-entry h1 .single-entry h2 {
position: relative;
margin: 10px 0 8px 0;
color: #0d5a96;
background: #f1f7fd;
border: 1px dashed #cae0f3;
padding: 6px 10px;
font-size: 20px;
font-weight: bold;
}
设置完后如下图
/* 代码块+滚动条 */
CSS
.single-entry pre.prism-line-numbers{
background:#fff;
border:1px dashed #ccc;
width:100%;font-size:15px;
font-size:1.5rem;
word-break:break-all;
white-space:normal;
overflow:auto;
margin:10px auto;
}
设置完后如下图
虎虎生威背景
CSS
body.home {
background-image: url(/zb_users/upload/img/huhu.jpg);
background-color: #fec18a;
background-attachment: fixed;
background-position: top center;
background-size: 128% 100%;
}
首页底部友情链接右边美化 友链图:链接: https://pan.baidu.com/s/1SF4xw0XgakPzWBWoxOmaZQ 提取码: 4ikd
CSS
.link-box{
background-image:url(https://www.78moban.com/zb_users/upload/img/youliantu.png);
position:relative;
background-repeat:no-repeat;
border:none;
background-position:right top;
background-size:258px;
background-position-y:3px;
background-position-x:93%;
}
侧栏美化
CSS
.widget-title{
background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,.3)),url(https://www.78moban.com/zb_users/upload/img/goodnight.png);
background-size:246px;
background-position-x:15%;
}
文章列表美化
CSS
.post-list header.entry-header {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
background-image:url(https://www.78moban.com/zb_users/upload/img/lihailewodege.png);background-size:215px;
}
image.png
希望主题模板文章背景色
CSS
.single-entry {
width: 100%;
max-width: 100%;
position: relative;
background-image: linear-gradient( 90deg,rgba(255,0,0,0.05) 5%,rgba(72,42,10,0) 0),linear-gradient( 1turn,rgba(0,0,0,0.05) 5%,rgba(255,153,44,0) 0);
background-size: 20px 20px;
box-sizing: border-box;
border-top: 1px solid #fff2f2;
margin-top: -5px;
padding-bottom: 16px;
}
分页分类屏蔽
CSS
ul.filter-tag {
display: none;
}
form.filter-tag{
display: none;
}
/*filter-sift*/.filter-sift {font-size:15px;padding: 0px 20px;background:rgba(255,255,255,.95);margin:0px auto 20px;-webkit-border-radius:10px;border-radius:10px;box-shadow:0 34px 20px -24px rgba(0,36,100,0.06);}
.catetop-list{
display: none;
}
专题页面屏蔽
CSS
.archive-top {
display: none;
}
来源:https://www.ahaoyw.com/article/675.html
喜欢此主题,如需购买主题可以点击链接购买希望(心动之选)主题版权归李洋博客所有
Zblog应用中心链接 https://app.zblogcn.com/?id=21851
首页调用默认侧栏,分类列表及其他(搜索、标签等)调用侧栏2,文章页调用侧栏3,手机移动端导航调用侧栏5。
主题自带三个侧栏模块,分别是热门、热评和随机显示侧栏,设置在主题配置,全局配置中设置热门时间及调用文章数量。
主题首页带有两个CMS模块,可根据类型自行选择是否开启,主题设置,全局设置,首页CMS模块设置。
主题后期将接入商品模板页,适配LayCenter 3.0+版本,可实现在线购买商品等功能。
轮播图设置确保每张图片尺寸一致才行,否则可能会出现高低不同等错乱情况。
主题还集成海报、点赞、打赏、文章收藏(用户中心适配)、一键分享等功能。
较为不错的SEO优化及全新自适应代码,可实现“多终端同步”。
预留对应接口及联盟广告接口,多一份收入,多一分稳定。
设置方法
在主题设置 >> 全局设置 >> 自定义css功能里面开启并添加CSS样式(使用自定义css功能防止主题更新导致CSS样式没了)
/*H标题*/
蓝色底纹标题CSS样式
CSS
.single-entry h1 .single-entry h2 {
position: relative;
margin: 10px 0 8px 0;
color: #0d5a96;
background: #f1f7fd;
border: 1px dashed #cae0f3;
padding: 6px 10px;
font-size: 20px;
font-weight: bold;
}
设置完后如下图
/* 代码块+滚动条 */
CSS
.single-entry pre.prism-line-numbers{
background:#fff;
border:1px dashed #ccc;
width:100%;font-size:15px;
font-size:1.5rem;
word-break:break-all;
white-space:normal;
overflow:auto;
margin:10px auto;
}
设置完后如下图
虎虎生威背景
CSS
body.home {
background-image: url(/zb_users/upload/img/huhu.jpg);
background-color: #fec18a;
background-attachment: fixed;
background-position: top center;
background-size: 128% 100%;
}
首页底部友情链接右边美化 友链图:链接: https://pan.baidu.com/s/1SF4xw0XgakPzWBWoxOmaZQ 提取码: 4ikd
CSS
.link-box{
background-image:url(https://www.78moban.com/zb_users/upload/img/youliantu.png);
position:relative;
background-repeat:no-repeat;
border:none;
background-position:right top;
background-size:258px;
background-position-y:3px;
background-position-x:93%;
}
侧栏美化
CSS
.widget-title{
background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,.3)),url(https://www.78moban.com/zb_users/upload/img/goodnight.png);
background-size:246px;
background-position-x:15%;
}
文章列表美化
CSS
.post-list header.entry-header {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
background-image:url(https://www.78moban.com/zb_users/upload/img/lihailewodege.png);background-size:215px;
}
image.png
希望主题模板文章背景色
CSS
.single-entry {
width: 100%;
max-width: 100%;
position: relative;
background-image: linear-gradient( 90deg,rgba(255,0,0,0.05) 5%,rgba(72,42,10,0) 0),linear-gradient( 1turn,rgba(0,0,0,0.05) 5%,rgba(255,153,44,0) 0);
background-size: 20px 20px;
box-sizing: border-box;
border-top: 1px solid #fff2f2;
margin-top: -5px;
padding-bottom: 16px;
}
分页分类屏蔽
CSS
ul.filter-tag {
display: none;
}
form.filter-tag{
display: none;
}
/*filter-sift*/.filter-sift {font-size:15px;padding: 0px 20px;background:rgba(255,255,255,.95);margin:0px auto 20px;-webkit-border-radius:10px;border-radius:10px;box-shadow:0 34px 20px -24px rgba(0,36,100,0.06);}
.catetop-list{
display: none;
}
专题页面屏蔽
CSS
.archive-top {
display: none;
}
来源:https://www.ahaoyw.com/article/675.html
新闻资讯 更多
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法