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.
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.
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.
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.
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:
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!
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.
You can also use gradients/background images if you don’t want icon flags:
Easy one would be:
.tag[href^=“#Germany”] {
background-image: linear-gradient(0deg, rgba(255,249,0,1) 26%, rgba(255,0,0,1) 26%, rgba(255,0,0,1) 67%, rgba(0,0,0,1) 67%);
-webkit-text-fill-color: #d8dfdf;
border-block-color: slategrey;
font-weight: 800;
Which would use your image of the flag or the gradient as the background:
Here is my little update for the: clean-embeds-all.css snippet.
It works for my theme.
And credit for the idea belongs to @Moonbase59
/*
clean-embeds-all.css snippet
Removes title, link, padding, margins from embeds,
so they really look like the same note.
This will not require a `cssclass` to be set but work for _all_ notes.
Derived from the `clean-embeds.css` snippet.
2021-08-24 Matthias C. Hormann (Moonbase59)
TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/
/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view .markdown-embed-title,
.markdown-preview-view .obsidian-metatable {
display: none;
}
/*
For links to embeds NOT to be shown, uncomment the following
and comment out the other section below.
*/
/*
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link {
display: none;
}
*/
/*
For links to embeds to BE shown, uncomment the following
until the "End link show/hide stuff" comment
and comment out the section above.
*/
/* Link icon */
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link {
top: 0;
right: 0;
left: unset;
text-align: right;
border: none;
margin: 0;
width: 24px;
height: 24px;
color: var(--text-faint);
cursor: pointer;
}
/* for Ars Magna theme and others that change ::before */
.markdown-preview-view .markdown-embed-link::before,
.markdown-preview-view .file-embed-link::before {
display: none;
}
/* Link icon size & hide */
.markdown-preview-view .file-embed-link svg,
.markdown-preview-view .markdown-embed-link svg {
height: 24px;
width: 24px;
opacity: 0;
display: unset;
}
/*Scherifow update*/
/*fix the lines on top and bottom*/
.markdown-embed{
border-top: 0px solid var(--background-modifier-border);
border-bottom: 0px solid var(--background-modifier-border);
padding: 0px 0;
margin: 0px 0;
}
/*Fix the scrooling*/
.markdown-embed-content {
height: fit-content;
min-height: auto;
overflow: auto;
}
/* show on hover */
.markdown-preview-view .markdown-embed:hover .file-embed-link svg,
.
I’ve published my CSS snippet for the folder view, it adds outlines on the left of the folders’ file list. I use it alongside with the Obsidian Icon Folder plugin to get a colored folder view.
You can see the snippet parts and the explanations there. I tried to make the CSS as light and clean as possible, if you have any question you can reply me here, on discord (Evelf#1578) or on github.
