"How to achieve" CSS code snippets

Share & showcase
152

Someone asked for a CSS solution to shorten long filename links in Dataview tables.

Here’s a solution that does exactly that. It truncates only links in Dataview tables, with an ellipsis.

/*
    dataview-shorten-links.css snippet

    Shortens long filename links in Dataview tables with an ellipsis.
    2021-05-07 Matthias C. Hormann (Moonbase59)
*/
.dataview.table-view-table > tbody > tr > td a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Result:

obsidian-css-snippet-dataview-links
obsidian-css-snippet-dataview-links716×139 17.5 KB

Might be useful for people using [[extremely long links in Obsidian to save an idea]] … :grin:

Tested with Obsidian 0.11.13 and Dataview 0.3.2. Thought I put it here so it can be more easily found. @Klaas and others: Feel free to add it into publicly available collections.

EDIT 2021-05-15: If you use clickable inline tags (like with my Nearby code), you might want to exclude a.tag from the above, otherwise you’ll only get one tag per line (but you want as many as possible):

/*
    dataview-shorten-links.css snippet

    Shortens long filename links in Dataview tables with an ellipsis.
    2021-05-15 Matthias C. Hormann (Moonbase59)
*/
.dataview.table-view-table > tbody > tr > td a:not(.tag) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Tested (again) with Obsidian 0.12.3 and Dataview 0.3.3, 0.3.5.

15 Likes
153

In the Github repository there is code for side notes. To apply any formatting to the text in the side note you need to use HTML, e.g. for bold you have to do <b>text</b>, and so on.

@SIRvb uses side note code in his ITS theme that supports markdown formatting. I have added this to the repository.

The link to the repository is given in the OP at the top of this page. Scroll down to Sidenotes.md , and scroll down.
Enjoy.

154

Apart from a collection of atomic zettelkasten notes, I also have a collection of long notes, for which I use the Outline pane (core plug-in). To make a long Outline more readable, I have been thought it would be a good idea to convert all H1 headings to capital letters since an H1 usually denotes the start of a new issue.

So, I started to convert H1’s manually, and it did contribute to better readability and navigability. But …… it is an extremely slow and long process. Wouldn’t it be nice if it could be done automatically?

To make a long story short, @death.au provided the solution for that. Nevertheless, having H1’s capitalized in the Outline means those H1’s should also be capitalized in the text. @D€V provided the solution for it.

I have added this to the Github repository. The link to the Github repository is given in the OP at the top of this page. Scroll down to Headers.md , and scroll down fairly far.

In the repository there is also a file “Outliner pane.md”, but I have only added a direction to the Headers.md file since there is also code for the H1 conversion in the note text.
Enjoy.

155

A snippet to hide folder from the explorer :

div[data-path='folder'], 
div[data-path='folder'] + div.nav-folder-children 
{
    display: none;
}

