Awesome CSS for beginners and intermediates

Evergreen Notes
#1

Hi All

I have gotten a HUGE amount of functionality out of CSS modifications - they can be both cosmetic (making things easier on the eyes), and also functional (adding such things as multicolored highlighters, etc etc)

Should we start a thread aimed at anyone from beginner-level on up, coaching people on CSS use, starting with how to turn on the custom CSSes, assuming zero background knowledge?

then maybe we can also start posting links, and CSS code snippets, for the mods that we’ve found most helpful/beautiful …

(Will probably start expanding this thread a little bit at a time, starting with instructions for how to activate custom CSSes for the complete beginner, then moving on to some examples…)

Stay tuned

19 Likes
#2

That would be great! I’d like to know a lot more about what CSS can do in Roam.

5 Likes
#3

This is a great idea. I would definitely be delighted.

1 Like
#4

Love this idea . I know how to copy a theme someone has already made but would be great to know what the lines do to modify things. Besides, if I am using the stuff I would like to know what it does

2 Likes
#5

Check this work:


Really nice organized and clear. I used this theme to modify mine and understand what does what on ROAM.
7 Likes
#6

@SawaSawa thanks! this is a good teaching example because it’s heavily commented.

#7

OK let’s get started here.

CSS for beginners, part one.

1. What is CSS?

It stands for “Cascading Style Sheet”, and it’s one of the three main formal languages that helps define what a website looks like. The other two “languages” are Javascript (useful for handling situations that require inputs and outputs, like navigating an online form) and HTML (which defines what the page-elements of any given website are).

CSS is kind of like a programming language, but it doesn’t really have a sequential flow, the way many other programming languages do.

Instead, it consists of a bunch of tiny instruction-lets that are executed more or less in parallel, so you can pick and choose lots of tiny scraps of code for their cumulative effect. These little scraps of code may or may not conflict with each other.

2. How do I activate CSS within my Roam Database?

There are a few different ways. I’ll be upfront - my favorite is to use the Chrome/Firefox browser extension, “Stylus”.

My main reasons for favoring “Stylus” : it gives you an interface (in the browser pulldown menu) that lets you flick switches on individual CSS’es - that’s helpful for determining exactly what each CSS does if you have installed multiples. You can quickly pick and choose which CSS’es you want to be “active”.

It also has a helpful “debugging” feature, in that when you enter a CSS for the first time, it “flags” what it perceives to be errors. (missing parentheses, etc etc)

But if you don’t want to deal with Stylus, you can also include the CSS directly into the Roam database - if you put it under the page [[roam/css]].

