# Je veux créer un bouton coloré actif (pas une image) à l'intérieur d'un post spécifique

**URL:** https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264
**Category:** Development
**Created:** [Octobre 29, 2022, 7:41 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264 "2022-10-29T07:41:33Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 29, 2022, 7:41 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/1 "2022-10-29T07:41:33Z")

</div>

**Bonjour. Je ne sais pas coder. Je veux créer un bouton coloré actif (pas une image) à l’intérieur d’un post spécifique. Quel code dois-je écrire dans la fenêtre de l’éditeur de post.**  
Voici ce que je veux 👇

  
Ma tentative de codage dans la fenêtre de l’éditeur de post 👇 🙈  

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

**Aidez-moi. Montrez le code correct s’il vous plaît** 🙏 🙏 🙏

---

<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: [Octobre 29, 2022, 11:53 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/2 "2022-10-29T11:53:03Z")

</div>

Regardez ceci :

> [@What are the different ways to customize content inside a post (custom attributes and such)](https://meta.discourse.org/t/what-are-the-different-ways-to-customize-content-inside-a-post-custom-attributes-and-such/226747):
>
> So far I’m aware of two way to do it: \<span data-theme-custom\>some text\</span\> CSS: [data-theme-custom] { color: pink; } [wrap="indent"]some text[/wrap] It will create either a div or a span (if there is other content on the same line), containing the following attributes: class="d-wrap" and data-wrap="custom" CSS [data-wrap="custom"] { color: pink; } Are there other ways to customize some chosen content in a post I’m not aware of? Also, is there a way to add a custom c…

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 29, 2022, 1:37 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/3 "2022-10-29T13:37:07Z")

</div>

D’après ce que j’ai compris, je ne pourrai pas ajouter le code du bouton dans la fenêtre de l’éditeur, car il ne fonctionnera de toute façon pas.  
D’après ce que j’ai compris, je ne pourrai pas ajouter le code du bouton dans la fenêtre de l’éditeur et je ne pourrai pas définir l’arrière-plan d’un article particulier, car cela ne fonctionnera de toute façon pas. Et dois-je d’abord ajouter du code à la liste blanche HTML ?

Désolé si j’ai mal compris quelque chose 🙏, je ne suis pas un spécialiste du codage et je ne parle pas bien anglais. J’utilise actuellement Google Traduction.

> [@Canapin](#):
>
> Jetez un œil à ceci :  
> [What are the different ways to customize content inside a post (custom attributes and such)](https://meta.discourse.org/t/what-are-the-different-ways-to-customize-content-inside-a-post-custom-attributes-and-such/226747)

---

<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: [Octobre 29, 2022, 2:14 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/4 "2022-10-29T14:14:56Z")

</div>

Peut-être qu’une image vaut mille mots 🙂

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/c/b/dcb235ed933ecf9a0a3663634d8b5a72e430cc65.png)

```scss
[data-theme-button] a {
        display: inline-block;
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
}

```

Si vous voulez centrer le bouton :

```scss
[data-theme-button] {
    display: flex;
    justify-content: center;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/f/2/9f26ec3e4c3bb6f31c3f1a605a8ccd10023c1fd2.png)

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 29, 2022, 2:44 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/5 "2022-10-29T14:44:19Z")

</div>

Génial, c’est incroyable 🤯. Merci beaucoup 👍 👍 👍

Il semble que j’aie compris la logique pour créer différentes options de boutons.  
Demain, je partagerai avec vous mes expériences avec le code.

En attendant, j’ai une autre question : quelle commande permettra d’aligner le bouton sur le bord droit de la publication.

Merci encore 🙌

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 29, 2022, 3:18 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/6 "2022-10-29T15:18:19Z")

</div>

Est-il possible d’encoder la taille et l’épaisseur du texte en CSS ?

---

<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: [Octobre 29, 2022, 5:33 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/7 "2022-10-29T17:33:04Z")

</div>

> [@Aizada\_M](#):
>
> En attendant, je voudrais poser une autre question : quelle commande permettra d’aligner le bouton sur le bord droit du message.

```scss
[data-theme-button] {
    display: flex;
    justify-content: end;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

```

> [@Aizada\_M](#):
>
> Est-il possible d’encoder la taille et l’épaisseur du texte en CSS ?

Oui : utilisez les attributs suivants :

`font-size` et `font-weight`

Avec les valeurs souhaitées.

Documentation :

> **[W3Schools.com](https://www.w3schools.com/cssref/pr_font_font-size.php)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

> **[W3Schools.com](https://www.w3schools.com/cssref/pr_font_weight.php)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

* * *

ℹ J’ai mis à jour mon code CSS dans mes messages pour le rendre plus propre (en utilisant les attributs flexbox au lieu de margin pour aligner le bouton).

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 29, 2022, 5:40 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/8 "2022-10-29T17:40:05Z")

</div>

Un grand merci. Votre réponse est très importante pour moi. J’essaie d’étudier.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [Octobre 29, 2022, 6:03 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/9 "2022-10-29T18:03:40Z")

</div>

Juste pour information, bien qu’il soit acceptable de poser une question occasionnelle sur la modification de votre site ici et là, à proprement parler, les questions de base sur CSS et HTML sont généralement mieux posées sur un forum dédié à cela.

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 30, 2022, 4:42 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/10 "2022-10-30T04:42:25Z")

</div>

> [@Canapin](#):
>
> ```plaintext
> [data-theme-button] a {
> display: inline-block;
> padding: 20px 50px;
> background: #24E927;
> border-radius: 5px;
> border: 3px solid #004E7D;
> color: #004E7D;
> }
> }
> 
> ```

**Lorsque j’ai essayé de mettre à jour le code selon votre exemple, j’ai eu une erreur.**

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/3/8/238ea332575ffc9af737f90de74434d26423e75c.png)

> [@Canapin](#):
>
> ```plaintext
> }
> }  
> 
> ```

Mais lorsque j’ai supprimé le deuxième caractère « } », l’erreur a disparu

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

Ai-je bien fait ?

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 30, 2022, 4:52 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/11 "2022-10-30T04:52:43Z")

</div>

> [@JammyDodger](#):
>
> mieux vaut poser sur un forum dédié à ce sujet :

Bonjour. J’ai bien compris « forum dédié », qui n’a rien à voir avec Discourse. Ou alors Discourse a un forum séparé pour discuter des problèmes CSS et HTML. (Je ne suis pas sûr si mon navigateur traduit correctement)

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 30, 2022, 5:01 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/12 "2022-10-30T05:01:42Z")

</div>

> [@Canapin](#):
>
> `font-size` ainsi que `font-weight`

Je m’excuse pour mon insolence 🙏 Pourriez-vous me montrer cela avec mon exemple CSS ? 🙏

P.S. Parallèlement au discours, j’ai commencé à explorer le monde du codage 😅

---

<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: [Octobre 30, 2022, 11:32 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/13 "2022-10-30T11:32:22Z")

</div>

> [@Aizada\_M](#):
>
> Ai-je bien fait ?

Oui, désolé, j’ai fait une erreur en copiant-collant mon code. 👍

> [@Aizada\_M](#):
>
> Bonjour. J’ai bien compris « forum dédié », qui n’a rien à voir avec Discourse. Ou bien Discourse a un forum séparé pour discuter des problèmes CSS et HTML. (Je ne suis pas sûr que mon navigateur traduise correctement)

Il dit que poser des questions générales sur CSS qui ne sont pas directement liées à Discourse (comme utiliser CSS pour changer la taille ou l’épaisseur du texte) ne devrait pas être discuté sur [meta.discourse.org](http://meta.discourse.org), mais ailleurs où vous pouvez apprendre et poser des questions sur CSS.

Si vous avez une question précise sur la façon d’utiliser CSS pour faire **une chose spécifique dans Discourse** , alors [meta.discourse.org](http://meta.discourse.org) est approprié.

Je vous suggère d’apprendre les bases de CSS. tapez « tutoriel CSS » dans votre propre langue sur votre moteur de recherche préféré, et essayez d’acquérir des connaissances à partir d’ici pour commencer. Cela vous aidera grandement plus tard à personnaliser le style de votre forum Discourse.

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [Octobre 30, 2022, 12:23 UTC](https://meta.discourse.org/t/i-want-to-create-an-active-colored-button-not-an-image-inside-a-specific-post/243264/14 "2022-10-30T12:23:40Z")

</div>

Bonjour, merci, c’est clair maintenant !  
Je ne manquerai pas d’utiliser les liens que vous avez fournis 👍
