"How to achieve" CSS code snippets

<font style="color:blue">**text**</font>

@Spidrax is this what you’re looking for?

b, strong {
  color: red;
}
1 Like

Perfect, thanks!

Another question - in some screenshots I’ve seen keys in YAML headers colored. How is this done?

1 Like

Man, you are reading my mind. I just started dipping my toe in making a CSS template for making HomeBrew dnd documents. if you ever have a complete version I would love to help test it out or look at it.

Some people like to have the line that they are editing highlighted too, even the line number highlighted would useful too.

@Chetachi has kindly provided 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 Sentences.md , and scroll down to the bottom of the page.
Enjoy.

2 Likes

Just to thank @Klaas and @Chetachi for this.

1 Like

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