Meta Post - Common CSS Hacks

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.

image

It’s still a work in progress, but it does the job.
bullet-point-relationship-lines.css (3.8 KB)

5 Likes

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 !

1 Like

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.

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.

3 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.

11 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:

8 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…