Last active
June 14, 2022 07:55
-
-
Save JimmyLv/31ce763e8d4ad3f99ada11978e513e55 to your computer and use it in GitHub Desktop.
Show Image Cover behind Page Title for RoamResearch, just like Notion. https://twitter.com/Jimmy_JingLv/status/1469658825167114240?s=20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .roam-body .roam-app .roam-main .roam-article { | |
| padding-top: 0; | |
| } | |
| .roam-article [style="width: 100%;"], .rm-sidebar-outline [style="width: 100%;"], .roam-log-page .rm-title-display { | |
| background-image: url(https://unsplash.it/1600/900?random); | |
| background-size: cover; | |
| height: 30vh; | |
| margin-bottom: 10px; | |
| position: relative; | |
| } | |
| h1.rm-title-display span, h1.rm-title-editing-display textarea { | |
| color: white; | |
| position: absolute; | |
| bottom: 4px; | |
| padding-left: 10px; | |
| } | |
| .roam-log-page h1.rm-title-display { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: flex-start; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .roam-body .roam-app .roam-main .roam-article { | |
| padding-top: 0; | |
| } | |
| .roam-article [style="width: 100%;"], .rm-sidebar-outline [style="width: 100%;"] { | |
| background-image: url(https://www.notion.so/image/https%3A%2F%2Fwww.notion.so%2Fimages%2Fpage-cover%2Fmet_henri_rousseau_1907.jpg?table=block&id=e60d6ec1-04c7-4f30-b18d-be40c7e6dcd9&spaceId=63e5ea65-32b3-433d-a7a5-59ca1196fc85&width=2000&userId=43ebac43-f26b-4d91-a691-0c9fe509aea3&cache=v2); | |
| background-size: cover; | |
| height: 30vh; | |
| margin-bottom: 10px; | |
| position: relative; | |
| } | |
| h1.rm-title-display span, h1.rm-title-editing-display textarea { | |
| color: white; | |
| padding-left: 10px; | |
| position: absolute; | |
| bottom: 4px; | |
| } |
两个css：我只安装第一个，而不安装 第二个的话，那么 daily notes显示是正常的。
[[roam/css]]页面直接嵌入css 代码。我使用的是网页端RR。奇怪的是，使用slidepad 打开RR 页面，图片加载则是正常的。然而，slidepad 的中文输入一直有问题。无法使用。
所有页面标题都无法显示
我新建了 Local Graph，使用您的代码后，一切使用正常。上面反馈中出现的bug，应该是我和我安装的某个 CSS 发生了冲突。我再排查排查。感谢。使用体验很棒。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
感谢大佬的开源分享。请教两个问题。
如图：普通页面的标题显示不正常。
如图：时间轴浏览的情况下正常。
如何，进入具体日期，则显示不正常。
2.请教一下，我的安装方法是否有问题？我是在 [[roam/css]]页面直接嵌入css 代码。
随后，我又安装你视频中的方案安装了一遍。
您的这个库中的两个CSS 我是分开安装的。是否安装方法有问题？