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.
Hey, I am relatively new to Obsidian and trying to “warp” the editor’s visuals to my needs. I am new to CSS and JS as well, but want to build at least some understanding of its syntax to do unassisted customizations and combine them in Obsidian.
As of now, I am trying to display blocks of my text in some sort of frame, similar to a chat bubble (see the image below). Blocks are separated by two line breaks (not one) – that is the low level “syntax” I am used to. As this is just to visually guide me, I need to use the feature in editor Mode in live preview.
When it comes to the blocks, I would be happy to just have a different backgroundcolor with no frame. A subtle frame plus rounded edges would be cool as well (see image) but I have no idea how to create them.
I did some research an guess I have to style every div.cm-line element that is not proceeded by two elements. However, I am still struggling to come up with a code snipped that does the job, especially regarding its supposed to work in live preview (which I do not fully understand yet).
CSS Cascading Style Sheets) is not a “hack” it is an integral part of styling electronic Hypertext documents.
These are the foundation of what started as the World Wed Web. Hypertext Markup Language (HTML) defines the structure and CSS describes the design.
Markdown was created to “hide” what many though was “ugly” HTML when bloggers
created and published their blogs to the web.
CSS and HTML can be very powerful ways to express ideas thoughts and knowledge. They are far from “hacks” and worth going deeply into.
