# Selected Quote Background Color
**URL:** https://meta.discourse.org/t/selected-quote-background-color/277487
**Category:** Development
**Tags:** css
**Created:** [September 1, 2023, 12:50pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487 "2023-09-01T12:50:10Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 1, 2023, 12:50pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/1 "2023-09-01T12:50:10Z")
Hallo!
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 😔
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 1, 2023, 2:09pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/2 "2023-09-01T14:09:40Z")
Hello,
You can easily find out using this guide:
> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics CSS…
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. 🙂
```scss
.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.
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 1, 2023, 3:34pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/3 "2023-09-01T15:34:50Z")
> [@Canapin](#):
>
> 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.
Hello @Canapin 👋, yes I read [this post](https://meta.discourse.org/t/make-css-changes-on-your-site/168101), 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(
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 1, 2023, 3:53pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/4 "2023-09-01T15:53:28Z")
@Aizada_M I’m not sure if this helps, but you can use this…
[https://github.com/merefield/discourse-tc-coloured-text](https://github.com/merefield/discourse-tc-coloured-text)
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…
```plaintext
[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]
[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…
```plaintext
aside.quote .title,
blockquote {
background-color: yellow;
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 1, 2023, 4:06pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/5 "2023-09-01T16:06:42Z")
Maybe I misunderstood what you ask precisely?
Because my CSS works for multiple quotes :
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 1, 2023, 4:22pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/6 "2023-09-01T16:22:02Z")
You understood me correctly, but for some reason I only have color in the first quote, the subsequent ones do not 🤷♂️
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 1, 2023, 4:29pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/7 "2023-09-01T16:29:04Z")
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? 🙂
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 1, 2023, 6:26pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/8 "2023-09-01T18:26:23Z")
> [@denvergeeks](#):
>
> 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…
Thanks for the answer 🙌, 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 🔽 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:**
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 1, 2023, 6:28pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/9 "2023-09-01T18:28:27Z")
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.
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 2, 2023, 5:12am UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/10 "2023-09-02T05:12:40Z")
Hi!
Here’s the code I pasted into my theme’s CSS:
```plaintext
.cooked span.highlighted {
background-color: var(--tertiary-low);
}
```
Here’s how it works:
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 4, 2023, 9:55am UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/11 "2023-09-04T09:55:12Z")
I think I understand.
Quoted bulleted lists are a bit messed up:
> [@Quoting bullets nested under numbers breaks formatting](https://meta.discourse.org/t/quoting-bullets-nested-under-numbers-breaks-formatting/266836):
>
> When you use the quote button to quote a part of a post that has bullets nested under numbers, the nested bullets no longer indent correctly. 1. one - a 2. two - b Try quoting this: one a two b - one - a - two - b And then try quoting this: one a two b The first one “breaks” when it is quoted, with improper indentation. Before quote: After quote: Notably, to get things to indent cor…
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. 🙂
---
### Author:  [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [September 4, 2023, 4:04pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/12 "2023-09-04T16:04:30Z")
Thank you 🙌! As far as I understand, there is no solution for this problem. 😔
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 4, 2023, 4:25pm UTC](https://meta.discourse.org/t/selected-quote-background-color/277487/13 "2023-09-04T16:25:28Z")
Yes, there isn’t and I’m even not sure fixing the #Contribute > Bug I linked would solve this particular issue.