前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一个自己在用的Hopelee · 希望(心动之选)主题一些美化设置

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

原创
作者头像
用户1094633
发布2022-02-14 16:56:00
3280
发布2022-02-14 16:56:00
举报
文章被收录于专栏:运维随笔运维随笔

喜欢此主题,题版权归李洋博客所有

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

设置方法

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

/*H标题*/

蓝色底纹标题CSS样式

CSS

代码语言:javascript
复制
.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
image.png

/* 代码块+滚动条 */

CSS

代码语言:javascript
复制
.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
image.png

虎虎生威背景

CSS

代码语言:javascript
复制
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%;
}

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

CSS

代码语言:javascript
复制
.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
image.png

侧栏美化

CSS

代码语言:javascript
复制
.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
image.png

文章列表美化

CSS

代码语言:javascript
复制
.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
image.png

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 设置方法
  • /*H标题*/
  • /* 代码块+滚动条 */
  • 虎虎生威背景
  • 首页底部友情链接右边美化
  • 侧栏美化
  • 文章列表美化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档