BIJIV

Yodu主题自定义css参考文档
模板自定义css参考文档1.3.0 这个文档只为不懂css的人提供 文章首行缩进 #post .content p...
扫描右侧二维码阅读全文
14
2018/04

Yodu主题自定义css参考文档

模板自定义css参考文档1.3.0

这个文档只为不懂css的人提供

文章首行缩进

#post .content p {
    text-indent: 2em;
}
#post .content .jrotty-links p,#post .content blockquote p {
    text-indent: 0;
}

文章图片取消默认居中,改为居左【仅适用于2.7版(含)之前】

#post  .content img {
    margin-left: inherit;
}
#post .content #QR img,#post .content #ew img{
    margin-left: auto;
}

文章图片取消默认居中,改为居左【适用于2.8版本以上】

.figure.nocaption.fig-100 {
    text-align: left;
}

调整文章图片大小,下面的代码中50%则为控制量

.content img {
    max-width: 50%;
}
.jrotty-links img {
    max-width: 100%;
}

隐藏‘阅读更多’文字

p.more {
    display: none;
}

取消头像鼠标移入后旋转动画

.tx img {
    transition: inherit;
}

将模板任意皮肤变成阴影风格,只针对电脑屏幕[最好在3.3版本以上尝试]

@media only screen and (min-width:768px){
.post {    padding: 14px 8px 0 8px;
}
.page {margin: 0 20px 10px 20px;}
.respond #comment-form {
    padding: 5px;
}
.respond #comment-form,.post,.comment-main,.info-com,.btn--one,.btn--two,.page-navigator .current {
   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
.post:hover { 
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}
sidebar{border-right:0px;
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.15);}
}

yoduplayer插件手机端位置下调50px

@media only screen and (max-width:768px){#bgmplayer {
    top: 50px;
}}

隐藏底部模板版权

a#cpy {
    display: none;
}

随机友链排序功能拓展

将以下代码放到links.php最下面即可

<script>
var $_gameBox = $('#post .content ul'),
a = $('#post .content ul a').toArray();
while (a.length) $_gameBox.prepend(a.splice(~~(Math.random() * a.length), 1)[0]);
</script>

主题的高亮代码

主题默认的高亮类型:markup、css、javascript、bash、git、ini、json、nginx、php、pug、sql、wiki
markdown 插入代码块并高亮,需要在 ``` 后面指定代码语言类型,比如高亮 javascript:

不指定语言类型:

var text = 'hello';
alert(text);

显示为:
var text = 'hello';
alert(text);
指定语言类型:

var text = 'hello';
alert(text);

显示为:
var text = 'hello';
alert(text);

如果你没有开启 markdown 书写功能,高亮代码的话需要添加 lang 标签来指定代码语言,例如:

var text = 'hello';
alert(text);

显示为:

var text = 'hello';
alert(text);

隐藏内容

此处内容需要评论回复后(审核通过)方可阅读。

最后修改:2019 年 01 月 03 日 09 : 44 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. woasda

    还有隐藏的?(╯‵□′)╯︵┴─┴

发表评论