Options d'arrière plan au texte sur une partie du message

[chattigre]

Bonjour à tous,
Je souhaiterais savoir comment mettre un arrière plan à une partie du message, un peu comme les bandeaux du Staff de ce forum
Je pense que cela passe par le CSS, et apparemment, par un tableau, mais comment faire, comment l'afficher ensuite dans un message, etc, etc...
Merci d'avance
chattigre

EDIT : Ou, plus simplement, comment ajouter des classes de tableau, puisque l'éditeur propose de spécifier directement celle-ci, dans le CSS (sous quelle forme)

[*Splash*]

Tu colles ce code CSS :

Code:

/* DÉBUT MESSAGE SPÉCIAL */
.messpe {
   background-color: #DCDCDC;
   border-radius: 10px; 
   padding: 10px 15px;
}
/* FIN MESSAGE SPÉCIAL */

À chaque fois que tu veux rédiger un message il faut l'écrire à l'intérieur de la div, ainsi :

Code:

<div class="messpe">Mise en page d'un message spécial</div>

Tu auras ce rendu

[chattigre]

D'accord, merci, et si je veux avoir plusieurs types différents...
Merci d'avance

[*Splash*]

J'ai édité mon premier message suite à une erreur

Pour en avoir plusieurs tu ajoutes autant de class que tu veux, "messpe" en est une, si tu veux un autre style de message tu ajoutes (par ex) blingbling avec un code CSS dédié

[chattigre]

Je ne sais jamais comment me servir des dégradés dans les codes, pourrais tu me faire un exemple avec un dégradé, que je n'ai plus qu'a changer les couleurs ? Merci d'avance
PS : A quoi servent les lignes 5 à 8, je suis nul en code, au cas où tu ne l'aurais pas compris
Merci

[*Splash*]

PS : A quoi servent les lignes 5 à 8, je suis nul en code, au cas où tu ne l'aurais pas compris
Merci

Elles ne servent strictement à rien, à supprimer
J'ai modifié le premier message

[chattigre]

Je cherche loin, si ce n'est pas possible, ce n'est pas grave, mais est il possible que lorsqu'on écrit un message, la partie spéciale comporte un titre, comme par exemple :

Résultats :
---
Le texte tapé entre les balises ici

ça ne m'étonnerais pas que ce soit très compliqué à faire voir impossible, dans ce cas ne cherche pas...
Mais je demande toujours

Je ne sais jamais comment me servir des dégradés dans les codes, pourrais tu me faire un exemple avec un dégradé, que je n'ai plus qu'a changer les couleurs ? Merci d'avance

Au cas où tu ne m'ai pas lu... tu pourrais me faire ça ? Merci d'avance...

PS : A quoi servent les lignes 5 à 8, je suis nul en code, au cas où tu ne l'aurais pas compris
Merci

Elles ne servent strictement à rien, à supprimer
J'ai modifié le premier message

Je t'en prie
Tu as dormi cette nuit ?

[*Splash*]

Tu as dormi cette nuit ?

Visiblement pas assez...

Pour les dégradés je ne sais pas trop comment ça fonctionne, j'imagine que cela necessite un script en sus
Pour la suite du code je regarde plus tard

[chattigre]

Pour les dégradés, j'ai essayé plusieurs sites "dégradés CSS" mais rien ne marche...
J'ai un dégradé dans mon CSS pour mon thème (préfabriqué), copié, collé, et là, va savoir pourquoi, ça marche

Bref...
Donc les dégradés, c'est Ok

ça donne ça (après ajustements...)

Code:

