A quick guide to change the style of your wiki posts:
Change the background color:
In your /admin/customize/themes
add this CSS under Common > CSS
.wiki .topic-body .cooked {
background-color: #dcffdc; /*light green*
}
Change text size
If you want you can also change the font used or the size of the text, even the color
.wiki .topic-body .cooked p {
font-size: 18px;
color: green;
}
Add text
You can add a text to make clear to users that what they are watching is a wiki post
.post-info.edits .wiki::before {
content: "EDIT THIS WIKI POST";
color: green;
background-color: #d2e2d2;
margin-right: 3px;
font-weight: bold;
border: 1px solid green;
padding: 3px;
}
This document is version controlled - suggest changes on github .
Last edited by @JammyDodger 2024-07-10T11:17:45Z
Check document Perform check on document:
21 Likes
Hey, we just changed the background color of wikis on the Fairphone forum, but like all other posts each wiki starts out as staff-blue when you load it, then slowly turns white and only then turns green.
Is there a way to disable this animation for wiki posts?
I believe this should do the trick:
.wiki .topic-body {animation: none;}
6 Likes
Here’s a Theme Component which makes Wikified posts pale green again, and incorporates @Kris ’s animation: none
tweak. (I chose an essentially random pale green as I did this surreptitiously while I was supposed to be paying attention in a meeting. But you can change the RGB value in the Theme Component CSS after installation)
Improvements always welcome by pull request.
https://github.com/pacharanero/discourse-wikified-post-background-color
4 Likes
sca
(SumitC)
June 17, 2021, 7:31pm
5
Is there a way to make background conditional on light and dark theme? Appreciate your response
1 Like
dax
(Daniela)
July 7, 2021, 12:03pm
6
The simplest thing to do is create two different theme components, one for the Light theme and one for the Dark theme so you don’t need to write any more CSS
2 Likes
nathank
(Nathan Kershaw)
July 28, 2021, 2:50am
7
For Wiki customisations to work well in Private Messages with the new changes , I suggest a slight tweak to the CSS so that it targets .cooked:
// customises wiki posts
.wiki .topic-body .cooked {
background-color: #e8f9fd;
animation: none;
}
.post-info.edits .wiki::before {
content: "Wiki Post";
margin-right: 5px;
font-weight: bold;
}
I’ll pop this in the OP too.
Later…
And for the hell of it I turned it into the Theme Component with the ability to customise the background color and the text.
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 How to change the style of a Wiki post .
Screenshots
[image]
Detailed Description
Installing this component enables you to control the background colour of Wiki posts, an…
2 Likes