"How to achieve" CSS code snippets

Sometimes you may want to give some text more prominence by putting it in a box like so

@forever Has kindly provided the code to achieve this , which I have added to the Github repository. The link to the repository is given in the OP at the top of this page. Scroll down to Text box.
Enjoy.

1 Like

@forever That’s pretty neat, but for me it doesn’t work if there’s a line break in there, I always just see the first line in the box.

@Spidrax: that’s odd, line breaks do work for me. Incidentally, @Jeffurry asked for this code, and when he 1st tried it, it did not work for him either. Don’t what he did but 1 minute later he exclaimed it works for him too.

The <i id="roundedbox"> declaration needs to be immediately followed by the text of the note/section (no spaces). You also cannot have two consecutive carriage returns - the second should be replaced with a
.

@Jeffurry you can actually have multiple carriage returns as long as they aren’t ‘just’ carriage returns. If it’s a carriage return and a tab, it works fine.

<i id="roundedbox"> **Bold**: name
	**Children**: Tom, Dick
	
	
	
	
	
	**Address**: stone road 2</i>

Renders into this:

4 Likes

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:

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

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.

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.

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

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

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

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

OK, will do.

1 Like

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

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

Sorry for all the work you have updating, @Klaas

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

Look at Clean Embeds without cssclass :slight_smile:

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.

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

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!