Meta Post - Common CSS Hacks

Hi there! I’m a total newbie at css. Could anyone tell me if it’s possible to change how the tags look? I’d like to highlight certain important tags (for example #complete as green, #inprogress as yellow, etc)


this worked for me :

.tag[href="#important"] {
  color : red;

Tag Pills


.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
.tag[href^="#important"] {
  background-color: red;
.tag[href^="#complete"] {
  background-color: green;
.tag[href^="#inprogress"] {
  background-color: orange;

Functional and Beautiful. I think I might need to make changes to this to work with the Zettelkasten theme that I’m using.

Lovely! Thank you very much!


Im hoping/waiting for Collapsible indents feature in the preview mode as well!!


Vim mode with line focus

/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
  width: 0.5em;
  background: #d65d0e;
  opacity: 60% !important;

/*an active line highlight in vim normal mode */
.cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;

/*if you want the highlight to present in both normal and insert mode of vim*/
.CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;


How can i make it work for both Light and Dark themes?

“Naked” Embeds by

/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;}

/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
  background-color: var(--background-secondary); /*define different bg color*/

/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;

.markdown-embed-link:hover {
color: var(--text-accent) !important;

To further remove the header, add the following part:

/* remove the first heading*/
.markdown-preview-view .markdown-embed-content>:first-child { display:none;}

if you don’t add the .theme-dark or .theme-light selector, it will work for both mode.

Would it be possible to randomise the colours? from a palette?

1 Like

I don’t know how to do that. Maybe possible with LESS/SASS extended css… if you find a way let me know.

can anyone share the code to change the default font to say Times New Roman in the preview mode ?

/* font for everything outside of editor/preview panes */
.app-container {
  font-family: var(--font-family-preview);

/* normal text outside of headings and code of editor */
.cm-s-obsidian, .mod-single-child .cm-s-obsidian {
  font-family: var(--font-family-editor);

/* normal text outside of headings and code of preview */
.markdown-preview-view, .mod-single-child .markdown-preview-view {
  font-family: var(--font-family-editor);
/* _hyphenation_and_justification      */

.cm-s-obsidian, .markdown-preview-view {
  text-align: justify;
  hyphens: auto;

Got it from @Boyd.


@Klaas not sure what hyphenation and justification means in this context. Do you have a picture of the effect?

1 Like

It will (a) justify the whole text and (b) breaking words into two lines if needed:



@Boyd answered it. I just want to add that I like the hack, and use it even when I try out other themes.

In Edit mode the justification makes some awkward gaps, but in Preview mode that is corrected.

1 Like

Enlarge image on hover

.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%;  /* experiment with values */
  transition:transform 0.25s ease;

.markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */


In script I posted above: When I hover on picture then images is enlarged. But I would like to add strong blur to all elements in behind the image, kind of focus mode for images. Does somebody have idea how to make it?

Thank you.