登录 注册

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

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

捕获 2.JPG

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

  • 思源笔记

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

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

    22252 引用 • 88940 回帖 • 1 关注
  • Q&A

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

    8075 引用 • 36885 回帖 • 162 关注
蚌埠 位置 8 回帖
4
4
204 116 88

相关帖子

被采纳的回答
  • 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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 回复
  • 其他回帖
  • 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 •
    作者

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

    1.jpg

    想要实现以下效果:

    1、紫色、红色圈出部分不显示边框背景图片效果，希望与正文背景颜色（绿色圈出部分）一致；

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

    谢谢大佬 🙏 🙏

    2 回复
  • wilsons • • 1
    付费者 捐赠者

    代码

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

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

    image.png

    1 回复
  • 查看全部回帖
xueluo
蚌埠
回帖
41
 帖子
16
 积分
3608

近期热议

推荐标签 标签

  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    339 引用 • 708 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    63 引用 • 348 回帖 • 1 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 133 关注
  • 创业

    你比 99% 的人都优秀么？

    84 引用 • 1399 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 707 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 53 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 617 关注
  • Solidity

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

    3 引用 • 18 回帖 • 391 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 327 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 532 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    5 引用 • 107 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 9 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    943 引用 • 943 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    541 引用 • 672 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Rust

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

    58 引用 • 22 回帖 • 4 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 390 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 628 关注

最新标签