handsome theme has been used for some time. Today, some modifications have been made to the theme. After the modification, it can hardly be seen that the theme has been modified, because some mouse over styles have been added, which makes it feel busy. At present, the latest version 6.0 has been modified, and some styles in other versions will become invalid In order to reduce the modification of the source code, most of the beautification can be directly added to the background developer settings - Custom css.
1. Avatar breathing halo and mouse hover rotation amplification
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.vertical-avatar img:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}If you only need a monochrome breathing aura, such as red, you can change the keyframe animation to:
@keyframes light {
from {
box-shadow: 0 0 4px #f00;
}
to {
box-shadow: 0 0 16px #f00;
}
}2. The left article icon and comment avatar are rounded, and the mouse hovers and rotates
.img-square {
transition: all 0.3s;
border-radius: 50%;
}
.img-square:hover {
transform: rotate(360deg);
}3. The reward icon in the article jumps
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}4. Color label cloud
I've seen a plug-in of color tag cloud before. Here, js is used to randomly add predefined colors to the tags, and the colors will be changed every time you refresh:
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;
});If pjax is enabled in the topic, you also need to add the above code to the pjax pjax callback function.
5. Hover and float the home page article list
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
/* 2019/11/20 Update compatible large / small header mode and interleaving mode */6. Hover and enlarge the header of the home page article list and hide it out of range
.index-post-img {
overflow: hidden;
}
.item-thumb,
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb:hover,
.item-thumb-small:hover {
transform: scale(1.1)
}
/* 2019/11/20 Update compatible large / small header mode and interleaving mode */7. Hover and enlarge the article header and article picture, and hide them out of range
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}8. Home page article layout shading
This item modifies the layout of the article on the home page, including pictures, so that a gorgeous shadow is added around it. Add the following code to the background theme settings custom CSS.
#The shadow color changes the value after rgba (don't copy this line)
/*panel shadow*/
.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);
}
#If you also want to have shadows around the box, add the following code
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}9. Typecho code highlight plugin Code Prettify
10. One click comment punch in function
1. First, add the following code in the background – > set appearance – > developer settings – > Custom JavaScript: PJAX callback function also adds this code
function a(a, b, c) {
if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
else if (a.selectionStart || "0" == a.selectionStart) {
var l = a.selectionStart,
m = a.selectionEnd,
n = m;
c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
c ? n += b.length + c.length : n += b.length - m + l;
l == m && c && (n -= c.length);
a.focus();
a.selectionStart = n;
a.selectionEnd = n
} else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
a(c, "Drop! Student card! Punch in time:" + b, "，Please fasten your seat belt~")
},
zan: function() {
a(c, " Well written,I'll give you a monkey!")
},
cai: function() {
a(c, "Sao Nian,I suspect you wrote a fake article! ")
}
};2. Open component / comments. In the topic directory From line 126 to line 144 in PHP, modify it to the following code:
<div class="comment-form-comment form-group">
<label for="comment"><?php _me("comment") ?>
<span class="required text-danger">*</span></label>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("Say something") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO" style="display: inline;"></div>
<div class="OwO" title="punch the clock" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">punch the clock</span></div></div>
<div class="OwO" title="fabulous" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
<div class="OwO" title="step on" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip"
data-original-title="<?php _me("When this function is enabled, your comments are only visible to both the author and the comment") ?>">
<label class="secret_comment_label control-label"><?php _me("Private comment") ?></label>
<div class="secret_comment_check">
<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
<input type="checkbox" id="secret_comment_checkbox">
<i></i>
</label>
</div>
</div>
</div>3. In the background – > set appearance – > developer settings – > Customize CSS, add the following code:
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}11. Textbox typewriter effects
Copy the following code and add it to the background theme settings - Developer settings - customize the HTML code at the end of the output body
<!--Textbox typewriter effects--> <script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>
12. Customize mouse style
Here, take the handsome theme as an example: appearance - theme settings - development settings - Custom css. Insert the following code:
body {
cursor:url('http://like.gmkh.top/css / cursor / S1 cur'), auto;
}
select, input, textarea, a, button {
cursor:url('http://like.gmkh.top/css / cursor / S2 cur'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('http://like.gmkh.top/css / cursor / S1 cur'), auto;
}13. Typecho hanging cat top plug-in
usage method
Download Plug-in decompression GoTop-master.zip Rename folder to GoTop Upload to usr/plugins catalogue Log in to the background and enable it
Update log
1.0.0 Project completion 1.1.0 Fixed the problem of opening the site default drop-down 1.2.0 Increase dynamic effect