登录 注册

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

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

捕获 2.JPG

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

  • 思源笔记

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

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

    20645 引用 • 80672 回帖 • 1 关注
  • Q&A

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

    7274 引用 • 33161 回帖 • 203 关注
蚌埠 位置 8 回帖
4
4
93 90 3

相关帖子

被采纳的回答
  • 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 • • 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 更新了该回帖
  • 其他回帖
  • 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 • • 1
    付费者 捐赠者

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

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

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

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

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

    1 回复
  • xueluo •
    作者

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

    1.jpg

    想要实现以下效果:

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

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

    谢谢大佬 🙏 🙏

    2 回复
  • 查看全部回帖
xueluo
蚌埠
回帖
21
 帖子
7
 积分
1026

近期热议

推荐标签 标签

  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    76 引用 • 390 回帖 • 1 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 524 关注
  • Caddy

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

    11 引用 • 54 回帖 • 146 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 45 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 417 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 562 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 352 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 137 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 510 关注
  • 安全

    安全永远都不是一个小问题。

    195 引用 • 813 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 247 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 334 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    82 引用 • 37 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 534 关注
  • OpenShift

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

    14 引用 • 20 回帖 • 617 关注
  • gRpc
    11 引用 • 9 回帖 • 51 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 519 关注
  • Gzip

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

    9 引用 • 12 回帖 • 129 关注
  • Swift

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

    34 引用 • 37 回帖 • 519 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 615 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 2 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 713 关注

最新标签