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

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

#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
#172

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.

1 Like
#173

Thank you for adding the internal query CSS!

1 Like
#174

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.

2 Likes
#175

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 :grinning:).

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.

2 Likes
#176

Sometimes it is nice to add an extra touch to your headings.
Javalent in the css-channel provided some simple code that works well, and that I have added 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 Headers.md and click on it to open, scroll down a bit to “Gradient coloured headers in Edit and Preview mode”.

Enjoy.

#177

Can anybody help: the tag pills in edit mode snippet doesn’t style the hastag # consistently with the text. Also, the hovering over with the mouse doesn’t do anything despite the code seen here (from the same snippet on the GH link from this thread).
Both of these behaviours occur even with default theme and when all other CSS snippets are disabled.

image
image652×598 38.6 KB

image
image590×572 36.8 KB

image
image1248×1166 141 KB

image
image802×180 18.3 KB