"How to achieve" CSS code snippets

Share & showcase
242

That did the job, thank you!

1 Like
244

Hi
I tried @EleanorKonik 's blockquote and I wanted something a little less prominent or different looking and also something with curly quotes. So through trial and error with the original css I ended up with this new blockquote style. Perhaps it might appeal to you -

Light mode

image
image1752×192 36.7 KB

Dark mode

image
image1265×250 32.4 KB

Here’s the css for it

/* This snippet provides a style to blockquotes and to the <cite> element. */

/* for preview */
.markdown-preview-view blockquote {
    border-color: #1abf7f !important;
    border-left-width: 2px !important;
    background-image:
      linear-gradient(
        to right, 
        rgba(26, 191, 127, 0.1),rgba(26, 191, 127, 0) 
      );
    font-size: 1em;
    line-height: 1.5em;
    margin: auto;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
    width: 80%;
}

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

.markdown-preview-view blockquote:after {
    content: '\275D';
    position: absolute;
    top: 0.4em;
    left: -1em;
    font-size: 2.5em;
	color: #1abf7f;
}

cite {
  color: #1abf7f;
  text-align: end;
  display: block;
}

You can change the colors to suit your theme by changing all the color elements. You can also change the font size to have the blockquote text be smaller than the basic text.

6 Likes
245

That is a nice blockquote indeed, well done, @ApolloGoneRogue !

Instead of the “cite” bit, you could try “signature”:

/* LP mode */
.cm-html-embed .signature {
  display: block;
  text-align: right;
  padding-top: 10px;
  padding-bottom: 30px !important;
  font-family: "Apple Chancery" !important;
  font-size: 16px;
  color: var(--text-normal);
}

Amend font and color as you like.

1 Like
246

Thanks !

247

How do you use the signature tag inline ? And why is it better than cite ?

And also does your addition work in the editor mode ? Because I don’t use Live preview.

248

I did not say signature is better than cite, perhaps it is not, that is why I said “you could try”. If there is no difference for you there is no reason to use it.

Note: it does not work in editor mode, no css does.

249

Apologies I meant to ask about reading view not editor mode

And also how to use the signature tag ? I’m unfamiliar with HTML.
Is it like this ? -
<sig> Richard </sig>

250

@ApolloGoneRogue
For Reading mode you have to make some adjustments to the code, like so:

.markdown-rendered .signature {
  font-family: "Apple Chancery" !important;
  display: block;
  text-align: right;
}

You can add an extra font-size rule or change the font-family or add a color rule.

As for the tagline, you add this to the end of the text in the blockquote:

<span class="signature">Name</span> and replace Name by the name of the author or whatever name you want.

1 Like