Okay got it! so apparently there wasn’t anything in my theme interfering with naked embed.
What I did was delete all of the code of my theme from obsidian.css and just add the naked embed code to test.
Since the same was happening with the default theme, without any of my theme’s code, that means that it’s the naked embed code itself making that bottom margin.
I corrected it by changing the marging value in the 4rth line.
All I did was make the marging bottom have -40px this gets rid of the big margin. (it was previously on 0)
so now it’s:
{ margin-bottom: -40px;}
You can of course change -40px to any other number to find the exact space you want, in case you want a bit more or a bit less space.
With that said if you copy this exact code at the end of my theme’s obsidian.css, that should work!
Let me know if it works alright!
/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: -40px;}
/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content {
max-height: unset;
background-color: var(--background-secondary); /*define different bg color*/
}
/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}
.markdown-embed-link:hover {
color: var(--text-accent) !important;
}
Great theme! I’m quite a noob in markdown, css and obsidian. But I saw your publicly available notes in your website and you use this theme, but there, the links are displayed inside a nice circular shape, which is absent in your theme presented here. How do I replicate this?
the original code is originally intended for tags, but I made some modifications to be able to do the same with links.
You are right, it’s not currently included in my public theme, because it’s still a work in progress code I want to make sure it works correctly before I make it public for others to use.
Also I want to make my public theme work for all types of skill levels, and if I put it there by default some might not be able to remove it.
If you’d like, I can make a video tutorial on how to add it, similar to this one I made:
Explaining the process and some of the things to keep in mind to activate this links style.
If you really want to set things up straight away, feel free to contact me directly contact and I can help you set it up!
for me, highlighting makes the text of Headers 4, 5 & 6 unreadable, as the font color is virtually identical to the ”highlight” color when lines are highlighted in the edit window (I.e., the mouse is clicked while its pointer is on that line), and also when specific text in these headers is selected. so, changed the .css file (just copying the text-title colors from Headers 1, 2 & 3), but the changes made didn’t have any effect at all on the text when highlighted in the edit pane, or even when displayed normally in the edit and preview panes… didn’t make any change to text-highlight-bg, as other highlighted text reads just fine (and am not confident enough to experiment that much!)
otherwise, this is one of the nicer themes, and – despite the header highlighting – my daily-use theme…
blessings
I tried option 2.1 – just copied the colors from 1-3: but, the resulting CSS didn’t (seem to) have any effect on the edit or preview panels. that’s very likely ’cause I don’t really know what I’m doing—just cut & paste (in BBEdit, as vsCode was way too picky in the color-code lines to use [spaces kept disappearing]).
option 2.2 seems too simplistic, and distracting from the final view; opt.2.0 seems more work than justified (too much tweaking)
if I correctly understood opt.1 (all simply /highighted/ in the same color), using a single color to contrast with the working highlight-block color seems simple, and without detracting from the final result, since the edit-highlight is only used briefly, while editing, and not at all used in the preview panel (I believe)
HI @santi ,
I am a newbie using Obsidian . Your channel and contribution are amazing and has helped to get started with Obsidian. I was trying to add your theme and looks like the css is pointing to a different theme Wasp and not Reverie .
Hey @jethin.abraham I appreciate your kind words, that’s strange let me take a look into the code to see if I did something wrong, I’ll get back to you here to see what’s up.
Thanks for letting me know!
Solved! thanks @jethin.abraham feel free to try it now, it should work without any issues! It was definitely a mistake I made when I updated my other theme Wasp
To be more precise, i took 2 picture :the first is your photo in github : it looks like the title have different size ANDdifferent colours( which is really cool) between Heading 1and Heading 2. But in my photo of my note( yes i’m french XD), you can see my title have the same size, which i found it strange to compare with your photo. I love the fact that you use different colours
Sorry for my english guys.
Got you, yeah it’s not an error in your Obsidian. What happened is that I ended up changing every heading to have the same size. This was a stylistic choice.
The github photo is outdated, I need to take a new one, since now the style of the theme has slightly changed.
It’s hard to make different versions of the theme.
If you feel comfortable learning CSS to manipulate the Theme to change heading size, feel free to do that.
It might be easier through CSS snippets. Let me know if you are familiar with these, if not feel free to reach out to https://santiyounger.com/contact if you need help with these stuff!
Hey, I love, love this theme! I’d like to customize a bit, specifically to modify the color of bolded and italic text, and possibly the headings.
Bold and headings were easy enough to find, but I’m struggling with italics. I’m poking around in the DevTool and having no luck. Can you point me in the right direction?
Hi, I’ve thoroughly enjoyed your Reverie Theme for almost a year. Yesterday, borders showed up around areas of the canvas. Is it something I did and is there a way to disable the borders? Many thanks.
)
