Is there a trick to getting this working in Live Preview?
2 Likes
Did you find a solution?
Is there a way to keep the header hashes visible in Live Preview mode?
Issue resolved. I found the right code there: obsidian-css-snippets/Headers.md at master · Dmitriy-Shulha/obsidian-css-snippets · GitHub
1 Like
I needed it to check this problem: A part of the text to the left of the cursor is removed from the headers when editing headlines
Late reply to this topic and the question of adjusting the text color. I was facing the same issue (gray-ish text on tags) that could not be edited in the css you provided.
It turns out it was overridden by my theme (minimal), so I added the !important exception:
.tag {
background-color: var(--text-accent);
border: none;
color: white!important;
font-size: 20px;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
I’m a total CSS noob and I don’t know if this is a best practice or can further mess with your setup.
I wonder if anyone has pointers about the CSS needed to control indentation of text located within a collapsible block.
My hope is to be able to do nested indentation of sections.
I know some CSS, but it’s been picked up in an as-needed way. With some effort I could probably figure out collapsible Flexbox (I think that is what is being used here…), but it would be great if someone has already thought the problem through.
2 Likes
OK… Responding to my own post, it doesn’t have anything to do with Flexbox…
The problem is that instead of wrapping a section in a <div> – which is what I expected, imagining it would make handling collapses easier (in retrospect I realize why I was wrong) – there is nothing that contains both the header and the subsequent text.
In other words, instead of something like:
<div class="collapsible-h1-block">
<div class="header-1">My Header Text</div>
Line 1 of text in the block.
Line 2 of text in the block.
</div>
The code instead looks like:
<div class="header-1">My Header Text</div>
<div class="cm-line">Line 1 of text in the block.</div>
<div class="cm-line">Line 2 of text in the block.</div>
In the first case I could just modify collapsible-h1-block. But in the second case the <div> containing the header itself would have to change the state for subsequent <div>s.
Is there perhaps a way to do that with php inside the css? I kind of doubt it… I’m guessing the php processor doesn’t run on the style sheet…
It would be great if somebody has tackled this problem, or can at least point me in a direction or tell me that I’m SOL.
I’m a newbie to css and am trying to improve the look of my timeline notes for history class. Is there a possibility to create the effect of tab stops. I have my notes in a “+ date: event structure” but not every date has the same length. therefore i want to indent the text after the “:” to create sort of a two column structure for better readability. Preferably I would only like to have the css snippet respond to files tagged with ‘#timeline’. Is that even possible?
There’s two ways you could do this using CSS combinators. First:
div.header-1 ~ div.cm-line
which select every div with the class “cm-line” underneath an H1. The drawback to this is that you have to have something at the end of the list to break the chain. If you’re going from H1 to H1, that’s perfect. But you couldn’t have a few indented paragraphs, and then one without—the CSS will see them all as the same thing.
Another option is:
div.header-1 + div.cm-line,
div.header-1 + div.cm-line + div.cm-line
The first line selects any .cm-line div directly following an H1, the second line selects the .cm-line directly following that one, and so on, add as many as you like. Drawbacks are that it’s clumsy CSS, and you can only go down as many levels as you define in the CSS. If you know your lists only have ten items or less, for example, that works, but if they vary from 5 to 15, then you’ve got to add in that many lines in the CSS, which is going to get fugly in a hurry. Better to use this one if your lists will be short, probably.
2 Likes
this is exactly what I am thinking about.
I use California Coast theme, which provided seamless embed in “stying setting” plugin. it works fine, but the scroll still exists, I wonder if it’s possible to remove the scroll of embed in Live Preview just like this useful css snippet.
Try this:
/* eliminate scrollbars in transclusions */
.markdown-source-view .markdown-embed-content,
.markdown-source-view .markdown-embed-content>.markdown-source-view {
max-height: unset;
}
2 Likes
Re: Live preview for clean embeds.
I essentially did a find and replace for ".markdown-preview-view " to “” (empty string) and it seems to work.
one exception was turning this part
.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content > .markdown-preview-view {
to
.markdown-embed-content {
though I’m not really sure.
Edit: Further poking around with element inspector, found I had to add this to remove additional padding:
/* remove padding in editing view */
.markdown-embed .markdown-preview-view {
padding: 0px;
}
Interesting that the embeds seem rendered with “Reading mode” styling. Is there a way to make embeds use “Editing mode” styles when in that mode?
2 Likes
Forgive me for sounding like an idiot here but can you apply custom CSS to an individual note? Like maybe some CSS snippet that can be tagged in the YAML frontmatter?
What I am trying to do is display a list of movies in a specific way - like this…
The issue is I do not use the Minimal theme but instead use Primary.
Also, I don’t want all of my dataview tables to look like this so it would be excellent to localize the CSS to one note.
Any suggestions? Thank you very much in advance! 
You can use cssclass in the YAML of the page to load a css snippet.
The top of your note would look like this:
---
cssclass= "snippet.css"
---
you can see more here CSS for specific pages - Resolved help - Obsidian Forum
writing the css code to style your content is a bigger challenge, but at least this is how you would connect it to your page.
5 Likes
So it will work the other way around. Instead of calling a css file from the YAML front matter, the YAML front matter assigns your page a class which the CSS calls to apply different formatting based on if that class is present.
Here is an example of what it looks like in YAML and where it shows up:
At the end of the highlighted line you will see that the DIV element now has an additional class called “mycustomcss” at the end.
If you want to target anything inside that DIV you would use CSS selectors like normal with the added condition that they are contained withing a DIV that has the mycustomcss class.
For example, lets say you want H1 elements to be a different color if you have this YAML.
You would add a statement ahead of the selector like this:
div.mycustomcss span.cm-header-1{
color: yellow;
}
This states we are applying the rules to any span with a class of “cm-header-1” that exists inside a DIV with a class of “mycustomcss”
Feel free to ask me any further questions. Happy coding.
2 Likes
Hello!
Obsidian newbie here.
Anyone have CSS to make the outline look like this?
It’s a screenshot from one of Nick Milo’s videos and I love how clean the lines and bullets look here. I’ve tried a CSS snippet I found online but my outlines don’t render like this.
Thanks!
1 Like
You can accomplish this with the Outliner plugin. Depending on the theme you use, there might be settings to control how bullets and indentation guides look like under the theme settings or the Style Settings plugin.
1 Like