This is great, thank you!
Wow really great! I realized it but was not in the mood of searching for this specific hack. Appreciate it
1 Like
I just found out about queries and wanted to share what I am using to delete the query title and the highlighting of the “found” elements:
/* Hide search query title and stop highlighting found element */
/* ----------------------------------------------------------------------------- */
.markdown-preview-view .internal-query.is-embed .internal-query-header {
display: none;
}
.search-result-file-matched-text {
color: inherit;
background-color: inherit;
}
Maybe one can help me with this issue: I want to show more of the “context” around the query and not just some words. Unfortunately, the query result does not use the whole line width… Is there any way to accomplish this?
4 Likes
@burrito: good question. I compared the query approach with the global search through the panel, and found that they are exactly the same. I had expected the query, being embedded in a note, would show more context.
Hello,
Thanks for putting the code together.
I have tried using this code but it doesnt seem to change the colour of the tag pills in the editor mode.
Please advise. Thank you
@spacecadet: there is also a Github repository with useful CSS snippets that was intended for newbies, although all and sundry use them too 
Tag pills are covered in their own section there. You will find the link to the Github repository here.
This is great!! Thank you.
1 Like
Outliner for the outliners
This seems to work for the latest version:
.tree-item-collapse {
padding: 2px 15px 2px 15px;
left:1.5px;
}
div.tree-item-inner{
position:relative;
padding-left: 5px;
}
.outline .tree-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 .tree-item-children:hover {
border-left-color: rgba(118,158,165,0.4);
}
.tree-item-self .collapse-icon {
margin-left: -8px;
}
EDIT: the lines weren’t showing under the arrows properly, so added some extra CSS that rectified it for me. Not an expert with CSS, just building upon what others have posted and winging it! 
I just need to see if there’s a way to get the items to adopt the header or tag colours in this view now.
3 Likes
This doesn’t work on current version (0.10.13).
You give me hope @Klass to see you barely knew CSS such a short time ago. Kudos to you.
I need dark mode for my eyesight, as it makes some text hard to read, so it looks like I need to learn enough to get everything the way I can use it.
I am following your posts. Thanks.
@oxysmart: thanks for your kind words. I am still not an expert by a long shot. I do have a lot of snippets I collected since May (when I joined Obs) simply by trying various themes and tweaking them. Remember, whatever theme you use, after a while you’ll want to change it slightly here and there. My snippets are stored on Github and accessible for anyone interested.
Now to your issue: you need dark mode. Do you need help with anything? You know, I hope/assume, that between light and dark mode is a question of toggle in the Obs settings, right?
1 Like
Here is an even further improved popover. Your version was causing a second scrollbar to appear in the popover making it so I could not scroll the page. I’m on v0.11.0
/* -------------- bigger link popup preview -------------- */
.popover.hover-popover {
transform: scale(0.9);
max-height: 800px;
min-height: 300px;
width: 800px;
overflow: auto;
padding: 0rem 2rem 2rem 2rem;
}
.popover.hover-popover .markdown-embed {
height: 100%;
}
/* Hides the second limited scrollbar in popovers */
.markdown-embed-content > div.markdown-preview-view{
overflow: visible;
}
3 Likes
Just tested. If the link is close to the bottom, and you open the popover, the whole app gets a second scrollbar and things become really confusing with scrolling within the popover, within the page, and within the app.
Is this expected behavior?
my css posted above should fix that
That’s the snippet I’m using. See the pic below - I shrank down the window to show everything. There’s a scrollbar on the popover, a scrollbar on the note, and a new darker scrollbar that appears for the entire Obsidian window.
You are SO awesome. Thanks for the tip!
Only the popover and app scrollbar can be interacted with. The original scrollbar for current note isn’t interactable without closing all popovers.
That said the darker outside scrollbar for the entire app is desirable. Basically what happens is if you open a popover that doesn’t fit within the obsidian app window then any portion of that note that doesn’t fit in the obsidian widow will be cut off. However, when that happens the obsidian app itself creates a scroll bar for the entire app (the black bar in your image)
So for example with my code a popover can be up to 800px tall. It will be smaller if the entirety of the note can fit in a smaller space. But if you have a really long note then the popover will be 800px tall.
But if you have your obsidian app window really small or you open a popover close to the bottom of the screen then you might only see the first 400px of the popover, the rest will be hidden below the obsidian app window. You can still scroll inside this popover to see most of it’s content but lets say you wanted to click something at the very bottom of the popover. Well you’ll be able to scroll to the bottom but that last 400px will still be cut off.
But since the obsidian app scrollbar exists what actually happens is first you scroll to the bottom of the popover and then when you hit the bottom if you try to scroll again then it will scroll the entire obsidian app down so that you can see the entire popover and reveal that hidden 400px.
moving your mouse outside the popover closes it tho so you can only do this via scrolling with the mouse wheel.
If your still confused make to really long notes and make them each have a page link to each other. Then continuously open an infinite number of popovers between them and see how it works.
Hi Klaas, thanks for your kind offer to help. Since having cataract surgery, my light sensitivity had become more severe. I would prefer to have high contrast with larger fonts on everything. What would you suggest? I have Kepanos Minimal theme with Andy Mode. I have a 27 inch retina iMac.
Once those basics are done, I will Go through your snippets in Github and learn to fine tune it. Even though I build sites with Oxygen, there are so many tools to help with CSS without having to learn it, but those days are over for me now. Time to learn CSS, and even though I have a snippet library in Obsidian. That’s actually why I started using it, but I to store snippets. If you can point me in the right direction with high contrast, I would sure appreciate it.
@oxysmart: I believe that contrast can be modified with CSS, but I don’t know how. In my Github repository there is no snippet for that. If you ask in the Discord #css-themes channel somebody will show you the code.
As for font size, that can definitely be modified with CSS. I don’t use Minimal myself, but I did try it and, if I remember correctly, Kepano has also provided a plug-in which allows you to adjust font size from the interface. If I am wrong, you can use this to set the Preview font size for the whole vault:
body {
font-size: 16px; /* change that to a value that suits you */
}
If you want to change the font size for Edit mode:
.CodeMirror pre.CodeMirror-line {
font-size: 16px;
}
I hope this helps. If you need anything else let me know, even via a DM if you prefer.
Meanwhile, I wish you a steady health with your eyes.
Problem: Bullet Point Relationship Lines doesn’t show correctly in edit mode. It seems the Lines all aligned to the left.
Basic settings:
- Obsidian v0.11.3 using the default dark style.
- I added a snippet with the following code:
.cm-hmd-list-indent .cm-tab,
ul ul,
ol ul,
ul ol,
ol ol {
position: relative;
}
.cm-hmd-list-indent .cm-tab::before,
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before {
content:‘’;
border-left: 2px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0px; top: -5px; bottom: -4px;
}
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before{ left: -11px; top: 0; bottom: 0;
}
I’ve tried the original code @death.au shared, the problem remains in the edit mode.
Anybody can help?
Thanks!