主题
使用文档
首页其它说明

自定义样式

本文提供一些个性化样式代码，将代码添加到主题选项→定制风格→自定义样式中。

代码只供参考，不能保证完美适配主题目前的样式。

让链接失效

展开代码

 

比如想让公司首页新闻资讯A模块，链接失效，不能点击，仅做为图片展示，可以将下面的代码添加到自定义样式中：

.group-cat-a a  {
	pointer-events: none;
	cursor: default;
}

其中的pointer-events: none是让鼠标穿透，其它模块以此类推。

移动端菜单按钮改为文字

展开代码

按钮有背景色

.menu-but.bars:after {
	position: absolute;
	top: 8px;
	left: 0;
	content: "菜单";
	background: #999;
	width: 45px;
	color: #fff;
	text-align: center;
	padding: 2px 5px;
	border-radius: 3px;
}

.heng {
	display: none;
}

修改background: #999颜色值。

无背景色

.menu-but.bars:after {
	position: absolute;
	top: 8px;
	left: 0;
	content: "菜单";
	width: 45px;
	color: #666;
	text-align: center;
	padding: 2px 5px;
}

.heng {
	display: none;
}

如果文字多，可适当增加调整width: 45px数值

网页变灰

展开代码

全站变灰

html {
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	filter: grayscale(90%);
	-webkit-filter: grayscale(90%);
	-moz-filter: grayscale(90%);
	-ms-filter: grayscale(90%);
	-o-filter: grayscale(90%);
}

仅首页变灰

html .home {
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	filter: grayscale(90%);
	-webkit-filter: grayscale(90%);
	-moz-filter: grayscale(90%);
	-ms-filter: grayscale(90%);
	-o-filter: grayscale(90%);
}

其中90%，还保留一点颜色，可适当调这个数值，比如50%，保留一半颜色，看惯花花绿绿，偶而让网页变素，也挺养眼，改成100%，全灰。

提示：上面代码对各版本IE浏览器无效，可能会造成部分样式错乱...

菜单上加角标

展开代码

方法有很多，下面是我自己用的

在准备添加角标的菜单项，CSS类中添加betips

如果没有CSS类选项，打开右上角显示选项，勾选CSS类。

这后将下面的样式代码添加到主题选项→定制风格→自定义样式中：

.betips {
	position: relative;
}

/** 背景及文字 **/
.betips:after {
	background: linear-gradient(to right,#ee0979,#ff6a00);
	position: absolute;
	top: 8px;
	right: 16px;
	content: "推荐";
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	padding: 5px 5px;
	border-radius: 3px;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	pointer-events: none;
	animation: fade-in;
	-webkit-animation: fade-in;
	animation-duration: 1.5s;
	-webkit-animation: fade-in 1.5s;
}

/** 箭头 **/
.betips:before {
	position: absolute;
	top: -10px;
	right: 33px;
	content: "\f140";
	font-size: 16px;
	font-family: dashicons;
	color: #ee0979;
	z-index: 999;
	pointer-events: none;
	animation: fade-in;
	-webkit-animation: fade-in;
	animation-duration: 1.5s;
	-webkit-animation: fade-in 1.5s;
}

/** 鼠标悬停和当前页面隐藏 **/
.betips:hover:before, 
.betips:hover:after, 
.current-menu-item.betips:before, 
.current-menu-item.betips:after {
	display: none;
}

/** 移动端隐藏箭头 **/
.sidr .betips:before {
	display: none;
}

替换其中的文字。

显示网页FPS帧率

展开代码

蛋痛的功能，有用户说要加个这玩意，将下面代码，添加到主题选项 → seo设置 → 流量统计代码 → 同步

<script>
	jQuery(document).ready(function($){
	var showFPS = (function() {
		var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
		function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
		var e, pe, pid, fps, last, offset, step, appendFps;

		fps = 0;
		last = Date.now();
		step = function() {
			offset = Date.now() - last;
			fps += 1;
			if (offset >= 1000) {
				last += offset;
				appendFps(fps);
				fps = 0;
			}
			requestAnimationFrame(step);
		};
		appendFps = function(fps) {
			console.log(fps + ' FPS');
			$('#fps').html(fps + ' FPS');
		};
		step();
	})();
});
</script>
<div id="fps" style="position: fixed;right: 20px;bottom: 5px;color: #fff;font-size: 1.2rem;line-height: 1;z-index:10000;padding: 5px 8px;background: #3690cf;border-radius: 5px;"></div>

添加后，将在右下角显示FPS帧率

待续...