# Discourse Coloured Text

**URL:** https://meta.discourse.org/t/discourse-coloured-text/218111
**Category:** Theme component
**Created:** [February 14, 2022, 10:27am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111 "2022-02-14T10:27:57Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 14, 2022, 10:27am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/1 "2022-02-14T10:27:57Z")

</div>

“BBCode-lite” without the need to install a plugin …

Adds a simple control (palette icon) to the Composer to facilitate colouring of the foreground and background of text

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/c/8cd602682d77055490a997d0225fb38fb9bdf41b.png)

- Select a word or text
- Hit the palette control
- It will be wrapped like so: `[wrap=color color=# bgcolor=#]word[/wrap]`
- Replace the `#`s with html-compatible colour names, e.g. “red”, “grey” … experiment.

**☣ NB Same caveats apply as to BBCode: can be used to hide text.**

## Credits

- Uses @j.jaffeux’s [Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516) 👍
- Co-authored by @Johani who added yet more 🪄 (original discussion here: [BBcode color tags in a theme - #2 by merefield](https://meta.discourse.org/t/bbcode-color-tags-in-a-theme/211902/2))

| | | |
| --- | --- | --- |
| 🛠 | `https://github.com/merefield/discourse-tc-coloured-text` | [GitHub - merefield/discourse-tc-coloured-text: A simple Theme Component alternative to the BBCode colouring plugin · GitHub](https://github.com/merefield/discourse-tc-coloured-text) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [March 19, 2023, 5:37pm UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/2 "2023-03-19T17:37:33Z")

</div>

Thanks a ton for this useful little component.  
It doesn’t seem to be applying the `composer.color_ui_button_title` properly, both when left at the default or when customized:

 ![Screenshot from 2023-03-19 12-36-30](https://global.discourse-cdn.com/meta/original/4X/3/c/b/3cb9195635135aec1a3341f3015258023e5f0386.png)

---

<div class="post-metadata">

### Author: ![kainos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kainos/32/359669_2.png) [@kainos](https://meta.discourse.org/u/kainos)
#### Post date: [February 9, 2024, 11:31am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/3 "2024-02-09T11:31:49Z")

</div>

Hello there. I don t have color text button like on this foto. Here I don t see too.

 ![3cb9195635135aec1a3341f3015258023e5f0386](https://global.discourse-cdn.com/meta/original/4X/9/3/5/9353f400a9a503dce50088ca8d9d0c96115cda8a.png)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 9, 2024, 11:36am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/4 "2024-02-09T11:36:07Z")

</div>

This #Customization > Theme component is not installed here. That is why the button does not appear.  
Did you add it to your site?

> [@merefield](#):
>
> | | | |
> | --- | --- | --- |
> | 🛠 | `https://github.com/merefield/discourse-tc-coloured-text` | [GitHub - merefield/discourse-tc-coloured-text: A simple Theme Component alternative to the BBCode colouring plugin](https://github.com/merefield/discourse-tc-coloured-text) |
> | ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
> | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

---

<div class="post-metadata">

### Author: ![kainos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kainos/32/359669_2.png) [@kainos](https://meta.discourse.org/u/kainos)
#### Post date: [February 9, 2024, 11:47am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/5 "2024-02-09T11:47:33Z")

</div>

If I knew how to add a plugin it would be good.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 9, 2024, 11:49am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/6 "2024-02-09T11:49:33Z")

</div>

I’ve fixed this.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 9, 2024, 11:50am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/7 "2024-02-09T11:50:11Z")

</div>

There is a guide how to [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)  
All the information is part of the table in the first post

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [February 9, 2024, 1:46pm UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/8 "2024-02-09T13:46:32Z")

</div>

> [@merefield](#):
>
> I’ve fixed this.

Thanks very much!

---

<div class="post-metadata">

### Author: ![Frully](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frully/32/235059_2.png) [@Frully](https://meta.discourse.org/u/Frully)
#### Post date: [July 8, 2024, 12:53am UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/9 "2024-07-08T00:53:58Z")

</div>

Excellent component!

Bug report: If I click the palette button with no text selected, it inserts the translation descriptor instead of the ‘default text’:

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/5/f/b5f4719a6b25b47fc57e06f6c2f56be69d16a460.png)

`[en_GB.composer.color_ui_default_text]`  
isn’t found in the site text customization menu, and isn’t on the component settings page.

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/9/c/19cd7b502ae93c30021e171243b559442da8a299.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [December 30, 2024, 1:55pm UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/11 "2024-12-30T13:55:18Z")

</div>

Clicking the palette icon without having text selected output this:

`[wrap=color color=# bgcolor=#][en.composer.color_ui_default_text][/wrap]`

Is this a missing string?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 30, 2024, 6:40pm UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/12 "2024-12-30T18:40:47Z")

</div>

that’s a nasty issue, fixed:

[https://github.com/merefield/discourse-tc-coloured-text/commit/b2e7f1496b3f261ceb8d9916331fe0a435469f16](https://github.com/merefield/discourse-tc-coloured-text/commit/b2e7f1496b3f261ceb8d9916331fe0a435469f16)

thanks for the reports @Frully @Canapin

I’ve added settings for default colours.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [December 30, 2024, 6:47pm UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/13 "2024-12-30T18:47:32Z")

</div>

I didn’t even read the last message :facepalm:

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 30, 2024, 10:20pm UTC](https://meta.discourse.org/t/discourse-coloured-text/218111/14 "2024-12-30T22:20:38Z")

</div>

Awesome work @merefield! This has been a sorely missing feature - until now!

I wonder if this could be combined with this TC to have a single super-awesome BBCode TC:

> [@MD Composer extras](https://meta.discourse.org/t/md-composer-extras/118912):
>
> This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).
