handsome主题美化记录

Gabriel2024-02-202024-06-16

收集

一：首页文章圆角化

详情

复制代码到开发者设置->自定义css

/*首页文章版式圆角化*/
.panel{
  border: none;
  border-radius: 15px;
}

.panel-small{
  border: none;
  border-radius: 15px;
}

.item-thumb{
  border-radius: 15px;  
}

二：多级标题美化

详情

复制代码到开发者设置->自定义css

文章一二三四级标题美化
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

三：网站字体更改（简单方式）

详情

开发者设置里，分别在

1 2	- 自定义css中加入 `body {font-family: 'ZCOOL XiaoWei';}`

自定义输出head头部的html中加入

1 2	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" />

四：开启全站黑白模式

详情

设置外观--开发者设置--自定义CSS 添加以下代码(Apply to handsome theme)

<!--开启黑白模式-->
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
<!--黑白模式结束-->

五：恋爱记录

详情

复制以下代码到开发者设置->自定义JavaScript；

<!--恋爱记时-->
function lovexhjSitetime() {
           window.setTimeout("lovexhjSitetime()", 1000);
           var seconds = 1000
           var minutes = seconds * 60
           var hours = minutes * 60
           var days = hours * 24
           var years = days * 365
           var today = new Date()
           var todayYear = today.getFullYear()
           var todayMonth = today.getMonth()+1
           var todayDate = today.getDate()
           var todayHour = today.getHours()
           var todayMinute = today.getMinutes()
           var todaySecond = today.getSeconds()
           // 时间设置
           var t1 = Date.UTC(2017, 04, 29, 0, 0, 00)
           var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
           var diff = t2 - t1
           var diffYears = Math.floor(diff / years)
           var diffDays = Math.floor((diff / days) - diffYears * 365)
           var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
           var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
           var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
               diffMinutes * minutes) / seconds)
           document.getElementById("lovexhjSitetime").innerHTML = "我们已经在一起<br />" + diffYears + "年" + diffDays + "天" +
               diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
       }
       lovexhjSitetime()

复制以下代码到开发者设置->全局右侧边栏广告位；

<aside class="widget_text sidebar-widget widget_custom_html fadeInUp">
<div class="textwidget custom-html-widget">
<div id="lovexhj" style="width: 100%; height: 100px; text-align: center; font-size: 1rem;">   
<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
<!-- 左边的头像 -->
<img src="http://www.creater.ltd:8888/down/GSETwuw8qSZA" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 中间的图片 -->
<img src="https://cdn.jsdelivr.net/gh/L-20021213/picture@latest/2020/09/18/lovelogo%20.gif" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 右边的头像 -->
<img src="http://www.creater.ltd:8888/down/AfrRVVqoHHYF" alt="love" style="width: 60px; border-radius: 50%;">
</div>
<p id="lovexhjSitetime" style="font-size: 0.8rem;    margin-top: 16px;  background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;">我们相恋了104天14小时47分钟19秒啦</p>  </div>
</div>
</aside>

六：美化主页文章列表宽度

详情

复制代码到开发者设置->自定义css

/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
max-width: 90%;
}

七：美化网站右侧滚动条样式

详情

复制代码到开发者设置->自定义css

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}

八：首页文章图片获取焦点放大

详情

复制代码到开发者设置->自定义css

.item-thumb{
cursor: pointer;  
transition: all 0.6s;  
}

九：粗体上色

详情

复制代码到开发者设置->自定义css

/* 粗体上色 */
strong{
color: rgb(255, 153, 0);
}

十：标签云整齐排列

详情

复制代码到开发者设置->自定义css

/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

十一：文章标题居中

详情

复制代码到开发者设置->自定义css

/*文章标题居中*/
.panel h2{
text-align: center; 
}
.panel-small h2{
text-align: center; 
}
.panel-picture h3{
text-align: center; 
}
.post-item-foot-icon{
text-align: center;
}

十二：更换站内鼠标样式

详情

复制代码到开发者设置->自定义css

body {
cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('鼠标指针图片链接'), auto;
}

十三：美化版权信息

详情

复制代码到usr/themes/handsome/post.php文件合适位置.

<!--版权声明开始-->

           <div class="entry-content l-h-2x">
             <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
               <span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
               <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
               <span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
               <span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
             </div>
           </div>

<!--版权声明结束-->