专栏首页J的故事Cuteen主题Mashiro同款LOGO

Cuteen主题Mashiro同款LOGO

前言

方法还是 F12 Mashiro大佬博客的,和大佬博客展示的一毛一样 (:зゝ∠)用了 CSS自定义字体 + 大佬博客爬到的CSS ,Mashiro大佬用的字体包只有 “樱花庄的白猫” 这几个字,所以字体包只能自己百度喜欢的啦(注意版权问题哦)!

不多说 开干

1.首先找到一款你想要的字体,我这里用的萝莉小猫咪体。由于中文字体包都很大不利于WEB环境,这里我们需要使用 Fontmin,从字体包里提取出我们要使用的首先找到一款你想要的字体,我这里用的萝莉小猫咪体。由于中文字体包都很大不利于WEB环境,这里我们需要使用 Fontmin,从字体包里提取出我们要使用的字体。 [btn href="https://blog.slienca.top/go/aHR0cHM6Ly9lY29tZmUuZ2l0aHViLmlvL2ZvbnRtaW4vI2FwcA" type="default"]下载Fontmin客户端[/btn] 和你要用的字体包。

2.生成完成后会有个文件夹,将文件夹复制到 /usr/themes/Cuteen/static/font 目录下,文件夹重命名为你自己想要的名字,这里我用的是 LOGO

3.打开后台-外观-设置外观-自定义设置-复制代码粘贴至 头部自定义内容 引用上面文件里的 miao.css 文件

<link rel="stylesheet" type="text/css" href="/usr/themes/Cuteen/static/font/LOGO/miao.css">

4.在/usr/themes/Cuteen/base中,打开navbar.php文件将第13行的代码删除掉,并添加以下代码

 <li class="navbar-nav">
<span class="logolink miao">
    <a href="https://qrj.hk/">
    <span class="sakuraso">J</span>
    <span class="no">の</span>
    <span class="shironeko">故事</span>
    <i class="up-new"style="display:inline-block;vertical-align: middle;height: 35px;">
    </i>
    </a>
</span>
</li>

5.打开后台-外观-设置外观-自定义设置-复制代码粘贴至自定义Css样式

.miao {
font-family: 'miao', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}

.logolink .sakuraso {
background-color: rgba(255, 255, 255, .5);
border-radius: 5px;
color: #464646;
height: auto;
line-height: 25px;
margin-right: 0;
padding-bottom: 0px;
padding-top: 1px;
text-size-adjust: 100%;
width: auto;
}

.logolink a:hover .sakuraso {
background-color: orange;
color: #fff;
}

.logolink a:hover .shironeko{
   color: orange;
}

.logolink.miao a {
color: #464646;
float: left;
font-size: 25px;
font-weight: 800;
line-height: 56px;
padding-left: 6px;
padding-right: 15px;
text-decoration-line: none;
}

.logolink.miao .sakuraso,.logolink.miao .no {
font-size: 25px;
border-radius: 9px;
padding-bottom: 2px;
padding-top: 5px;
}

.logolink.miao .no {
display: inline-block;
margin-left: 5px;
}

.logolink a:hover .no {
color: orange;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}

.up-new { 
padding-right: 30px; 
padding-bottom: 5px; 
background: url(https://xxx.png) no-repeat; 
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 运营专题高效设计法(下)

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 在运营专题高效设计法(上)中,我们一起探讨了项目分析的四个步骤,从项目目标到用...

    腾讯ISUX
  • App启动页设计技巧

    App启动页,也称闪屏页,最初是为缓解用户等待Web/iOS/Android App数据加载的焦虑情绪而出现,后被设计师巧妙用于品牌文化展示,服务特色介绍以及功...

    奔跑的小鹿
  • 8个免费LOGO生成器测评,Logo设计很简单

    Logo设计,传统的设计软件之外,新一代的设计工具分为两类,一类是以创某贴、稿某设计、某画为主,根据现有的模板,修改成自己的logo名称,就可以完事了;的确很简...

    LOGO设计小能手
  • 星联赛 - 最社交电竞设定

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 得益于游戏产业蓬勃发展,社会对游戏的接受度不断提高,中国电竞同样也迎来井喷。据统计...

    腾讯ISUX
  • 人工智能Logo设计师Brandmark

    封面由ARKie智能设计赞助 早在去年 mixlab 的一篇案例报告里,就介绍过 Brandmark 了,当时 Brandmark 还是 v1 的版本,现在已...

    mixlab
  • 记录一款笑话小程序的创作完整历程(一)

    leo689
  • 人工智能Logo设计师Brandmark

    里,就介绍过 Brandmark 了,当时 Brandmark 还是 v1 的版本,现在已经是 v2 版本了,也上线了一些子产品,例如 Brand Rank 、...

    mixlab
  • ISUX 九周年 | 福利馈赠

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 今天ISUX 9岁啦!祝ISUX 生日快乐! 2011年1月11日ISUX正式成...

    腾讯ISUX
  • 黄钻十年 · 品牌设定

    腾讯ISUX
  • 如何把百度伪装成Google

    xindoo
  • 天了噜,小米也有被“借鉴”的一天

    镁客网
  • 东芝开发板驱动OLED模块显示LOGO图片

    介绍了系统SysTick实现精确延时,GPIO的输入输出使用,并实现了位带方式操作GPIO,大大简化了GPIO的输入输出控制。有了精确延时函数+GPIO控制,那...

    单片机点灯小能手
  • Reading:一款不错的Material Desgin风格的Kotlin版本的开源APP

    版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/81...

    Hankkin
  • 太「色」啦,但对眼睛好呀 | 晓组织

    知晓君
  • 「Adobe国际认证」在设计行业,为什么大但的设计,不会有好的结果?

    引言:为了保证内容的可参考性,本篇内容将引用全球品牌的实际案例进行详细说明和分析!

    IT胶囊
  • “哥是鹅”设计大揭秘

    ? ? 1.项目概述 | About This Project QQ正值21周年,为纪念这特殊的日子,QQ潮玩推出了210体限量版哥是鹅sofubi潮玩,这也...

    腾讯ISUX
  • 数字盲盒 | 在虚拟世界 探寻“盒”的边界

    ? 前言 “生活就像是一颗巧克力,你永远不知道下一颗是什么滋味。”盲盒的诞生,给“box”的意象又增加了一份神秘。2020年作为大众广为人知的盲盒元年,随着...

    腾讯ISUX
  • 正经的我,做了个不正经的项目 —— Pornhub 风格 Logo 生成器

    Logoly.Pro是一个在线的 PornHub 风格 Logo 生成工具,可以帮助你快速生成类似 PornHub 风格的 Logo

    纯洁的微笑
  • PAYJS第三方支付渠道申请及配置教程

    PAYJS第三方支付是闪电博继虎皮椒之后引入的第二家第三方支付服务商,同步整合到闪电博使用到支付接口的主题及插件。为了方便站长快速接入PAYJS支付,写下这个简...

    开心分享

扫码关注云+社区

领取腾讯云代金券