修改方法:在主题后台-开发者设置-自定义CSS中添加
文章来源:Rat's Blog
列举部分修改,需查看更多修改请移步原作者博客
首页文章版式圆角化
本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
首页文章图片获取焦点放大
本项修改的是首页文章图片,将鼠标放到首页头图后使其放大。放大的时间和大小自行修改以下数值
/*首页文章图片获取焦点放大*/
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.05);
}
首页文章版式阴影化
本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。阴影颜色修改rgba后面的值,最后的0.35为透明度
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
文章最后修改时间格式
文件位置:/usr/theme/handsome/libs/content.php
修改public static function exportPostFooter
中对应的内容
或者查找"最后修改"
右侧博客信息背景色
文件位置:/usr/theme/handsome/component/sidebar.php
博客信息:修改<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
中的
<span class="badge
pull-right">
添加 style="background: #428bca;"
<span class="badge
pull-right" style="background: #428bca;">
标签云颜色
文章来源:SunPma'Blog
打开后台-更改外观-设置外观-开发者设置-选择好需要的颜色粘贴至自定义JavaScript即可
颜色也可以自行设定,修改代码中的十六进制颜色值即可
<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
说明:如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中;
评论显示操作系统及浏览器
文章来源:崽崽's Blog
简介、下载、使用说明等见 Github 页面
下载插件,放入/usr/plugins
目录
编辑usr/themes/handsome/component/comments.php
,在第69行左右</span>
后面插入:
<?php UserAgent_Plugin::render($comments->agent); ?>
Typecho后台启用UserAgent插件,设置显示信息