CSS-Quotes – allgemeines Styling

Entwickler
1

Das Standard-Zitat-Styling in Discourse: Welche genauen CSS-Klassen usw. steuern das?

Ich habe mit .blockquote herumgespielt, aber was erzeugt die linke Linie von etwa 4/6 px und die Hintergrundfarbe? Nun, eigentlich im Titel des Benutzerzitats – ist das einfach nur .title?

Wie immer vielen Dank im Voraus. Ich habe heute zu lange auf einen Bildschirm gestarrt. Ich bin fertig! Wenn nur dieses Forum :beers: ausschenken würde, wisst ihr schon!

2

You’ll want to style aside.quote .title and blockquote… You can cover both like this:

aside.quote .title, blockquote {
    // Styles here
}
3

@awesomerobot …at this point I owe you a :beer: Thanks!

4

Hi, a specific question:

Does anybody know the CSS of nested quotes, specifically the “first-level” nested quotes?

What I want to achieve is a different color scheme for nested quotes from the “main quote”.

From something like this

.quote aside .quote, .quote aside .title, .quote aside blockquote, .quote aside .onebox, .quote aside .onebox-result, blockquote, aside.quote .title {
        border-left: 5px solid #212121;
        background: #25272d;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 0 0 0 rgba(0,0,0,0.12);
        border-radius: 2px;
    }

I tried to make a different color scheme to just this part

.quote aside .quote, .quote aside .title, .quote aside blockquote, .quote aside .onebox, .quote aside .onebox-result

And I get a partial success, but not the entire nested quote.

Any ideas?

5

I think something like this might work

aside.quote blockquote {
  blockquote,
  aside.quote {
    &,
    .title,
    .onebox,
    .onebox-result {
      background-color: red;
    }
  }
}

This is a little hard to read in SASS, but the final output is

aside.quote blockquote blockquote,
aside.quote blockquote blockquote .title,
aside.quote blockquote blockquote .onebox,
aside.quote blockquote blockquote .onebox-result,
aside.quote blockquote aside.quote,
aside.quote blockquote aside.quote .title,
aside.quote blockquote aside.quote .onebox,
aside.quote blockquote aside.quote .onebox-result {
  background-color: red;
}
6

Works beautifully, thanks! :+1: :+1: :+1:

Example:
Anteckning 2020-01-16 110229