All CSS snippets that are correctly entered within “CSS code blocks” (use ``` to create a “code block”, and choose CSS to make sure it’s the right kind of code block) - if they are on that [[roam/css]] page - execute automatically - for that database, and that database only.

This is a nice feature if you want to differentiate how your databases appear TO VISITORS - when people come in to look at your public Roam, what they see will be defined by the native CSS that you put on that page… regardless of whether that user is running the “Stylus” extension.

(Also, a little “hack” for those who want to write the CSS natively into the Roam itself - if you want to be able to have a “menu” of different CSS in your database, you can create “block versions” including different (or no CSS at all) and rotate through them or turn them off, by choosing different block versions.)

A third way to run CSS’es, is via the browser extension “Roam Toolkit”. You can copy-paste CSS into the single field given for that purpose in the “Roam Toolkit”.

Although this works as a quick, on-the-fly solution, the biggest disadvantage is that in the long run this forces you to have a single “monster CSS”, that you then can’t pick and choose individual elements out of… but for completeness’ sake - just so you know - that’s also an option.

It’s probably beyond my scope to completely explain how to use the “Stylus” extension, but I encourage you to play around with it - the UI is pretty intuitive and well designed. LMK if you have questions about it, and I will answer in this thread.

Screen Shot 2020-07-26 at 6.49.36 AM
Screen Shot 2020-07-26 at 6.49.36 AM636×794 149 KB
.

When you are ready to add a CSS to your database, just go to the pulldown menu for “Stylus”, while you have the tab open to your database. See screenshot. It’s the aquamarine-colored “S” that has a number 20. (in my screenshot above, I already have 20 CSS “scripts” loaded in, and active. I’ll get to that later, and share a few of my functional favorites.)

But when you get started, you just click on one of the options at the bottom of this pulldown, choosing to either write a style for ALL roam research databases in general - or JUST for this particular database-URL you are visiting, depending on which option you choose.

Click on the “write style” button, and you’ll get a new tab opened for you for CSS editing.

Copy-paste the desired code into the code window. Be sure to give your style a distinct name in the naming window on the left, right under where it says “Add Style”… Then click “Save”, and BOOM!

Easey-Peasey. Your new CSS is active.

OK that’s it for now. I’ll be sharing some of my favorite functional CSSes a little later. Peace out

9 Likes
Umbrella feature request list
#8

The way to create css within ROAM is as following:

  1. Create a [[roam/css]] it has to be exactly written like that.
  2. Create a block with /Code Block
  3. Paste your css code and select css on the drop down menu at the right of the first line of code.
  4. Go as far and deep or near and shallow as you want.

image
image759×1017 132 KB

image
image1735×1248 318 KB

3 Likes
#9

@SawaSawa -

Thanks for adding in the more detailed instructions for putting the CSS into the roam database itself!

I skimmed that part, so I appreciate your filling that in.

1 Like
#10

You’re very welcomed sir.

#11

This one’s very much personal preference, but on top of any other styles I have picked up I’m very keen on oldstyle numbers in running text. Not entirely sure why I notice it more in Roam than elsewhere – possibly because I write more numbers than I read.

This requires changing the font in blocks to one that supports oldstyle numerics. I’m quite fond of Calibri, which comes with Microsoft Office. I’m quite happy to not override the font for other text, though. The full CSS is:

.rm-block-text {
  font-family: Calibri, sans;
  font-variant-numeric: oldstyle-nums;
}
div {
  font-family: inherit;
}
body {
  font-family: 'Inter', sans-serif;
}```
1 Like
#12

@andrew, thanks for this!

Would you be willing to break this down in plain language, to help neophytes (including me) understand what each instruction does, here?

1 Like
#13

I like a lot this css hack can you please further explain it? That oldstyle-nums belongs only to the Calibri font? I’m trying to make my numbers monospace But the rest of the text the default ROAM font.

.rm-block-text {
font-family: ;
font-variant-numeric: monospace;
}

But I couldn’t make it happen can you please give me a hand on this one? Thanks.

#14

OK I’m going to start with some simple and functional CSSes

This one here is a good starting point - it’s what you put in CSS to customize the color of a particular hashtag:

span[data-tag=“the-hashtag’s-name”] {
background-color: #00ff0d75 !important;
color: #012c04 !important;
}

Don’t get put off by the eight-digit hexadecimal codes - they are just color-specifiers. When you enter this into either stylus or Roam you will also see a tiny “color picker” square - click in that square and you can make the color whatever you want.

Be sure to choose an “opacity” that makes sense.

Make as many copies as you want, however many hashtags you want to have their own colors, the system supports any number of custom CSSes running in parallel.

#15

Very nice example sir. I have my roam/css and roam/css/color on my shortcuts, so I can open them side by side to be able to see my color palette and use it on the css.

image
image2732×2048 729 KB

3 Likes
#16

great idea! so you have a “directory” of the colors that you use - I’m going to do that too, thanks for the suggestion

1 Like
#17

Yes sir. I used https://coolors.co/ to name the colors I use. I’m missing the last two. The nice thing of keeping them in a code block Is that I actually can see the color.

1 Like
#18

#2. (I’m numbering these so that i can index them at some point)

One of my favorite “practical” CSSes is this one, from @CatoMinor3 on Twitter.

It replaces nested [[ ]] with multiple layers of underlining - this is useful both for reading nested page names, and also for “zeroing in” on the right level of concatenation when you need it.

Check out this tweet and its replies for a demo and a link to the CSS itself.

#19

OK one more thing to add:

This public Roam database, maintained by Ramses Oudt and Twitter user CatoMinor3, is a TREASURE TROVE of CSS information, and everybody on this forum who is interested in custom CSS should be aware of its existence.

go ahead and explore - it’s worth your time if you are almost anywhere on the CSS learning curve. Below link takes you to their public Roam.

1 Like
#20

#3. Here’s a fun one - it will not only custom color a set of hashtags, but it will insert a little (non-functional) emoji (symbol) in front of them, gives a nice way to add visual cues via the emoji library to hashtags of your choice.

Of course you can customize the emoji tags to whatever you want.

note that the emojis DON’T alter the identity or functionality of the hashtag in any way, they just pop up automatically like little street signs. this is useful because you can also deliberately use emojis within tags and page names, and Roam treats them just like any other text in terms of autocomplete and findability. They have their uses, but here they are completely cosmetic.

to get to the CSS, click through to his github library, click the button “go to file”, and choose the file named CSS-custom-roam-data-tags.css

1 Like