Meta Post - Common CSS Hacks

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.

2 Likes

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.

2 Likes

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%;
}

/* --------------- */
1 Like

Collapsible sidenotes

A very hacky hack for collapsible sidenotes, based on an abusive use of checkboxes :flushed:
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.

6 Likes

Stop footnote indexes affecting line height

… and make them a bit smaller.

/* Stop footnotes affecting line height */
sup { 
	vertical-align: top; 
	position: relative; 
	top: -0.3em; 
	font-size: 0.75em; 
}

Before:

After:

6 Likes

Hi,

Do you know any method to place the text from the centre to the left side?

Füles

@phlind: cooool ! I will add it to my Github repository, if you don’t mind, so others who don’t necessarily get to see your comment can still use it.

1 Like

Try

h1 {
	display: flex;
	width: 100%;
	align-items: center;
    justify-content: flex-start;
}
h1:before,
h1:after{
	content: '';
	background: gray;
	height: .1em;
	margin: .2em;
	flex: 1;
}

frvkl

Thanks very much, it seems it doesn’t work.
I got another solution, so my problem was solved.

Fülike

YESSSSSSSS I NEED THIS :slight_smile:

Hi,

Füles

The question has been asked on the forum but no satisfactory answer was provided.

Is there a way to hide in Preview the # character in front of tags?

Use a :after pseudo-element:

a.tag {
  position: relative;
  padding-left: 3px;
}

a.tag:after {
  background:  var(--text-accent);
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  width: 0.8em;
  left: 0px;
  /* if you have pill-style tags */
  background-clip: padding-box;
  border-top-left-radius: 250px;
  border-bottom-left-radius: 250px;
}

/* if you have custom tag colors */
.tag[href^="#elixir"]:after {
  background: rgb(142, 88, 203) !important;
}

.tag[href^="#phoenix"]:after {
  background: #F67938 !important;
}

You may have to fiddle with the left:, width: and padding-left: values to fit your font and other a.tag styles. Sticking with an em value for width will help make it work when you zoom in/out.

1 Like

@lastobelus: yep, that works. I see what you did: you basically hid the # with a vertical strip of the tag’s background color. Clever!
Many thanks.

How do I select inline code in CSS? Like this thing:

```var t = setInterval(move, 500);```

I was able to select and change the color of multi-line code with .CodeMirror-code, but the inline code is still this annoying dark red…

I think preview mode follows the normal code rules and is selected with .markdown-preview-view code.

This is what I use for the editor:

/* Inline code in the editor */
.cm-s-obsidian span.cm-inline-code,
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight) {
  color: RED ;background-color: BLUE;
}

Change RED and BLUE to suit.

1 Like

If you want to have your paragraphs inside a block (only one carriage return, non-strict Markdown paragraphs) be visually spaced in preview mode, here is a solution straight from the devs themselves (thanks!) Add this to your CSS to get some visual line spacing between paragraphs, makes writing long text much easier if you dislike strict Mardown breaks:

.markdown-preview-view br {
    content: '';
    display: block;
    margin-top: 10px;
}

Add this as well if you want to mirror that behavior in edit mode:

.CodeMirror pre.CodeMirror-line {
  padding-bottom: 10px;
}
2 Likes

I have a snippet that adds numbers to the headers in the table of contents. Is there a possibility to have those same numbers added to the headers in the note text, like 1. , 1.1., 1.1.1., 2., 2.1., etc.?

how can I display a margin/ outer box in case of an embedded linked note? I want to show that the embed is separate from the main text. Also, can I get this in the pdf export also?

Here’s my take on sidebar outlines. It indents long headings that wrap, and uses a lighter weight font for leaf items.

.outline {
  font-size: 0.8rem;
  font-weight: 200;
}

.outline .tree-item {
  line-height: 1.3;
}

.outline .tree-item-self {
  padding-top: 0.2rem;
  padding-bottom: 0.1rem;
  padding-left: 0.5rem;
  padding-right: 0.3rem;
}  

.outline .tree-item-collapse {
  left: 0.1rem;
}  

.outline .tree-item-inner{
  position:relative;
  padding-top: 0.2rem;
  /* padding-left: 1rem; */
  padding-left: 1.7em;
  text-indent: -0.8em;
  margin-left: 0.2rem;
  /* font-size: 0.9em; */
}  

.outline .tree-item-children {
  margin-left: 0.7rem;
  padding-left: 0.5rem;
  margin-top: -0.3rem;
  padding-top: 0.3rem;
  border-left: 1px solid var(--sidebar-marks, var(--background-modifier-border));
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}

.outline .tree-item-children:hover {
  border-left-color: var(--sidebar-marks-hover, var(--background-secondary));
}

.outline .collapse-icon + .tree-item-inner {
  font-weight: 400;
  padding-left: 0.2rem;
  /* margin-left: 0rem; */
  /* font-size: 1em; */
}

.outline .collapse-icon {
  margin-top: 0.2rem;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  width: 2rem;
}

7 Likes