longer definition
n. A state of mental abstraction in which more or less aimless fancy predominates over the reasoning faculty; dreamy meditation; fanciful musing.
Hope you like it, Would love to make it available on the community themes feel free to provide feedback/suggestions.
This is a nice theme and I really like the way you implemented highlighted text in this theme.
However, when i copy naked embeds into the CSS, the bottom of the embeds leave a lot of spaces. Could you help guide me to the line to reduce this gap?
/* 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: 0;}
/*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;
}
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 https://santiyounger.com/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)
)