If you don’t know the data-path (it’s the folder since vault, like for a folder in your vault/Inbox/Draft it will be inbox/draft.

If you have a doubt, you can open the developer with CTRL+SHIFT+I and check the path. Beware, the data path only update after a restart for newly file/folder.

You can also hide file :

.nav-file-title[data-path="file_path.md"] {
	display: none;
}
2 Likes
156

@Mara-Li: thank you. I added this to the Github repository. You can check it here - scroll down to the bottom of that page.

157

Sometimes you want to construct a larger “master document” from its parts, say chapters. And it should look like it’s been made of one piece.

None of the existing tips & tricks could fulfill this requirement, so @Moonbase59 wrote his own CSS code that he shared here. It is to be used with cssclass: clean-embeds in the frontmatter, so it won’t interfere with other pages that might use the “normal” type of embeds.

I have added this to the Github repository so you can always refer to that if you cannot remember where Moonbase59’s post is. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Embeds.md , and scroll down a bit.

Enjoy.

2 Likes
158

Thanks for including in your repo, but keep in mind I’ll keep on improving it. Check out the “Changelog” part in the original post, I’ll keep the code in there updated.

1 Like
159

OK, will do.

1 Like
160

Just like in a browser, it would be helpful in Obsidian to hover over a named external link in preview mode and see the url.

Well, it is actually possible, with 2 possibilities:

  • either see the URL in a popup - code courtesy of @narand, or
  • see the URL at the bottom of the note - code courtesy of @Moonbase59.

I have added this to the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Links.md, and scroll down a bit.

Enjoy.

1 Like
161

New version of the show-links.css snippet, as usual … :wink:

Sorry for all the work you have updating, @Klaas …

162

Further to my post yesterday about “clean embeds” by @Moonbase59, please note that that is on a per-note basis.

It is also possible to do this on a vault-wide basis using the Naked embeds code from @death.au. I personally like to have everything hidden, as per the Clean embeds code, although I like to know there is a transclusion/embed when I hover over it. I also like to be able to use the link icon to jump to the original note.

So, I have added all this to the Embeds.md section under Naked embeds in the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Embeds.md , and scroll down a bit.

Enjoy.

3 Likes
163

Look at Clean Embeds without cssclass :slight_smile:

164

Further to my post today re clean embeds, @Moonbase59 made a variation: whereas the earlier version is for clean embeds on a per note basis (with use of cssclass: clean-embeds), the latest variant is on a vault-wide basis.

I added a couple of tiny sets of code to get the dotted line on hover and for the link icon on hover.

Naturally, I have added this to the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Embeds.md , and scroll down a bit.

Enjoy.

165

Further to my posts yesterday (here and here) I have made a final tweak to the code for Clean embeds (vault-wide) and Naked embeds.

I replaced this code block

/* Hide link icon */  
.markdown-preview-view .markdown-embed-link {
  opacity: 0;
}

/* show link icon on hover */
.markdown-preview-view .markdown-embed-link:hover {
  opacity: 1;
}

/* Hide dotted vertical line (no. 764 in theme's CSS)
demarcating a transclusion */
.markdown-preview-view .markdown-embed-content {
  border-left: none;
}
 
/* show dotted line on hover */
.markdown-preview-view .markdown-embed-content:hover {
    border-left: 2px dotted var(--text-normal);
}

with this

/* LINK ICON */
.markdown-embed-link,
.file-embed-link {
  top:0px;
  right:0;
  text-align:right;
}

/* hide */
.file-embed-link svg,
.markdown-embed-link svg {
  width:16px;
  opacity:0;
}

/* show on hover */
.markdown-embed:hover .file-embed-link svg,
.markdown-embed:hover .markdown-embed-link svg {
  opacity:1;
}

That way the hovering anywhere over an embed is much cleaner: no dotted line on the left, just the small link icon shows and can be used to open the original note conveniently.

I have added all this to the Embeds.md section under Naked embeds in the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Clean embeds on a vault-wide basis, alternative for Naked embeds below and to Naked embeds.

Enjoy.

1 Like
166

Both clean-embeds and clean-embeds-all have received some overhaul:

  • more testing done with themes
  • now default to unobtrusive background change & link marker display on embeds (CSS well documented—can easily be switched to not showing these)
  • Check the Showdown part at the end of each post, there’s a video hidden! :wink:

Enjoy!

167

Just when you think you have completed tweaking, there is 1 more. @Moonbase59 has done some upgrading of the clean-embeds per note and clean-embeds-all (vault-wide), adding an extra feature, as his post above shows.

@Moonbase59 has also made a 10 minute video to show what this is all about.

I have added the new code to the Embeds.md section under Naked embeds in the Github repository. The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Clean embeds on a vault-wide basis, alternative for Naked embeds below and to Naked embeds.

Enjoy.

1 Like
168

Is there a way to obtain double columns? I have a series of lists but they all keep adding vertically while wasting space on the right side of the note.

169

@Nuwanda: have a look at this. There is more in that #css-themes channel, you’d have to search. I have nothing in the Github repository.

1 Like
170

Hi @Klaas and @Moonbase59 - I love the concept of clean-embeds (selectively, using the frontmatter flag). But I have a couple of questions:

  1. Doesn’t seem to work with the Pisum Theme. Have you encountered that?
  2. Is there a way to treat embedded searches the same way?

Thanks for any response you might have time to make.

171

Question 1

Thanks for pointing out the “Pisum” theme. I’m rather hesitant with using !important, but for this theme you’d have to modify this part of the clean-embeds.css:

.markdown-preview-view.clean-embeds .markdown-embed-content,
.markdown-preview-view.clean-embeds .markdown-embed-content > .markdown-preview-view { 
  max-height: unset;
  padding: 0;
  margin: 0;
  border: 0;
}

to:

.markdown-preview-view.clean-embeds .markdown-embed-content,
.markdown-preview-view.clean-embeds .markdown-embed-content > .markdown-preview-view { 
  max-height: unset;
  padding: 0 !important;
  margin: 0;
  border: 0;
}

(Note the extra !important.)

Same applies to clean-embeds-all.css. Modify this:

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content > .markdown-preview-view { 
  max-height: unset;
  padding: 0;
  margin: 0;
  border: 0;
}

to

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content > .markdown-preview-view { 
  max-height: unset;
  padding: 0 !important;
  margin: 0;
  border: 0;
}

FWIW, I’ve updated the original posts, to make copy-pasting easier. I guess the extra !important—although I don’t love it—won’t do harm with other themes.

Question 2:

I haven’t (yet) experimented with embedded searches, but this might be doable … Just look for the relevant selectors in the Dev Console and add/modify the CSS accordingly.

1 Like