Tags de modération
4 participants
- PêpêcheMascotte
- Messages : 4428
Tags de modération
Mer 26 Juin 2019 - 11:11
Débutant
Mise en page de tag de modération
Hello hello
Dans ce LS, je te propose des mises en page de tag de modération (actualisation, relance et archives).
Voici les visuels :
- Spoiler:
Ce qui est modifiable :
• Les couleurs,
• l'image de fond des titres,
• les titres.
Le javascript
Pour utiliser les tags de modération sous forme de balises bbcode, je me suis inspirée de ce tutoriel. Voici le code javascript à n'afficher sur aucune page :
Vu que qu'on doit tester ou non la présence de la balise code dans le js, je ne peux l'envoyer directement dans le message. Tu le trouveras donc ici. Il te suffit de faire un clic droit sur ls-tag-modo.js et de l'enregistrer sur ton ordi.
Puis, tu l'ouvres avec un éditeur de texte et tu vas le copier coller sur ton forum
Ce code est commenté pour que tu comprennes ce que l’on fait.
Ce que tu peux modifier
Dans ce js, il ne faut modifier que le titre des blocs, c'est-à-dire :
• Ohhh des nouvelles !
• Où es-tu ?
• Oh non !
Si tu as déjà mis en place le tutoriel cité plus haut sur ton forum, viens nous demander de l'aide pour mettre en place ces nouvelles balises
Installation
Il faut ensuite aller modifier 2 templates :
• celui pour les réponses rapides
- Spoiler:
- Pour cela, on va aller dans Panneau d’administration > Affichage > Templates > Général et ouvrir le template viewtopic_body
- Spoiler:
- Pour cela, on va aller dans Panneau d’administration > Affichage > Templates > Poster & Messages privés et ouvrir le template posting_body
Pour les 2 template, on va mettre ce bout de code tout à la fin :
- Code:
<script src="http://miettes.lebonforum.com/29456.js" language="Javascript" type="text/javascript"></script>
N'oublie pas de remplacer :
- Code:
http://miettes.lebonforum.com/29456.js
La CSS
Voilà la CSS à ajouter sur ton forum (Panneau d’administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS).
- Code:
/*** --- Tag modo --- ***/
.mtg-actualisation,
.mtg-relance,
.mtg-archives{
border-radius: 20px;
margin: 10px auto 30px;
padding-top: 20px;
position: relative;
width: 80%;
}
.mtg-titre{
font: normal 26px/1 'Pacifico', cursive;
height:50px;
position: relative;
}
.mtg-titre > span{
bottom: -3px;
position: absolute;
text-align: center;
width: 100%;
}
.mtg-actualisation .content,
.mtg-relance .content,
.mtg-archives .content{
font-size: 14px;
padding: 10px;
}
.mtg-actualisation .content a,
.mtg-relance .content a,
.mtg-archives .content a{
text-decoration: none;
}
.mtg-actualisation .content a:hover,
.mtg-relance .content a:hover,
.mtg-archives .content a:hover{
text-decoration: underline;
}
/*** Actualisation ***/
.mtg-actualisation{
background: #b7db9c; /* couleur de fond du bloc */
border: 2px solid #456130; /* la bordure du bloc */
color: #456130; /* couleur du texte */
}
/* Titre */
.mtg-actualisation .mtg-titre{
background: #e2e3de url('http://pvereecken.fr/tambouille/ls/bkg-actu.png') repeat; /* Le fond du titre */
border-bottom: 2px solid #456130; /* La bordure du bas du titre */
border-top: 2px solid #456130; /* La bordure du haut du titre */
}
.mtg-actualisation .mtg-titre > span{
color: #b7db9c; /* couleur du titre */
text-shadow: 1px 1px 3px #456130, -1px 1px 3px #456130, 1px -1px 3px #456130, -1px -1px 3px #456130; /* bordure du texte du titre */
}
/* Liens */
.mtg-actualisation .content a{
color: #549a1d; /* couleur du lien du bloc */
}
.mtg-actualisation .content a:hover{
color: #456130; /* couleur du lien survolé du bloc */
}
/*** Relance ***/
.mtg-relance{
background: #dbaab0; /* couleur de fond du bloc */
border: 2px solid #41030a; /* la bordure du bloc */
color: #41030a; /* couleur du texte */
}
/* Titre */
.mtg-relance .mtg-titre{
background: #e2e3de url('http://pvereecken.fr/tambouille/ls/bkg-relance.png') repeat; /* Le fond du titre */
border-bottom: 2px solid #41030a; /* La bordure du bas du titre */
border-top: 2px solid #41030a; /* La bordure du haut du titre */
}
.mtg-relance .mtg-titre > span{
color: #dbaab0; /* couleur du titre */
text-shadow: 1px 1px 3px #41030a, -1px 1px 3px #41030a, 1px -1px 3px #41030a, -1px -1px 3px #41030a; /* bordure du texte du titre */
}
/* Liens */
.mtg-relance .content a{
color: #700411; /* couleur du lien du bloc */
}
.mtg-relance .content a:hover{
color: #8c474f; /* couleur du lien survolé du bloc */
}
/*** Archives ***/
.mtg-archives{
background: #dbdbdb; /* couleur de fond du bloc */
border: 2px solid #666; /* la bordure du bloc */
color: #666; /* couleur du texte */
}
/* Titre */
.mtg-archives .mtg-titre{
background: #e2e3de url('http://pvereecken.fr/tambouille/ls/bkg-archives.png') repeat; /* Le fond du titre */
border-bottom: 2px solid #666; /* La bordure du bas du titre */
border-top: 2px solid #666; /* La bordure du haut du titre */
}
.mtg-archives .mtg-titre > span{
color: #dbdbdb; /* couleur du titre */
text-shadow: 1px 1px 3px #666, -1px 1px 3px #666, 1px -1px 3px #666, -1px -1px 3px #666; /* bordure du texte du titre */
}
/* Liens */
.mtg-archives .content a{
color: #333; /* couleur du lien du bloc */
}
.mtg-archives .content a:hover{
color: #999; /* couleur du lien survolé du bloc */
}
/* Copyright - Ne rien modifier sous cette ligne */
.ls-ccp{
bottom: -20px;
color: #999;
display: block;
font-size: 11px;
font-style: italic;
position: absolute;
text-shadow: #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px;
text-align: center;
width: 100%;
}
.ls-ccp a{
color: #000;
text-decoration: none;
}
.ls-ccp a:hover{
color: #999;
text-decoration: underline;
}
Le code est commenté, mais en cas de souci, tu sais où nous trouver
Comment les utiliser ?
Pour utiliser ces tag de modération, il te suffit ensuite d'utiliser les balises bbcode adaptées :
• pour les actualisation :
- Code:
[actu]Ton texte[/actu]
• pour les relances :
- Code:
[relance]Ton texte[/relance]
• pour les archives :
- Code:
[archives]Ton texte[/archives]
La mise en page ainsi que les titres seront ajoutés automatiquement au clic sur "envoyer".
Tu peux aller les tester sur mon forum de test en utilisant les identifiants suivant :
voir le rendu "en vrai"• Login : Tambouille
• Mot de passe : mdpTambouille2019
Merci de ne pas supprimer le copyright
En cas de souci avec ce LS, n'hésite pas à poser tes questions à la suite de ce message.
- Cerise
- Informations : Présente les week-end seulement.
Messages : 675
Re: Tags de modération
Jeu 31 Oct 2019 - 13:53
Très sympa ses tags de modération *o*.
Re: Tags de modération
Sam 12 Déc 2020 - 19:17
Je les trouve super ces fiches d'ailleurs il se peut que je les utilise XD
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
|
|