La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4428

Tags de modération Empty Tags de modération

Mer 26 Juin 2019 - 11:11

Débutant

Mise en page de tag de modération


Hello hello Smile

Dans ce LS, je te propose des mises en page de tag de modération (actualisation, relance et archives).

Voici les visuels :
Spoiler:

IdeaCe 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 :
Tags de modération Reglag10

Arrow 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 Smile
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 Smile

Installation

Il faut ensuite aller modifier 2 templates :
• celui pour les réponses rapides
Spoiler:
• celui pour les messages (nouveau sujet & répondre)
Spoiler:

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>

Idea N'oublie pas de remplacer :
Code:
http://miettes.lebonforum.com/29456.js
par le lien de ton propre javascript Smile

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;
}

Idea Le code est commenté, mais en cas de souci, tu sais où nous trouver Smile

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".

Idea Tu peux aller les tester sur mon forum de test en utilisant les identifiants suivant :
• Login : Tambouille
• Mot de passe : mdpTambouille2019
Arrow voir le rendu "en vrai"




Idea Merci de ne pas supprimer le copyright Smile

En cas de souci avec ce LS, n'hésite pas à poser tes questions à la suite de ce message.


Féli
Féli
Messages : 489
http://feli.forumactif.org

Tags de modération Empty Re: Tags de modération

Mer 30 Oct 2019 - 12:18
c'est mignon ça, merci
Cerise
Cerise
Informations : Présente les week-end seulement.
Messages : 675

Tags de modération Empty Re: Tags de modération

Jeu 31 Oct 2019 - 13:53
Très sympa ses tags de modération *o*.
Aurora Borealis
Aurora Borealis
Informations : Présente de 10h à 22h tous les 4 jours pour une durée de 4 jours. Sinon présente le soir après 19h.
Messages : 17
https://fantasyart.forumperso.com

Tags de modération Empty Re: Tags de modération

Sam 12 Déc 2020 - 19:17
Je les trouve super ces fiches Smile d'ailleurs il se peut que je les utilise XD
Contenu sponsorisé

Tags de modération Empty Re: Tags de modération

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses