分享一个自己在用的Hopelee · 希望(心动之选)主题一些美化设置

阿豪运维笔记 2021-12-10 1.22 K阅读

文章最后更新时间:2022年06月16日

喜欢此主题,如需购买主题可以点击链接购买希望(心动之选)主题版权归李洋博客所有

Zblog应用中心链接 https://app.zblogcn.com/?id=21851

设置方法

在主题设置 >> 全局设置 >> 自定义css功能里面开启并添加CSS样式(使用自定义css功能防止主题更新导致CSS样式没了

/*H标题*/

蓝色底纹标题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;
}

设置完后如下图

image.png

/* 代码块+滚动条 */

.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;
	}

设置完后如下图

image.png

虎虎生威背景

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%;
}

首页底部友情链接右边美化

.link-box{
    background-image:url(https://www.ahaoyw.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%;
    }

image.png

侧栏美化

.widget-title{
    background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,.3)),url(https://www.ahaoyw.com/zb_users/upload/img/goodnight.png);
    background-size:246px;
    background-position-x:15%;
    }

image.png

文章列表美化

.post-list header.entry-header {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    background-image:url(https://www.ahaoyw.com/zb_users/upload/img/lihailewodege.png);background-size:215px;
    }

image.png

希望主题模板文章背景色

.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;
}

分页分类屏蔽

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;
}

专题页面屏蔽

.archive-top {
    display: none;
}

文章底部广告(公告)样式

<div class="copyright-post" >若文章图片、下载链接等信息出错,请联系反馈,博主将第一时间更新!如果喜欢本站,请打赏支持本站,谢谢!</div>

css代码

.copyright-post {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #444;
    text-align: justify;
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    border-radius: 3px;
    border: 1px dashed #f18110;
}


若文章图片、下载链接等信息出错,请联系反馈,博主将第一时间更新!如果喜欢本站,请打赏支持本站,谢谢!
文章版权声明:除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

目录[+]

取消
微信二维码
微信二维码
支付宝二维码