"How to achieve" CSS code snippets

Klaas · May 20, 2021, 6:33am

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

Klaas · May 25, 2021, 3:36pm

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.

Moonbase59 · May 25, 2021, 3:40pm

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.

Klaas · May 25, 2021, 3:41pm

OK, will do.

Klaas · May 26, 2021, 6:30am

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.

Moonbase59 · May 26, 2021, 1:13pm

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

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

Klaas · May 27, 2021, 5:06am

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.

Moonbase59 · May 27, 2021, 3:12pm

Look at Clean Embeds without cssclass

Klaas · May 27, 2021, 4:11pm

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.

Klaas · May 28, 2021, 6:45am

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.

Moonbase59 · May 28, 2021, 5:40pm

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!

Enjoy!

Klaas · May 29, 2021, 8:24am

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.

Nuwanda · May 29, 2021, 8:47pm

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.

Klaas · May 30, 2021, 2:33am

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

Deinos · June 4, 2021, 2:49pm

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

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

Thanks for any response you might have time to make.

Moonbase59 · June 4, 2021, 4:33pm

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.

Deinos · June 4, 2021, 7:43pm

Thanks so much! If you can’t tell, I know almost nothing about CSS.

Some notes just in case other Pisum users stumble on this:

I don’t know if it’s just a quirk of my install, but in addition to adding “!important” to the padding, I also had to add “background-color: #364549 !important;” because the embed had a slightly lighter shade to it.

As for the embedded search

I probably did it the wrong way, but I investigated the console and added the selector “.markdown-preview-view .internal-query.is-embed” to that same modified code you directed my attention to in order to make the preview version look okay; and

I added some more css to get rid of the search icon, search title and border lines between results.

  .markdown-preview-view .internal-query.is-embed .internal-query-header,
  .markdown-preview-view .internal-query.is-embed .internal-query-header-icon {
    display: none;
    border: 0;
  }

  .search-result-file-matches, .search-result-file-match:after {
   border-bottom: 0; 
   background-color: #364549 !important;
  }

I love the results! Thank you again for contributing your CSS expertise and responding to my questions!

EDITED 2021-06-06 - to fix unexpected impact on search panel results.

Moonbase59 · June 4, 2021, 9:09pm

Thank you for adding the internal query CSS!

Klaas · June 6, 2021, 2:40pm

WYSIWYG is taking some time to be implemented, but in the meantime there are ways to bring the Edit and Preview modes closer together in looks to give a sense of WYSIWYG, although it is never the same as the real thing, of course.

Today I had the line numbers in Edit staring me in the face, and although I had reduced their size and opacity, they still bugged me. Then it hit me: why not have them be shown only on hover. Yes, that pleased me ! And what amazed me is how simple it is to implement.

/* Show line numbers only on hover */
.theme-dark
.cm-s-obsidian .CodeMirror-linenumber {
  opacity : 0;
}

.cm-s-obsidian .CodeMirror-linenumber:hover {
  opacity: 1;
}

I also added this code 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 WYSIWYG.md in case you need to revisit it in the future. There are lost of other useful snippets in the repository which are esp. helpful for CSS noobs.

Enjoy.

Klaas · July 30, 2021, 3:32pm

I have been using Obsidian since May last year, with most of that time fonts only of interest in terms of color and weight.

Recently @Chetachi unintentionally got me looking at font families, and experimenting with them, incl. downloaded ones that are not standard on a Mac. I found my preferred font but there was something that still did not sit well with me in terms of weight (no, not my body weight ).

I got more intrigued when I opened a note with my favorite font in Typora: the font weight was thinner. I investigated and found it is webkit-font-smoothing.

I have added the code to the Github repository.

Note: font smoothing for Edit mode is enabled in the default settings. Nevertheless, there are those who prefer not to have font smoothing in Edit. The code for that has been in the repository since the beginning.

The link to the Github repository is given in the OP at the top of this page. On the Github page scroll down to Fonts.md and click on it to open, you’ll find the code there.

Enjoy.