昨天闲来无事想着联系下主题作者，咨询下怎么能通过自定义CSS，替换文字logo为图片logo，由于主题作者较忙，并没有回复我。于是我在网上查找了很多方法并自己尝试了一下，最后成功实现了该功能，可能不是最优方案，最起码达到了我想要的效果。

同时我在切换回0.7版本后，发现转义页的自定义css，并不是因为0.7版本支持二是我当时在自定义css中加入了新样式。这个问题我以为是0.8.x版本新发现的，其实0.7.x版本就存在了只是解决后我给忘记了。前些天和作者反馈了之后，作者和我说是：新版主题会移除文章内的style...导致css无效了。这个问题真的不是我这个层面能解决的了，希望作者早日帮忙解决。我这边有个疑问就是为什么我的关于页面的自定义css能实现而转义页不行，后来发现关于页的时间线流程图用的是section，而转义页用的是style，这个问题等有时间再研究，闲话少叙，直奔主题！

一、先解决转义页自定义CSS失效

再自定义中的→额外css增加转义页的css样式，内容如下，加入到额外css，也算备各忘。

注：我说的转义页就是主页左边那个【转个义】，因为以前wordpress会对<script type="text/javascript"><!--mce:1--></script>进行转义，所以需要将这部分替换成特殊字符，才能在文章中发表出来。现在已经不需要了，而且html5<script>就默js的判断了，我留着这页就是那点情怀。

input.cyan{background-color:#34A853;/* 绿色 */        border:none;color:white;padding:8px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:4px;font-family:"lucida grande","lucida sans unicode",lucida,helvetica,"PingFang SC","Hiragino Sans GB","STHeiti Light","Microsoft YaHei","WenQuanYi Micro Hei"}
input.cyan:hover{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)}
input.cyan2{background-color:#4285f4}
/* 蓝色 */    input.cyan3{background-color:#ea4335}
/* 红色 */    input.cyan4{background-color:#757575;color:black}
/* 灰色 */    input.cyan5{background-color:#555555}
/* 黑色 */    input.cyan6{background-color:#fbbc05}
/* 黄色 */    div.cyc{margin:0px 0px 5px;padding:5px;border:1px solid rgb(212,212,212);border-image:none;box-sizing:border-box;width:99%;color:rgb(0,0,0);background-image:linear-gradient(rgb(255,255,255),rgb(229,238,204) 100px);background-color:rgb(229,238,204)}
textarea{resize:none;box-sizing:border-box}
textarea.cyk{padding:6px 12px;border-radius:4px;border:1px solid rgb(204,204,204);transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;border-image:none;box-sizing:border-box;width:99%;color:rgb(85,85,85);font-size:14px;display:block;box-shadow:inset 0px 1px 1px rgba(0,0,0,0.075);background-image:none;background-color:rgb(255,255,255);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
textarea.cyk:focus{border-color:rgb(102,175,233);outline:0px;box-shadow:inset 0px 1px 1px rgba(0,0,0,0.075),0px 0px 8px rgba(102,175,233,0.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
input.cyk{padding:6px 12px;border-radius:4px;border:1px solid rgb(204,204,204);transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;border-image:none;box-sizing:border-box;width:99%;color:rgb(85,85,85);font-size:14px;display:block;box-shadow:inset 0px 1px 1px rgba(0,0,0,0.075);background-image:none;background-color:rgb(255,255,255);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
input.cyk:focus{border-color:rgb(102,175,233);outline:0px;box-shadow:inset 0px 1px 1px rgba(0,0,0,0.075),0px 0px 8px rgba(102,175,233,0.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
div.cytxt{display:font-size:16px;color:#303030;line-height:1.2;font-family:"lucida grande","lucida sans unicode",lucida,helvetica,"PingFang SC","Hiragino Sans GB","STHeiti Light","Microsoft YaHei","WenQuanYi Micro Hei";word-wrap:break-word;word-break:break-all;ove flow:hidden}
.cytxtbak{display:inline-block;font-size:16px;color:#303030;line-height:1.2;font-family:"lucida grande","lucida sans unicode",lucida,helvetica,"PingFang SC","Hiragino Sans GB","STHeiti Light","Microsoft YaHei","WenQuanYi Micro Hei";word-wrap:break-word;word-break:break-all;ove flow:hidden}

二、文本logo替换成图片logo

在网上找了好多方法，最后确定了使用一下代码

height: 45px;
background-image: url('https://cycy.fun/svg/logob.svg');
background-size: cover; /* 背景图片覆盖整个元素区域 */
background-position: center; /* 图片居中显示 */
background-repeat: no-repeat; /* 图片不重复 */

修改后代码为

body .layout #header .logo {
  text-align: center;
  height: 45px;
  background-image: url('https://cycy.fun/svg/logob.svg');
  background-size: cover; /* 背景图片覆盖整个元素区域 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 图片不重复 */
}

为什么我没有放宽度的限制因为限制了之后文字logo会本限制会自动换行，我的思路是在body .layout #header .logo {里面加入以上的代码，实现一个图片的显示，然后隐藏文字logo，因为我无法实现真正意义上的替换logo。我试着将文字logo替换掉，但是图片logo的超链接也会消失。于是我的思路是不删除文字，而是让文字变成透明色，实际还是存在的。这样就能鼠标放到logo位置，也能有链接的效果。

我尝试了display: none; 、visibility: hidden; 、text-indent: -9999px; 等均不能达到想要的效果，因为上述参数也会把logo隐藏。后来换个个思路就是通过修改文字对象透明度来实现隐藏，于是在文字部分增加opacity: 0，修改后的代码如下，这样就能达到想要的效果了。

body .layout #header .logo .fullname a {
  color: #66758c;
  text-decoration: none;
  opacity: 0
}

等待作者有时间能指教下，分享下更好的实现方式。还有就是额外css可以进行压缩的你可以去我的工具汇总里面有个css高级压缩，压缩一下，也会工整不少。

三、下一步对主题方面的研究方向

今天先到这里，下一步研究下主题自动移除style的解决方法，因为想要弄点个性化的页面，免不了要用到，比如自定义样式的表格，自定义样式的按键等，感觉直接放在文章里比外挂.CSS更灵活。