Done, but i’m trying to change the look from what we now have:
Font size, frame, etc.
It should be doable within css, am i right?
Edit: done. these are the parameters (for css-illiterate like me)
@jcperezh: I am CSS-illiterate, like you, so I am not sure. I understand from people’s comments that it is not doable, hence my request.
What makes you think it is doable? If so, I am very interested in it, so please share the code if you manage to get it.
Obsidian treat 2-level Transclusions as a Embed File. changing Font-size or border color from those parameter affect the look from these frame. it will not show the note, just change the size and look from these link
@jcperezh: so if it won’t show the 2nd level embedded file then we don’t really have 2-level transclusion.
I hope the feature request will be implemented because I love transclusions and use them a lot.
yes u r right, it should be 2 level minimum. (it has my upvote)
Here’s a new tidbit I am using:
Here’s what it looks like:
The code. Note, you can also remove the background or change it to a semi-translucent color.
.markdown-preview-view .internal-embed img {
cursor:zoom-in;}
.markdown-preview-view .internal-embed img:active {
cursor:zoom-out;
display:block;
z-index:100;
position:fixed;
max-height:100%;
max-width:100%;
height:100%;
width:100%;
object-fit: contain;
margin:0 auto;
text-align:center;
top: 50%;
transform: translateY(-50%);
padding:0;
left:0;
right:0;
bottom:0;
background:var(--background-primary);}
19 Likes
editor wysiwym headers dirty hack
this will replace headers markup (#,##,...) by corresponding [H1-H6] text in the gutter :
it has the same drawbacks as the clutter-free mode : the markup will not be revealed on selection (because line selection doesn’t trigger the active line class).
the code below is set up for my theme ono-sendai, you will probably need to reposition elements to avoid overlapping & adjust font-size to your liking (it may be incompatible with themes that already target the same classes for other purposes, but I know it works on the base theme and a couple of others).
/*=============== replace H1-H6 markup in edit mode================*/
.CodeMirror-sizer{
margin-left: 48px !important;
}
/*-- reduce left padding --*/
.CodeMirror {
height: 100%;
direction: ltr;
padding: 0 10px;
}
/*-- header color --*/
.cm-header.cm-header-1{
color: var(--text-accent);
left:0px;
position: relative;
}
.cm-header.cm-header-2{
color: var(--text-accent2);
left:0px;
position: relative;
}
/*-- hide # markup--*/
.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2,
.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3,
.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6
{font-size:0px;}
/*-- display H1-h6 in gutter--*/
.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before{
content:"H1";
font-size:18px;
color: var(--text-accent2);
left:-49px;
top:-17px;
position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before{
content:"H2";
font-size:13px;
color: var(--text-accent2);
left:-43px;
top:-10px;
position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before{
content:"H3";
font-size:11px;
color: var(--text-accent2);
left:-36px;
top: 16px;
position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before{
content:"H4";
font-size:10px;
color: var(--text-accent2);
left:-36px;
top: 14px;
position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before{
content:"H5";
font-size:10px;
color: var(--text-accent2);
left:-36px;
top: 13px;
position:absolute;
}
.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before{
content:"H6";
font-size:10px;
color: var(--text-accent2);
left:-36px;
top: 13px;
position:absolute;
}
/*-- is active line, hide H[1-6] in gutter --*/
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before,
.CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before
{font-size:0px;}
/*-- is active line, display # markup --*/
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1{
font-size:32px;
display:inline;
}
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2{
font-size:24px;
display:inline;
}
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3{
font-size:19px;
display:inline;
}
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
.CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6{
font-size:13px;
display:inline;
}
6 Likes
@_ph: is there a way to het the H1 etc in line vertically with the text of their header? I thought the offset was sepcific to my set-up, but I see it is there in your GIF too.
hey Klaas,
it might not be obvious from the GIF compression, but I’m using the option to show line numbers in the edit view, that’s why the [H1-H6] look offset vertically :
they fit in the empty spaces between line numbers to avoid any overlapping, but I get that it can be offputting if you don’t use line numbers…
Anyway, it’s an easy fix :
- look inside the section that starts with
/*-- display H1-h6 in gutter--*/ - then tweak the values of
top:XX px;andfont-size: XXpx;, both values are linked, so if you increase the font-size, you’ll need to adjust thetop:value accordingly.
There is probably a way to calculate the correct offset values automatically from the font-size but I’ll leave that to somebody else 
Thank you.
Anyone know how to get the bullet point relationship lines if using spaces instead of tabs? My lines disappeared when I changed this setting and replaced all the “\t”
@obadiahcruz asked on the Discord about having file and folder icons appear next to titles in the file explorer depending on the type, and this is what I came up with:
.nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; }
.nav-folder-children .nav-folder-title-content::before { content: '📂 '; }
This uses emoji, but I’ve found it looks nicer if you use a symbol font like Wingdings or IcoMoon and substitute symbols in like so:
.nav-folder-children .nav-file-title-content:first-child::before {
content: "\e924 ";
font-family: 'IcoMoon-Free';
}
.nav-folder-children .nav-folder-title-content::before {
content: '\e930 ';
font-family: 'IcoMoon-Free';
}
(adding the :first-child bit prevents the icon showing up on files that aren’t markdown, such as images/pdfs, which show a type next to them)
12 Likes
Awesome! Thanks for sharing, @death.au .
I’ve been inserting emojis into the folder name itself, but I worry about it causing issues with compatibility by having special characters in the folder path.
Your method seems like a much safer approach, but it does add some complexity to merge it with each theme.
Would it be possible to assign each folder an emoji from the right-click menu?
Then the icons would be independent of the theme and not lost each time the theme is changed.
1 Like
I tried using hrefs to target specific names within the folder type to achieve what you’re looking for, like this
.nav-folder-children .nav-folder-title-content[href="Calendar"]::before { content: '🗓 '; }
but it didn’t seem to work.
Enhancing the view of “folders” and “Table of Content”
/* outliner for the outline */
.outline-heading-children{
border-left: 1px solid rgba(118,158,165,0.2);
border-radius:0 0px 0px 0;
transition:all 0.5s ease-in-out;
}
.outline-heading-children:hover{
border-left-color:rgba(118,158,165,0.4);
}
/* outliner for the file and folders */
.nav-folder,.nav-file{
margin:0 !important;
border-left: 1px solid rgba(118,158,165,0.2);
}
This helps understanding the relationship between child and parents of the folders and contents. In the picture you will see faint lines are appearing in the folder and ouliner section.
17 Likes
If somebody could fix this!! it would be Amazing!!
1 Like
Looking at the CSS I don’t think there’s a way to do it. There are no attributes that expose any information about the file name or anything.
I still get a scroll (like a pane scroll) in the naked embed when embedding a quote only note. Any idea why is it?
Edit: Okay, it’s fixed by setting margin to 8px
that’s awesome! thanks for this!
1 Like