怸歪小站

  • 一、先解决转义页自定义CSS失效
  • 二、文本logo替换成图片logo
  • 三、下一步对主题方面的研究方向
  • 网站首页
  • 所有文章
  • 工具汇总
    • 转个义
  • 记录点滴
  • 博友新章
  • 关于本站
    • 留个言
  • 文章归档
  • 榜上有名
  • 友情链接

本站已苦苦支撑

X 天 X 时 X 分 X 秒

喜欢这款主题

抢先体验 | 作者主页

【记录】通过自定义CSS实现Wing主题替换Logo为图片的方法记录

  • 怸歪
  • 2025-01-06
  • 0

昨天闲来无事想着联系下主题作者,咨询下怎么能通过自定义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更灵活。

声明:怸歪小站 | 本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
文章名称:【记录】通过自定义CSS实现Wing主题替换Logo为图片的方法记录
文章链接:https://cycy.fun/2025/01/css-wing-logo/
本站文章若无特别说明,皆为原创,转载请注明来源:怸歪小站,如果您喜欢可以订阅本站RSS feed
转载声明

  本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担。本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。
免责声明
© 2025 怸歪小站
Theme by Wing

辽ICP备2023008417号-1

  • {{ item.name }}
  • {{ item.name }}