Skip to content

Instantly share code, notes, and snippets.

@williamvz
Last active February 8, 2021 20:14
Show Gist options
  • Save williamvz/71258f588fb81db53a89e718ab30dd6b to your computer and use it in GitHub Desktop.
Save williamvz/71258f588fb81db53a89e718ab30dd6b to your computer and use it in GitHub Desktop.
CSS styling of Roam queries to show nothing but the page title that the query refers to. Useful to build simple query lists in Roam
/*
* Quick gist to modify roam css query styling.
* Built upon the work of GitMurf (https://github.com/GitMurf/Railscast-for-Roam-Research)
* and inspired by Maggie Delano (https://www.maggiedelano.com/2020/09/05/roamcsssnippets.html)
*/
/* Template */
/*
[data-tag="Template"],
[data-tag="Template"] + .rm-query .rm-query-title,
[data-tag="Template"] + .rm-query .rm-title-arrow-wrapper,
[data-tag="Template"] + .rm-query .zoom-mentions-view,
[data-tag="Template"] + .rm-query .rm-reference-item {
display:none!important;
}
*/
/* Hide everything but the result page title */
[data-tag="pageTitleOnly"],
[data-tag="pageTitleOnly"] + .rm-query .rm-reference-item {
display:none!important;
}
/* hide everything but the actual result */
[data-tag="queryResultOnly"],
[data-tag="queryResultOnly"] + .rm-query .rm-title-arrow-wrapper,
[data-tag="queryResultOnly"] + .rm-query .zoom-mentions-view {
display:none!important;
}
/* add a tag to the query string to indicate this query has been minimized */
[data-tag="pageTitleOnly"] + .rm-query .rm-query-title::after,
[data-tag="queryResultOnly"] + .rm-query .rm-query-title::after{
content: " #minimal"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment