# Wikified Posts Component
**URL:** https://meta.discourse.org/t/wikified-posts-component/199492
**Category:** Theme component
**Tags:** wiki-posts
**Created:** [August 6, 2021, 9:59pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492 "2021-08-06T21:59:32Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [August 6, 2021, 9:59pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/1 "2021-08-06T21:59:32Z")
## Simple Description
This theme component enables you to make Wiki posts (and Shared Edits posts) more obvious.
Wikis and Shared Edits are a powerful feature of Discourse, but many users are unfamiliar with the concept and find the UI just a bit too subtle. This component makes it crystal clear, packaging the content from [Change the style of a wiki post](https://meta.discourse.org/t/how-to-change-the-style-of-a-wiki-post/78881).
## Screenshots
> 
## Detailed Description
Installing this component enables you to control the background colour of Wiki posts, and to add some text to the history/edit icon in the top right of the post.
It is a fork of [discourse-wikified-post-background-color](https://github.com/pacharanero/discourse-wikified-post-background-color) by @pacharanero, incorporates stuff from [Change the style of a wiki post](https://meta.discourse.org/t/how-to-change-the-style-of-a-wiki-post/78881) and re-used code from [Personal Message Bubbles](https://meta.discourse.org/t/personal-message-bubbles/147994) by @Rhidian.
## Settings
#### Wiki post background color
The background colour of Wiki posts can be set to whatever you like. It defaults to ‘highlight’, but you can use any of these options:
1. It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.
2. A named color recognised in CSS (e.g. blue, red, yellow, black, etc)
3. An HTML color code (e.g. #effbfb, etc)
#### Shared edits background color
You can choose one of the same color options for Shared Edits posts (see the [Shared Edits Plugin](https://meta.discourse.org/t/discourse-shared-edits/167583))
#### Wiki added text
This adds the little bit of green text (defaulting to `Wiki Post`) in the top right corner of the post:
> 
This is dynamic, and changes colour along with the history icon if there has been a recent edit (this is an unintended happy thing):
> 
If you don’t want any text there, then delete the text in the setting and save it.
#### Shared edits added text
The text displayed when it is a Shared Edits post. This is in the Danger color from your palate.
> 
## Roadmap
1. Auto tag Topics with ‘wiki’
Please make suggestions as replies to this post.
| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [GitHub - nathan-nz/discourse-wikified-posts: This allows you to make Wiki posts more obvious. · GitHub](http://github.com/nathan-nz/discourse-wikified-posts) |
| ❓ | **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) |
Install this theme component
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [August 7, 2021, 2:22pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/2 "2021-08-07T14:22:16Z")
Lovely stuff @nathank
I’m going to archive the old wikified post background color repo, in favour of this your new version, which adds much more.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [December 12, 2021, 6:12pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/3 "2021-12-12T18:12:51Z")
Anyone else getting this error?
`Error: Undefined variable: "$Shared-edits-hide". on line 42 of common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^`
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 12, 2021, 7:06pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/4 "2021-12-12T19:06:53Z")
I can’t reproduce that, and can’t see any obvious problems in the code. Can you give us any more info?
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [December 12, 2021, 7:50pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/5 "2021-12-12T19:50:47Z")
It’s because I had `Shared edits hide` set to _No_. The error appeared in the TC settings. Error is gone after setting it to _Yes_.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 12, 2021, 9:25pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/6 "2021-12-12T21:25:18Z")
> [@Zup](#):
>
> It’s because I had `Shared edits hide` set to _No_ .
I don’t get it with it `No` nor `Yes` on the latest Discourse Beta. Are you on an old Discourse version? I haven’t put any version control in it at all sorry.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [December 12, 2021, 9:30pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/7 "2021-12-12T21:30:25Z")
Sorry, my bad - was a bit outdated, yeah. Forgot to test again after recent update until you mentioned it. Thanks. 🙂
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 13, 2021, 12:50pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/8 "2021-12-13T12:50:28Z")
Have just updated the component to better cater for Shared Edits posts.
This includes adapting it for the Shared Edits changes here:
> [@Shared-Edits Improvements](https://meta.discourse.org/t/shared-edits-improvements/232713/9):
>
> I pushed a few changes.
> [DEV: improve interaction between wiki and shared-edit posts by hnb-ku · Pull Request #31 · discourse/discourse-shared-edits · GitHub](https://github.com/discourse/discourse-shared-edits/pull/31)
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [August 10, 2022, 2:39am UTC](https://meta.discourse.org/t/wikified-posts-component/199492/9 "2022-08-10T02:39:06Z")
Done a minor tweak to the default background colors as I couldn’t see @mentions easily.
Also Shared Edits background color now defaults to `tertiary-very-low`.
[https://github.com/nathan-nz/discourse-wikified-posts/pull/4](https://github.com/nathan-nz/discourse-wikified-posts/pull/4)
---
### Author:  [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 17, 2023, 8:10pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/10 "2023-08-17T20:10:46Z")
An excellent component. But it improves visibility only on the topic page. Is it possible to modify it so that the wiki icon is displayed on the category page, the list of topics “recent”, “unread”, etc?
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [August 17, 2023, 9:54pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/11 "2023-08-17T21:54:50Z")
Good suggestion, and I’m sure it is possible (PR welcome!).
I address that by simply tagging posts with #Wiki in my instances. It is of course semi-manual - you can identify the wiki posts / topics by advanced search. It has the added bonus of making them easily discoverable via the sidebar navigation.
I thought that it would be nice to have auto-tagging of wiki posts as part of this component some way (or do as you suggest) but it hasn’t caused me enough pain to put in the time to give this a crack I’m afraid.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 18, 2023, 4:36pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/12 "2023-08-18T16:36:48Z")
> [@volanar](#):
>
> Is it possible to modify it so that the wiki icon is displayed on the category page, the list of topics “recent”, “unread”, etc?
I asked this in 2021 here: [Add an icon in front of wikis in the topic list?](https://meta.discourse.org/t/add-an-icon-in-front-of-wikis-in-the-topic-list/206888)
The answer was:
> [@Add an icon in front of wikis in the topic list?](https://meta.discourse.org/t/add-an-icon-in-front-of-wikis-in-the-topic-list/206888/2):
>
> wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class.
The #Contribute > Feature request:
> [@Add a specific class for wikis (when first post) at the topic list level](https://meta.discourse.org/t/add-a-specific-class-for-wikis-when-first-post-at-the-topic-list-level/214237):
>
> Following the suggestion from @Johani here: To which Johani replied: Unfortunately, wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class. I suppose the vast majority of wikis are first posts, but I understand the post level issue. However, having the possibility of emphasizing wikis on the topic list would be a neat addition and may incite people to visit them and m…
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [September 5, 2023, 11:25am UTC](https://meta.discourse.org/t/wikified-posts-component/199492/13 "2023-09-05T11:25:55Z")
I’m seeking for advice how to adapt the background colors to (automatic) dark mode.
Currently, the light bright colors I have chosen for backgrounds render the posts unreadable in dark mode.
Could it be possible to extend the color palette and do some color calculation to define background colors for wikis and pads?
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [September 5, 2023, 11:32am UTC](https://meta.discourse.org/t/wikified-posts-component/199492/14 "2023-09-05T11:32:12Z")
You could use tags to mark “wiki”-topics.
Tags can be styled by CSS IIRC.
You would get the additional benefit of a listing / drill down option for them.
In addition, a wiki-tag could be added to topics including wikis automatically with a plugin.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [September 6, 2023, 6:45am UTC](https://meta.discourse.org/t/wikified-posts-component/199492/15 "2023-09-06T06:45:50Z")
This is why I recommend a Scheme colour:
> [@nathank](#):
>
> It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.
If you want to go off-piste with your colours, you will need to find a clever way to deal with dark mode.
A nice feature would be to enable specification of a dark mode colour too. I’ll take a look at that when I get some spare time.
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [September 6, 2023, 8:16am UTC](https://meta.discourse.org/t/wikified-posts-component/199492/16 "2023-09-06T08:16:38Z")
> [@nathank](#):
>
> It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.
Sure. But these colors are too dominant for a background.
Therefore I was dreaming of something like 10% scheme-color mixed with 90% background. I suppose SASS (or something similar) is not available in the frontend.
But would some CSS magic [like this](https://una.im/css-color-theming/) work?
Update: `rgba(0, 255, 0, 0.1)` works quite good in dark and light modes.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 6, 2023, 8:30am UTC](https://meta.discourse.org/t/wikified-posts-component/199492/17 "2023-09-06T08:30:32Z")
> [@thoka](#):
>
> I suppose SASS (or something similar) is not available in the frontend.
> But would some CSS magic [like this](https://una.im/css-color-theming/) work?
SASS functions are available in the customize theme section, it’s compiled when you save your modifications. Your can’t use SASS functions on theme or CSS variables though.
If you want to use a SASS function on a color from your color scheme, you must use the corresponding SASS variable.
Will work ✅
```scss
body {
background: darken($secondary, 10%);
}
```
Won’t work ❌
```scss
body {
background: darken($my_theme_variable, 10%);
}
```
Won’t work ❌
```scss
body {
background: darken(var(--secondary), 10%);
}
```
And on the paper, I think what your link describes should work. 🙂
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [July 10, 2024, 8:26pm UTC](https://meta.discourse.org/t/wikified-posts-component/199492/18 "2024-07-10T20:26:51Z")
> [@Canapin](#):
>
> SASS functions are available in the customize theme section, it’s compiled when you save your modifications.
Maybe this is worth a shot. Here is a guide (for my own reference) on using the SASS mix() function:
[https://subscription.packtpub.com/book/web-development/9781849694544/4/ch04lvl1sec45/the-mix-function](https://subscription.packtpub.com/book/web-development/9781849694544/4/ch04lvl1sec45/the-mix-function)