How do i change ATOM theme (im noob in css)

[Jovan1]

I watched this video about Obsidian and I really want to give it a shot.
At 6:08 there is a snippet I want to add to my atom theme
I installed an app called Atom, but I don’t know where to put it.

I don’t know where to put this snippet he showed us in video.
Please help guys.

https://www.youtube.com/watch?v=E6ySG7xYgjY (VIDEO)

[ariehen]

You’ll have to get the snippet from somewhere, but how to use CSS snippets is detailed here:

CSS snippets - Obsidian Help

[Jovan1]

Isn’t this snippet I should use?

h1 {

background: rgb(198,255,221);
background: radial-gradient(circle, rgba(198,255,221,1) 0%, rgba(255,224,155,1) 53%, rgba(255,200,202,1) 100%); -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {

background: radial-gradient(circle, rgba(255, 239, 186,1) 0%, rgba(255,255,255,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

This was shown in the video above.

[Jovan1]

Never mind, found it.

I was just in editing mode, when I switched to viewing it appeared.

Thank you man!

[ariehen]

Got it. Yeah, I wasn’t sure if you had the snippet or not.

For next time, keep in mind simple selectors like h1, p, code etc., only cover rendered/reading modes. Easy to spot.

Live Preview is a lot more messy .

[Jovan1]

Can I make it so I can also see it in editing mode?

[ariehen]

Might be doable. Generally heading selectors look something like .HyperMD-header-1 for editing mode.

There’s a great guide here:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[Jovan1]

@ariehen

.HyperMD-header-1

Man, I am too smart, thank you for giving me .HyperMD-header-1 sentence.

I just made different snippet with same code, I just changed tittle.

Now I have 2 snippets, one for editing and one for viewing.

Thanks so much dude.

[ariehen]

Totally up to you, but you could put both of those in the same .css file as they are related and naturally go together.

[Jovan1]

Yeah, that was my first instinct, but I didn’t work for some reason.

[Jovan1]

Fuck, my heading 2 doesn’t work.

What do you think the problem is?

[ariehen]

I’m not really sure what the headings should look like (I haven’t watched the video), but with some with some copying, pasting, and random adjustments, I ended up with this:

h1 {
    background: rgb(198,255,221);
    background: radial-gradient(circle, rgba(198,255,221,1) 0%, rgba(255,224,155,1) 53%, rgba(255,200,202,1) 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    background: rgb(198,255,221);
    background: radial-gradient(circle, rgba(75,255,221,1) 0%, rgba(255,100,155,1) 53%, rgba(255,200,202,200) 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[Jovan1]

Thanks man, you helped me a lot. Really appreciate it G