.blocmsg {
background: -webkit-linear-gradient(left, #add356, #00dfa6); 
  border-radius: 10px; 
  padding: 10px 15px;
  margin : 5px
}

En espérant que tu trouves pour l'en tête... prends ton temps
chattigre

[*Splash*]

Ce que je te propose comme genre de message



Le code CSS :

Code:

.messpeTitre {
    background: -webkit-linear-gradient(left, #add356, #00dfa6);
    padding: 20px 50px;
    margin : 1px;
}
.messpe {
    background-color: #DCDCDC;
    border-radius: 10px;
    padding: 10px 15px;
}

Et la rédaction du message :

Code:

<div class="messpeTitre">TITRE</div><div class="messpe">Rédaction de messages spéciaux</div>

---

Avec ce code :

Code:

<div class="messpeTitre">Le lorem ipsum</div><div class="messpe">[font= Arial Black]Qu'est-ce que le Lorem Ipsum?[/font]
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.

[font= Arial Black]Pourquoi l'utiliser?[/font]
On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</div>

Cela donne ce rendu




Il existe aussi la solution du tout en un !
On n'ajoute aucun code à la CSS et tout se fait dans le code du message, ainsi :

Code:

<div class="messpeTitre"style="background: -webkit-linear-gradient(left, #add356, #00dfa6);padding: 20px 50px;margin : 1px;">TITRE</div><div class="messpe"style="background-color: #DCDCDC; border-radius: 10px;padding: 10px 15px;">Rédaction de messages spéciaux</div>

[chattigre]

Alors non Splash, on ne s'est pas compris
Je souhaite que lorsque j'indique cette classe de message spécial, un titre apparaisse AUTOMATIQUEMENT avant le texte saisi entre les balises...
Donc si je saisis

Code:

<div class=blocfo> Ceci est un message concernant le forum </div>

Cela donnerai :

Information concernant le forum  :
---
Ceci est un message concernant le forum

Merci d'avance.

[*Splash*]

Alors non Splash, on ne s'est pas compris
Je souhaite que lorsque j'indique cette classe de message spécial, un titre apparaisse AUTOMATIQUEMENT avant le texte saisi entre les balises...
Donc si je saisis

Code:

<div class=blocfo> Ceci est un message concernant le forum </div>

Cela donnerai :

Information concernant le forum  :
---
Ceci est un message concernant le forum

Merci d'avance.

Effectivement c'était difficilement compréhensible ainsi

Je cherche loin, si ce n'est pas possible, ce n'est pas grave, mais est il possible que lorsqu'on écrit un message, la partie spéciale comporte un titre, comme par exemple :

Résultats :
---
Le texte tapé entre les balises ici

[chattigre]

Et donc penses tu que c'est possible ?

[*Splash*]

Non pour ce que tu veux je ne sais pas le réaliser, désolé

[chattigre]

Hello c'est re moi avec mes questions impossibles
J'avais intégré ceci au CSS pour rendre les lignes HR des posts noires :

Code:

/* MODIFICATION DES LIGNES DE SEPARATION DE TYPE HR DANS LES MESSAGES */   
    .inner .postbody hr
    {
    border-top: 1px solid #000000;
    }
/* FIN MODIFICATION DES LIGNES HR DANS LES MESSAGES */

Est il possible de faire que celles ci soit d'une autre couleur dans mes messages spéciaux car j'en place une au dessous de chaque titre, c'est mieux si elles ont la bonne couleur...
Si je veux qu'elles soient blanches (style par défaut) dans les messages spéciaux, c'est faisable ?
Merci d'avance

[Miettes]

Coucou

Tu peux tester ceci aussi pour ton texte :
> CSS :

Code:

.messpe {
    background-color: #DCDCDC;
    border-radius: 10px;
    padding: 10px 15px;
}
       
.messpe:before{
    content: 'Information concernant le forum :';
    display: block;
    font: bold 16px/1 Verdana, sans-serif;
}

> HTML :

Code:

<div class="messpe"> Ceci est un message concernant le forum </div>

En gros, la CSS injectera du texte avant ton bloc

Pour le truc des hr, tes messages spéciaux ont une mise en page particulière ? Ils sont dans un élement qui a une class ou un id ?

[chattigre]

Hello miettes
Pour le :before
Merci, ça marche... presque
J'aimerais pouvoir mettre ce texte :

Information :

---

Pour le gras, à peu près ok, mais le hr je n'y arrive pas...

Pour l'emplacement des messages spéciaux, c'est sur une partie d'un message...

Mon sujet
par Admin le 01/01/2019
---
Blablablablablablablablabla...

Information :

---

Ce sujet a été corbeillé

Code:

Mon sujet
par Admin
---
blablablablabla
<div class=blocinfo> Ce sujet a été corbeillé </div>

Voilà voilà...
Merci

[*Splash*]

Hi chattigre,
Pour ton problème de hr, à ce code :

Code:

.messpe:before{
    content: 'Information concernant le forum :';
    display: block;
    font: bold 16px/1 Verdana, sans-serif;
}

Tu peux y ajouter un border-bottom, ainsi :

Code:

.messpe:before{
   content: 'Information concernant le forum :';
   display: block;
   font: bold 16px/1 Verdana, sans-serif;
   border-bottom: 1px solid #eee;
}

[chattigre]

Splash y a t il moyen d'ajouter une marge entre le texte automatique d'en tête et la "bordure-hr", parce que là ça mord presque sur le bas des caractères
EDIT : trouvé : ajout d'un padding-bottom au :before

---

---

EDIT modération : balises gras et couleur supprimées, ceci est réservé à la modération

[*Splash*]

Un padding simple suffirait je pense :

Code:

.messpe:before{
  content: 'Information concernant le forum :';
  display: block;
  font: bold 16px/1 Verdana, sans-serif;
  border-bottom: 1px solid #eee;
  padding: 5px;
}

Sur ce screen il y a un paddind: 5px :

[chattigre]

Oui merci.
ça me convient
Il me reste une seule et dernière question :

J'ai mis en place une ruse via la censure : Lorsque l'on veut mettre un message spécial, on tape :

Code:

[blocFo] Notre texte [/bloc]

code 0
Qui est remplacé via la censure par :

Code:

<div class=blocfo> Notre texte </div>

code 0b
C'est pratique d'utilisation, et pour prévisualiser, on ne voit rien, mais en cas d'édition, on verra le deuxième code...

Y a t il par un pur hasard un moyen via les templates, html, ou Javascript que, par exemple,

Code:

[blocfo]

code 1

soit interprété comme :

Code:

<div class=blocfo>

code 2

Ce qui éviterait ce problème...

En phrase résumant cela ça donnerai:
Si code 1 alors interprète comme code 2...

Merci d'avance (Si ce n'est pas possible, tant pis )

[Miettes]

Coucou

Pour ce dernier point, tu peux peut-être jeter un oeil à ce tutoriel qui explique comment ajouter des balises bbcode à ton forum (avec des permissions d'utilisation )

[chattigre]

Coucou

Pour ce dernier point, tu peux peut-être jeter un oeil à ce tutoriel qui explique comment ajouter des balises bbcode à ton forum (avec des permissions d'utilisation )

Oulà ! C'est bien complexe tout ça
Je vais voir, mais je ne suis sur de rien
Merci
Je passe le sujet en résolu, j'ouvrirais un sujet "créations bbcodes" si besoin est
L'objectif principal reste atteint, merci Beaucoup *Splash* et Miettes

[*Splash*]

De rien, au plaisir