想知道锤子便签主题的边框背景颜色的代码和标题用的是什么字体

本贴最后更新于 319 天前,其中的信息可能已经时移俗易

想知道笔记插件锤子便签主题的边框背景颜色的代码和标题用的是什么字体(见图中蓝色圈出部分)

捕获 2.JPG

另外,想知道如何更换笔记正文字体的字体颜色,笔记自带外观-字体颜色中没有喜欢的字体颜色,笔记插件“配色方案”和“TE 颜色选择器”不太会用,代码也不太懂,还有没有其它办法,新手小白一枚,谢谢啦

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26161 引用 • 108673 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10055 引用 • 45689 回帖 • 69 关注

相关帖子

被采纳的回答
  • wilsons 3

    边框背景颜色的代码,这个背景其实是个图片,更换图片即可

    图片路径:conf/appearance/themes/chuizi/src/background1.jpg

    .fn__flex.fn__flex-1 {
        background-image: url(../../src/background1.jpg);
    }
    

    标题字体是 systh,参见下面的代码

    这个字体的路径在 conf/appearance/themes/chuizi/src/SourceHanSerifCN-Heavy.ttf

    .block__logo, .b3-dialog__container .config__panel>.b3-tab-bar::before, .protyle-title__input, .sy__outline .b3-list-item[title] {
        font-family: "systh" !important;
        font-weight: bold !important;
    }
    

    如何更换笔记正文字体的字体颜色,锤子主题的正文颜色继承自 body,其实如果单纯想改变正文颜色,建议用下面的样式(把下面的代码添加到设置 》外观 》代码片段 》css 里即可)

    .protyle-wysiwyg, .protyle-preview p {
        /* 颜色根据自己喜好修改,这里仅仅是演示,具体颜色值可自定义或吸色工具吸取或通过在线调色版复制 */
        color: red;
    }
    

    效果

    image.png

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons 3

    边框背景颜色的代码,这个背景其实是个图片,更换图片即可

    图片路径:conf/appearance/themes/chuizi/src/background1.jpg

    .fn__flex.fn__flex-1 {
        background-image: url(../../src/background1.jpg);
    }
    

    标题字体是 systh,参见下面的代码

    这个字体的路径在 conf/appearance/themes/chuizi/src/SourceHanSerifCN-Heavy.ttf

    .block__logo, .b3-dialog__container .config__panel>.b3-tab-bar::before, .protyle-title__input, .sy__outline .b3-list-item[title] {
        font-family: "systh" !important;
        font-weight: bold !important;
    }
    

    如何更换笔记正文字体的字体颜色,锤子主题的正文颜色继承自 body,其实如果单纯想改变正文颜色,建议用下面的样式(把下面的代码添加到设置 》外观 》代码片段 》css 里即可)

    .protyle-wysiwyg, .protyle-preview p {
        /* 颜色根据自己喜好修改,这里仅仅是演示,具体颜色值可自定义或吸色工具吸取或通过在线调色版复制 */
        color: red;
    }
    

    效果

    image.png

    1 回复
    1 操作
    wilsons 在 2024-08-18 13:23:08 更新了该回帖
  • xueluo
    作者

    请问笔记正文字体和块的背景颜色(图中蓝色圈出部分)

    捕获 3.JPG

    能否更换成你所说的边框背景图片或者实现类似的效果

    image.png

    1 回复
    1 操作
    xueluo 在 2024-08-18 17:50:14 更新了该回帖
  • wilsons 1

    代码

    .protyle-wysiwyg [data-type]:not([data-sb-layout]) {
        background-image: url(/appearance/themes/chuizi/src/background1.jpg);
    }
    

    是想要这种效果吗?最好给个案例

    image.png

    1 回复
  • xueluo
    作者

    根据你提供的代码片段,安装后显示结果如下:

    1.jpg

    想要实现以下效果:

    1、紫色、红色圈出部分不显示边框背景图片效果,希望与正文背景颜色(绿色圈出部分)一致;

    2、蓝色圈出部分显示边框背景效果

    谢谢大佬 🙏 🙏

    2 回复
  • wilsons 1

    你说的效果,用通用 css 做不到,通用 css 会影响其他块的样式。

    你这是属于某些块的特殊定制,只能通过以下方式实现。

    1. 根据每个块的 id 单独写样式
    2. 写成模板,往里面填内容
    3. 安装 vscode 编辑器,通过源码和 ial 对每个块单独调整

    这里推荐 2 使用模板方式,模板方式易复用和易迁移。

    但每种模板都是固定格式和样式。

    1 回复
  • xueluo
    作者

    谢谢大佬!感觉有些折腾,就不再弄了

  • wilsons 1

    我根据你说的效果,做了一个模板,仅供参考,图标和文字,你自己改改,如果自定义其他样式,可参考模板里的 style 属性做调整。

    模板代码

    https://github.com/wish5115/my-softs/blob/main/templates/%E6%80%9D%E6%BA%90-%E5%81%A5%E5%BA%B7%E5%B0%8F%E8%B4%B4%E5%A3%AB.md?plain=1#L1

    下载上面的代码或保存为 xxxxx.md,然后放到/data/templates/文件夹中,然后就可以通过斜杠命令 /模板 进行导入了

    效果

    image.png

    也可参考这里的代码,感觉两个需求类似

    分享用 Savor Callout 插件实现康奈尔笔记和九宫格笔记模板

    1 回复
  • xueluo
    作者

    太感谢了,谢谢大佬!👍 👍

请输入回帖内容 ...

推荐标签 标签

  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 34 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 124 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 661 关注
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 1 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    44 引用 • 208 回帖 • 1 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 442 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 4 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 180 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 678 关注
  • 自由行
    3 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 38 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    372 引用 • 1857 回帖 • 1 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 240 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖 • 2 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 9 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 61 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 5 关注
  • Excel
    31 引用 • 28 回帖
  • Outlook
    1 引用 • 5 回帖 • 1 关注