#256

@DummyME
In the preview portion those are called by their standard html elements. <strong> for bold and <em> for italics. On the edit side they are called by classes “cm-strong” and “cm-em” respectively. For the preview mode you can also have different changes based on the class of the document.
As an example the below code with change emphasized words to green in edit mode, red in preview mode unless it has the css class of “test” in which case it would be blue:

em {
    color: red;
}

.cm-em{
    color: green;
}

div.test em{
    color: blue;
}

This is what it would look like (edit mode on the left and preview on the right):

image
image1329×578 35.2 KB

2 Likes
#257

Thanks a lot.
Is there a way I can get away with the tilt as well. I vaguely remember it to be called decoration?
Thanks!

#258

Responsive font :sunglasses:

same document but the smaller is the window, the smaller is the font!

image
image1366×768 125 KB

image
image680×566 107 KB

Here is the code

:root
{
--font-size-normal: clamp(12px, 5vh, 20px);
--font-size-code: clamp(12px, 5vh, 18px);
--font-size-side-dock: clamp(12px, 5vh, 16px);
--font-size-side-dock-title: clamp(12px, 5vh, 18px);
--font-size-blockquote: clamp(16px, 5vh, 22px);
--font-size-status-bar: clamp(16px, 5vh, 16px);
--font-small: clamp(16px, 5vh, 18px);
--font-medium: clamp(16px, 5vh, 21px);
}

PS: You can do that with header too :slightly_smiling_face:! with the clamp() property. But I am too lazy

3 Likes
#259

I am unable to apply it as a snippet in v0.9.22. Can someone help?

#261

As I explored CSS snippets and customization, I made a short video walk through to get started:

https://youtu.be/iCRmtNmGA9k

Hope it’s helpful!

#262

Regarding this wonderful explanation, is there a way to display the src page of a header/block embed - as is presented with standard page embed ![[page ref]]? It would be nice to display not only the embedded header at the top of the transclusion, but also the file in which it resides.

#263

What to do if I would like to have relative path in my edit mode (in md files) but don’t really want them to render as such? While in preview, I would like them to be stripped of path and just the filename.

This is link to a file : [[Vault/Folder/New File Name]]

to be displayed as in preview

This is link to a file : New File Name

^ with clickable link ofcourse

#264

Outliner for the outliners (Improved version)


  .collapsible-item-collapse {
    padding: 2px 15px 2px 15px;
    left:1.5px;
  }
   div.collapsible-item-inner{
    position:relative;
    padding-left: 15px;

   }
  .outline .collapsible-item-children {
    margin-left: 20px;
    border-left: 1px solid rgba(118,158,165,0.2);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
  }
  .outline .collapsible-item-children:hover {
    border-left-color: rgba(118,158,165,0.4);
  }

image
image463×551 16.9 KB

1 Like
#265

I’ve got a snippet. It could do with something to make it look a lot nicer than just the default text, but it’s the key starting point.
The alt attribute of an internal-embed div contains text of the form “File name > header”, so this works well.

.internal-embed::before{
  content: attr(alt);
}
1 Like
#266

:thinking: Unfortunately not, by the looks of it.
So much of CSS is about working with the structure and attributes of the HTML, and in this case it doesn’t look like there are any attributes that don’t also have the path in it. I don’t think there’s a way to do string splitting in CSS alone :sweat_smile:

image
image778×127 3.63 KB

#267

Didn’t expect a hack, but gave it a try anyway. :sweat_smile:
Thanks.

#268

Thank you. Truly appreciate it. I modified appropriately to fit the style - looks great.

Current Status: (now I no longer need to use “Fleeting Note” in my header, since I now know its from a fleeting note :tada:)
Death_au Mod for Embed

Is there a way to carry the content into the markdown-embed-link area? Ultimately I am trying to display the note title in the link area when its a whole embedded note. In other words bringing it down in line with how the header title is embedded.

E.g.:
Embedded Note Whole
I would love to have it after the special red character there. The problem I then might have though is how to basically create an “if” statement (the only language I know how to describe it - though not in CSS) where if it is a full-page embed like the latter image, it would have a display: none; parameter. But if its a header or block embed, it would display the file name.

Thanks again for your help. Carrying data to other locations via CSS is something I have no experience with. I can modify a great deal on the beginner level, but not so in this area.

#269

This looks great, thank you so much for sharing. Just wanted to let you know is not working for me on v.0.10.1 I tried different backgrounds and line colors.

#270

I found that this can be fixed by removing width:50% from the .markdown-preview-view img code block.

It’s one the solutions that’s most accessible. Although, be careful with the amount you input for the resizing notation, you can receive a overblown image with the hover if you set it to a large amount.

#271

Doesn’t work for me :confused:

#272

Can someone share a code snippet that can increase or decrease text font size in preview and editing mode, I can play around and make it optimal for me.

#273

@Daniyal-Ahmed

.CodeMirror pre.CodeMirror-line {
  font-size: 16px;
}

body {
  font-size: 16px;
}
#274

Thanks, Klaas

2 Likes
#275

Well if obsidian is changing its layout I have nothing to do but to wait :frowning:. I use obsidian heavily. If it doesn’t work I will change the CSS.

2 Likes
#276

It doesn’t seem to remove the scrollbar though. I suspect the max-height: unset; option may fix that, but I don’t know how.