Changing coulour for the block around block-quote

Share & showcase
1

I did some small changes to a code found here to change the block quote colour in edit mode. It can also be used to change font

Block quote

/* for editor */
.cm-quote {
    color:  var(--text-normal) !important; 
  }

/* for preview */
 .markdown-preview-view blockquote {
    background-color: #ece8f8;
    border: 0px solid;
    border-color: #baa7ec !important;
    border-left-width: 5px !important;
    border-radius: 0 8px 8px 0;
    font-family: ;
    color: black; 
    font-size: 15px;
    line-height: 1.5em;
    margin: 10 10px;
    padding-top: 10px;
    padding-bottom: 10px;
} 

/* Vertical centering of text in blockquote */
blockquote {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Blockquote as per Obsidianite

/* in Edit mode */

.cm-quote {
    /* color: purple ; /*var(--text-normal) !important; */
 background-color: #ece8f8; 
     border: 0px solid;
    border-color: #baa7ec !important;
    border-left-width: px !important;
    border-radius: 0 8px 8px 0;
    font-family: ;
    color: black; 
    font-size: 15px;
    line-height: 1.5em;
    margin: 10 10px;
    padding-top: 10px;
    padding-bottom: 10px; 
} 

  
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-quote {
  color: transparent !important;
  display: inline !important;
}  
  
div:not(.CodeMirror-activeline)>.HyperMD-quote {
  border-left: 4px solid var(--text-selection);
  /* border-color: black var(--text-accent); */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px; 
  line-height: 1.3em;
  padding: 12px 0px 15px 8.5px; /* or 12px 15px 15px 8.5px ? */

  margin-right: 15px !important;
  margin-left: 15px !important; /* or 5px ? */
  border-top: transparent;
  border-bottom: transparent;
  background: #ece8f8; /*linear-gradient(120deg, rgba(170, 167, 236, 0.9), var(--text-faint));*/
  display: inline-block;
} 
  
  /* div:not(.CodeMirror-activeline)>.HyperMD-quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 2px;
  width: 60%;
 background: linear-gradient(90deg, var(--text-accent), var(--text-faint));
} */
  

/*
   div:not(.CodeMirror-activeline)>.HyperMD-quote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 2px;
  width: 25%;
  background: linear-gradient(90deg, var(--text-accent), var(--text-faint));
} 
*/

/* in Preview mode */

 .markdown-preview-view blockquote {
  position: relative;
  padding: 1rem 2rem 1rem 3rem;
  color: white; /* #bdbdbd */
  line-height: 1.4em;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-bottom: 2em;
  border-left: 4px rgba(31, 178, 129, 0.9) solid;
  border-top: transparent;
  border-bottom: transparent;
  background: linear-gradient(135deg, var(--base4), var(--base3));
  border-right: transparent;
  display: inline-block;
  margin-right: 0 !important;
} 

 .markdown-preview-view blockquote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 2px;
  width: 60%;
  background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(--base3));
} 
.markdown-preview-view blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 2px;
  width: 25%;
  background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(--base3));
} 

.markdown-preview-view blockquote p {
  position: relative;
}

Quotation marks

/* from https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
/* Add quotation character before quote */
blockquote:before {
  font: 14px/20px italic Times, serif;
  content: "“";
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p { display: inline; }

/* as per Obsidianite /
/ in Edit mode */

div:not(.CodeMirror-activeline)>.HyperMD-quote>span:first-of-type::before {
  content: '“' !important;
  font: 14px/20px italic Times, serif;
  font-weight: 700;
  font-size: 3em;
  color: var(--text-accent);
  left: 3px;
  top: 15px;
  position: relative;
}

/* in Preview mode */

.markdown-preview-view blockquote p:first-of-type::before {
  content: '“';
  font: 14px/20px italic Times, serif;
  font-weight: 700;
  font-size: 3em;
  color: var(--text-accent);
  position: absolute;
  top: 0.1rem;
  left: -1.8rem;
}

Signature: name of the person quoted

Put this code in the CSS sheet (courtesy Gabroel)
/* signature inside the blockquote*/
.signature {
  font-family: "SignPainter"; /**Choose a cursive font */
  text-align: right;
}

Then, in the note, at the end of the blockquote put this:
`<div class="signature">- Name </div>`

if you want the font size of the signature bigger, use this instead:
`<div class="signature"> <span style="font-size:25px">- Name</span> </div>`

OR, without the css code and the div rule, you can simply write at the end of the blockquote:

<cite> — Name </cite>

which puts the name in italics, though unstylised, and thus differentiates it from the quote.

3 Likes
2

re Obsidianite blockquote: in Live Preview the code for the top and bottom gradient lines does not work. This works for the top gradient line (courtesy mgmeyers):

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:not(.cm-active)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 2px;
  width: 60%;
  background: linear-gradient(90deg, var(--text-accent), var(--text-faint));
}

I have not been able to work out a code for the bottom gradient line :disappointed:

re signature:

  • it is easier to add the font size to the .signature snippet
  • for Live Preview you need to replace <div and </div> with <span and </span respectively, otherwise the signature will be outside the blockquote box.
3

Love this! I was experimenting with the Dev panel to try figure out how to do this- but I started using obsidian a week ago and don’t even know what CSS means! Never would have figured out these blocks of code.

Can you offer some advice as to how I can implement these snippets? Do I just copy paste them all into my obsidian.css text file?

4

@Shmooksey : never make changes to an obsidian.css file (if it is a theme file) for 1 simple reason: whenever the theme gets updated your changes/amendments will get overwritten.

It is best to paste code into a plain text editor and save it as a .css file (with a name of your choice) in the snippets subfolder of the .obsidian folder.

5

Thank you so much :slight_smile: !!

1 Like