Selected Quote Background Color

Please tell me an example of CSS code for setting the background color in the selected part of the text in the quote.
Вот иллюстрация:

On my site, the highlighted part of the quote doesn’t have a background, I’ve tried tweaking the CSS myself with no success :pensive:


You can easily find out using this guide:

It will help you in the future.

For what you ask, the code to change this specific part would be this one. Replace the default value with whatever color you’d like. :slight_smile:

.cooked span.highlighted {
    background-color: var(--tertiary-low);

I added the .cooked selector because I believe span.highlighted is used in other parts of the forum.

1 Like

Hello @Canapin :wave:, yes I read this post, but it is a little superficially written. I have already tried pasting code like yours, but it only affects the first quote, and the following quotes do not change the background color(

@Aizada_M I’m not sure if this helps, but you can use this…

It gives you a button in the Composer to decorate selected text with different colors and background colors… the code it generates in the composer looks like this…

[wrap=yellow color=green bgcolor=red]
[quote="system, post:1, topic:3, full:true"]Create topics here that don’t fit into any other existing category.[/quote]

[wrap=yellow color=green bgcolor=red]Create topics here that don’t fit into any other existing category.[/wrap]

(Not sure what the “wrap=color” does though)

If you want to set the background color for all quote blocks on your site you can use this CSS…

aside.quote .title,
blockquote {
background-color: yellow;

Maybe I misunderstood what you ask precisely?

Because my CSS works for multiple quotes :

1 Like

You understood me correctly, but for some reason I only have color in the first quote, the subsequent ones do not :man_shrugging:

Are you sure there are highlighted parts by default in your other quote?
Could you record a video like you did in your first post? :slight_smile:

1 Like

Thanks for the answer :raised_hands:, you shared very useful information, I saved your code for another task, but I need the background of the selected part of the quoted text to stand out from the general background when quoting.

In the normal collapsed state, the background of the quotation is not highlighted. After clicking on the :arrow_down_small: button, the entire text expands, where only the background of the quoted part is highlighted in a different color.
For example like this one:

Type of extended quotation:

1 Like

Yes, I highlighted each quote, but for some reason only the background of the selected text changes for the first quote. Tomorrow I will record a video and post it here.

Here’s the code I pasted into my theme’s CSS:

.cooked span.highlighted {
    background-color: var(--tertiary-low);

Here’s how it works:

I think I understand.

Quoted bulleted lists are a bit messed up:

In your first quote, you only quote the bullet’s text.

In the 2nd one, you select the bullet as well, which is modified when you show the whole quote. The bullet goes to an upper level from its original indentation and doesn’t match the original quote anymore, so there’s no highlight).

It has nothing to do with my CSS. You won’t get the highlight in any case. :slight_smile:


Thank you :raised_hands:! As far as I understand, there is no solution for this problem. :pensive:

Yes, there isn’t and I’m even not sure fixing the bug I linked would solve this particular issue.

1 Like