Skip to content

Customized the CSS roam-light-theme stylesheet of Maggie Appleton

Notifications You must be signed in to change notification settings

StephanvdZwaard/custom-roam-light-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Customized Roam stylesheet

Customized roam-light-theme stylesheet inspired by Maggie Appleton

Containing: - data tags - tweets - hyperlinks - highlights and more




Customized data tags


I am a big fan of the Stylesheet of Maggie Appleton, and especially like the possibility to customize data tags as she explained on her website.

I've created several data tags, and you can use these straightaway if you copy the CSS code of the custom-data-tags.css file into your roam/css page. As you may have noticed, the data tags also include symbols and icons before the tag. You can create your own tags by changing the CSS code. For adding your own symbols or icons, I recommend you to go to Emojipedia




Customized tweets


Do you want your Tweets to be a bit smaller? That can also be done using CSS. I have adjusted the size of the embedded Tweets, which is shown here below:




Customized hyperlinks


Based on the URL of the hyperlink, you can now also create custom colors for specific websites. In this example, references made to a URL that starts with https://medium.com/ will be colored orange instead of blue.




Customized stylesheet


In brief, I made several adjustments to the CSS stylesheet of Maggie Appleton to make my Roam look like this:




Example of reading list


Here, you find an example of what my queried reading list looks like with the added custom data tags.


About

Customized the CSS roam-light-theme stylesheet of Maggie Appleton

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages