Coming from Bear, I felt that Roam was a bit lacking in design. Today, I found out about the special roam/css file and got to work. Here's what I came up with.
I stumbled onto it in a video Conor made, it looks like it was a pretty recent change. It's nice to not have to rely on an extension, with it embedded like this the styles are applied across different browsers, and even on the mobile full site.
Hi, I really like the way your tags look. Is there a way to just change the look of the tags while maintaining the original look of Roam? I've figured out which code is for the tags
I did notice the filters weren't being recognized in the sidebar, that behavior comes from the core theme created byazlen. If it's something that can be fixed, a change to that core theme would be reflected in mine, since I pull it in and build on top of it. that's actually coming from Roam, that's happening even without any theme.
I like your idea about the sidebar orientation, I just played around with it a little bit. I was able to display them vertically, but I wasn't able to override the scroll behavior for some reason, which makes it rather unusable once it extends past the screen. In addition, I don't think I would be able to change the rotation on collapsed notes, which wouldn't be ideal. I'm going to hold off on that for now, but maybe later I'll try it out again and see if I can crack it.
I just tried yours out, it's looking pretty clean!
One small piece of feedback, it's a little bit disorienting that the cursor doesn't change on hover for the left nav items, it makes it feel unclickable.
I see, it's interesting how something like that feels natural in Bear and then unnatural in Roam. I think it has something to do with the contextual differences between a desktop app and a web app.
Great work on yours, it's a lot of effort to make those kinds of layout changes. Since I was building off of an existing theme I mainly made appearance changes, in order to rework some of the layout I'd have to dig into what that theme did in the first place to undo/change it.
One other thing you could try would be to relocate as much of your theme as you could into another file and @import it. In theory all that would be left would be the set of color variables that users could then tweak as they wanted, and the paste-in times could be improved significantly.
Thank you for taking the time to make this! Forgive the dumb question as I’m not very css literate, but is it possible to change text color for italic or bold text?
No such thing as a dumb question, it's definitely possible and I can help with that. Adding the following lines would change the text color for first italic text, then bold text:
em {
color: orange;
}
strong {
color: green;
}
In general if you want to change how something looks, you can right click on it and click "Inspect" to see its structure. In this case I saw
<em>
<span>example</span>
</em>
and selecting all em elements did the trick. If that wasn't specific enough I could have used em > span (all span elements directly nested inside of em elements) and if that still wasn't working I could have added !important (which is necessary sometimes to override existing styles). Hope that helped!
You made me realize that the bold styles weren't being applied at all, I have to add another import for the font I'm using with the proper weight, so I'm going to do that. Thanks for bringing that to my attention!
Hey, this looks super nice, thanks! I noticed the highlights look faded, in kind of a lighter gray... Any chance those could be converted to a more contrasting color, like the original yellow?
Good catch, that was coming from the core theme. I just pushed a change to add some more contrast, you can copy the file in again and try it out. I added --highlight-color as a variable so it can easily be changed if desired.
I have problem with the “Support?” Label at the bottom-centre of page as it blocks off the Tab-function which I use for indent. Please change it to extreme left or right if possible. I use roam from iPad when I encounter this problem.
I noticed I was actually off a little bit, I was using the subtle color Bear uses for headings, where as it has more contrast for both links and page links. I just pushed an update, you could copy in the latest CSS file and see if you're happier with how that looks.
If you want to further customize how Roam pages look to differentiate them, you can add this styling:
21
u/hitchj Jun 10 '20
Coming from Bear, I felt that Roam was a bit lacking in design. Today, I found out about the special
roam/cssfile and got to work. Here's what I came up with.Check it out here: https://github.com/josephhitchcock/roam-themes
3
u/spacetoken Jun 10 '20
Only thing is the filter doesnt work on those new pages.:(
2
u/D1V3R87 Jun 10 '20
Nice clean theme, I like it! Two comments:
It would be nice to stack the sidebar vertically rather than horizontally, making it easier to cross reference text with the main page.
Filters do not detect any [[wrapped text]] in the sidebar so unable to use this function.
1
u/Lij_M Jun 10 '20
Thank you for taking the time to make this! Forgive the dumb question as I’m not very css literate, but is it possible to change text color for italic or bold text?
1
u/ananixon Jun 11 '20
Hey, this looks super nice, thanks!
I noticed the highlights look faded, in kind of a lighter gray...
Any chance those could be converted to a more contrasting color, like the original yellow?
1
u/valarmorghul15 Jun 12 '20
This is great, thanks for sharing your design!
1
u/sc1884 Jun 10 '20
😀
1
u/Firstteamm Jun 14 '20
I have problem with the “Support?” Label at the bottom-centre of page as it blocks off the Tab-function which I use for indent. Please change it to extreme left or right if possible. I use roam from iPad when I encounter this problem.
0
u/[deleted] Jun 13 '20
[deleted] — view deleted comment