Share two practical functions: 1. Add the original poster or other logo to the topic or post, 2. Add custom content color to the homepage

UX
1

First add a theme component name customization and make sure to enable your theme or all themes as shown

6
6597×337 9.33 KB

Add the first person to add the original poster or other logo in the topic or post
Add the css code as follows

.posts-wrapper {
position: relative;
}

div.topic-owner .topic-body .contents > .cooked::after {
content: "TOPIC OWNER - meta.discourse.org"; /* Text content, can be changed to "TOPIC OWNER" */
font-size: small; /* Font size */
color: #00aeff; /* Font color */
float: right; /* Position right */
font-style: italic; /* Italic */
font-weight: bold; /* Bold */
}

Don’t forget to save your code

Add the second component
Add the code after the title

<div class="custom-welcome-banner" style="background-color: var(--custom-banner-bg); padding: 10px; text-align: center;">
  <strong>Keep your custom content short</strong>，Custom content  
  <a href="/faq" style="color: var(--custom-banner-link); margin-left: 10px;">《Frequently asked questions》</a>
</div>

Color definition add code
This is necessary if your website allows switching between day and night

:root {
  /* Defining dynamic color variables */
  --custom-banner-bg: #{dark-light-choose(#d1f0ff, #03374b)};
  --custom-banner-text: #{dark-light-choose(#ffffff, #000)};
  --custom-banner-link: #{dark-light-choose(#50d8ff, #0073ea)};
}

Don’t forget to save your code

I don’t know if anyone has submitted this kind of question. I summarized it by drawing on some forums built using discourse.
If this post already has similar solutions or copyright issues, please delete me.

I don’t know if anyone has submitted such a question. I drew on some forums built using Discourse to summarize it.
If this post already has a similar solution or copyright issue, please delete me.

Why post this post?

  1. I don’t know how to code.
  2. I don’t know English.
  3. I think someone will need it, especially those who don’t know how to code.
  4. People who know how to code will check the documents themselves to find a solution.

To sum up, if I have any omissions, please ask the administrator to modify it. If the content is inappropriate, it can be deleted. At the same time, I am also saving it for myself so that I can find the solution I need here.

I don’t know English. This content is all translated by Google. Please forgive me if there is any inappropriate wording.

Because new users can only add one picture, there is no way to show the effect

2

4
41168×803 34.6 KB

3

1
1944×662 69.2 KB