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!
I really appreciate your advice and will try it out once I meet some looming deadlines.
I modified this a bit to make it support both light- and dark-mode themes a bit better. The color scheme for light mode wasn’t really working with the line focus color.
UPDATED: Meta Post - Common CSS Hacks - #543 by Christian
VIM Light + Dark mode line focus
/* Modified by Christian (Chhrriissyy#6548). Original by MooddooM */
/* This version sets the line focus for both edit and insert mode. */
/* If you want to make it edit mode only, add the `.cm-fat-cursor` CSS class selector to both light & dark mode. /*
/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
width: 0.5em;
background: #d65d0e;
opacity: 60% !important;
}
/* LIGHT MODE */
/*if you want the highlight to present in both normal and insert mode of vim*/
.theme-light /* .cm-fat-cursor */ .CodeMirror-activeline .CodeMirror-linebackground{
background-color: #2f2f2f;
opacity: 10%
}
/* DARK MODE */
.theme-dark /* .cm-fat-cursor */ .CodeMirror-activeline .CodeMirror-linebackground {
background-color: #f1f1f1;
opacity: 30%;
}Hi, I like to find my tags easily within a page so I set up this css hack to have tags displayed on the right of my paragraph texts, with just a hashtag as marker within the paragraph.
The tag itself is hidden, what is displayed is a ::before pseudo-element (as marker) and a ::after pseudo-element (as tag text in the right gutter). If you hover one of them the hovering is also applied to the other one.
You can adjust as you like. I attach screenshots of this minimal code and of further decoration I use in my own set up (with tag pills etc.), with preview on the left and editor on the right.
p > a.tag {
font-size: 0;
width: 0;
padding: 0;
margin: 0;
background: none;
text-decoration: none;
border: none;
}
p > a.tag::before {
content: '#';
font-size: 16px;
}
p > a.tag::after {
content: attr(href);
float: right;
min-width: 3ch;
max-width: 25%;
margin-right: calc(-25% - 1.5em);
margin-left: calc(-25% - 1.5em);
position: relative;
clear: right;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 16px;
}
p > a.tag:hover::after {
max-width: fit-content !important;
}
@cmjn that’s pretty cool! Could you post an example of how to make only some tags go to the right? e.g. I would like to have only #check-later or #needs-research on the gutter, but all the other tags inline.
Hi @argentum you’d need to add an attribute selector i.e. replace by p > a.tag[href='#check-later'] each time p > a.tag appears in the snippet.
And so on for each tag you want to send in the gutter, which can become quite heavy …
But I haven’t tried to optimize the css, there may be a smarter way to do it.
h3y, I liked your font too!
Thanks for the snippet. I just tested this. It works with href='#check-later'.
Could someone tell me the way to make the tags in the gutter align left, but stay on the right side?
Yes sorry I forgot the ‘#’
corrected, thanks
Is there a way to deactivate this in the page preview popover, since here it doesn’t work well?
I did a CSS code to have color outlines like this.
It’s still a work in progress, but it does the job.
bullet-point-relationship-lines.css (3.8 KB)
Nice, thanks!
In my Obsidian, it only works number list but not in bullet list as yours.
How to make it also works for bullet list?
Settings, Appearance, CSS snippets, open the folder at the right of the name, copy the css file in the folder, go back and enable it. It work for number list and bullet list !
Thanks for your info.
I had done what you explained, but it only worked in the editor and not in preview for bullets.
Add indicator for notes in subfolders
If you have a lot of notes in a folder and scroll down the file explorer, it’s not really easy to recognize if those files are on the top level or if they belong to a folder, when you come back to work on your notes later. So I added an indicator in front of notes that are in subfolders (or in a specific one) of the vault.
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title + .nav-folder-children .nav-file-title-content::before{
content: "› ";
color: var(--text-faint);
}
If you want to only apply that for a specific folder, you can use the following by replacing FOLDER:
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path="FOLDER"] + .nav-folder-children .nav-file-title-content::before{
content: "› ";
color: var(--text-faint);
}
As the indicator I chose ›, because it’s relatively subtle. Or you can change it to whatever you like. The idea came when I saw this post.
This snippet will make table rows wrap in edit mode.
pre.HyperMD-table-2.HyperMD-table-row.HyperMD-table-row-1.CodeMirror-line {
white-space: pre-wrap;
}
This has to be done for each row. For convenience, I’ve created a paste with it done for the first hundred rows.
Update: I have a report that this doesn’t work for someone.
Update_2: I tested it in a fresh vault with no community plugins enabled and no custom CSS. It worked.
I had similar problems with a variety of CSS snippets people have posted for relationship lines. I found, however, that the relationship lines in the Minimal theme work correctly in both edit and preview modes. Not sure if the code would work with other themes (and you’d definitely need to update the color variables with another theme), but here is the CSS from Minimal for relationship lines:
/* Relationship lines */
/* Relationship lines in Preview */
body.minimal-rel-preview .markdown-preview-view ul ul {
position:relative;
}
body.minimal-rel-preview .markdown-preview-view ul ul::before {
content:'';
border-left:1px solid var(--background-modifier-border);
position:absolute;
left:-14px;
top:0;
bottom:0;
}
body.minimal-rel-preview .markdown-preview-view ul.contains-task-list::before {
top:5px;
}
body.minimal-rel-preview .markdown-preview-view .task-list-item-checkbox {
margin-left:-21px;
}
/* Relationship lines in Edit mode */
body.minimal-rel-edit .cm-hmd-list-indent > .cm-tab {
display:inline-block;
}
body.minimal-rel-edit .cm-hmd-list-indent > .cm-tab:after {
content:" ";
display:block;
width:1px;
position:absolute;
top:1px;
border-right:1px solid var(--background-modifier-border);
height:100%;
}
/* --------------- */Collapsible sidenotes
A very hacky hack for collapsible sidenotes, based on an abusive use of checkboxes 
So be aware it may conflict with a custom theme or any plugin that uses checkboxes, I haven’t tried it in popovers, I give it as it is with no guarantee at all.
The idea is to send checkboxes contained in a blockquote to the left gutter, and to make checkboxes as large as the text itself so that the text looks clickable for expand/collapse behaviour.
For that I also have to tweak a little bit the blockquote default style (it’s OK with my general styling choices, maybe not with yours)
So the sidenote looks like this in the editor (or see example below):
> - [x] Text of the sidenote, you can make it as long as you want as long as you don't insert a return character
> Or if you do so, it's OK but be informed that the next paragraph will also be collapsable, but will show as a new line in the collapsed version
This blockquote should be placed just before the paragraph you want to annotate, so there is also a limitation here: you cannot insert a note within a paragraph.
The proposed CSS code is the following, as far as I know it works with the default theme at least. Of course layout choices can be modified as you like and it can probably be improved a lot.
blockquote {
border: none !important;
padding: 0 20px;
}
blockquote .task-list-item {
font-family: var(--font-stack-ui) !important;
font-size: var(--font-size-secondary) !important;
line-height: 1.35em;
font-style: normal;
position: absolute;
text-align: justify;
z-index: 1;
color: var(--text-faint) !important;
right: min(calc(50% + 0.5 * var(--line-width) + 2.5em), calc(100% - 3.5em));
width: calc(50% - 0.5 * var(--line-width) - 3em);
max-width: calc(0.66 * var(--line-width));
min-width: 3em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
text-indent: 0 !important;
}
blockquote .task-list-item > .task-list-item-checkbox {
appearance: none;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: none !important;
background-color: transparent !important;
margin: 0 !important;
border: none;
cursor: pointer;
}
blockquote .task-list-item.is-checked {
z-index: 999;
color: var(--text-normal) !important;
right: min(calc(50% + 0.5 * var(--line-width) + 2.5em), calc(100% - 12.5em));
min-width: 12em;
overflow: visible;
max-height: none;
white-space: normal;
text-decoration: none !important;
}
And the result looks like this, with an example of a collapsed note and of an expanded note, used here as image captions (here I also have additional styles applied for sidenote borders and for other elements of the page). Clicking a sidenote toggles it.
Preview on the left, editor on the right
If the gutter gets too small the sidenote will cover a part of the main text to stay readable.