AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


208 résultats trouvés pour html

Onyx

Système de Badges - Jeu 2 Sep 2021 - 2:06


Système de Badges



Préambule



Vous avez vu le système de badge "Utopia Adventure" sur votre profil de Never-Utopia? Celui qui ressemble à ceci ?
Tag html sur Never Utopia - graphisme, codage et game design WLk1ZKe

Eh bien vous pouvez avoir la même chose.

Ce libre service a été créé suite à plusieurs demandes. Au départ, le système a été créé suite à la demande de Iguolta par Nihil Scar Winspeare qui l'a ensuite adapté aux profils simples suite à la demande de Crépuscule de Lune. Enfin, j'ai bricolé une version avec les badges qui s'affichaient dans les messages à la demande de Capuccino que j'ai beaucoup retouché pour ce LS.


IMPORTANT : Ce LS a été créé avant l'ajout du nouveau système de récompense par ForumActif. Maintenant qu'il existe, il serait peut-être mieux d'aller jeter un coup d’œil à ce système de récompense pour valider si cela correspond à vos besoins avant de vous intéresser à ce LS Wink


Étapes


Étape 1
Dans une page HTML, on met tous les badges qui peuvent être obtenus par les membres et on donne une classe (un nom) unique à chaque badge pour les identifier.

Étape 2
On va créer un champ de profil (comme le champ âge, date de naissance, etc. sur le profil). Dans ce champ, les membres (ou Modos ou Admins) mettront le nom des badges qu'ils ont obtenus.

Étape 3
Dans le profil des joueurs, un javascript ira prendre les badges dans la page HTML et les ajoutera au bas du profil (ou à un autre endroit de votre choix). Ce même javascript regardera le champ des badges pour identifier les badges obtenus et leur donnera la classe "obtenu" afin qu'on puisse les différencier des non-obtenus.
- Exemple de mon forum-test
- Exemple avec profil simple personnalisé par Star City Heroes

Étape 4
Dans le profil des joueurs sur les sujets/messages, un javascript ira comparer le champ des badges aux badges de la page HTML et copiera les badges obtenus pour les ajouter dans le profil (ou ailleurs dans la page, au choix).
- Exemple de mon forum-test
- Exemple (les badges sont appelés "sorts") par L'Île d'Arcane
- Exemple avec les badges dans la signature (badges avec infobulles) par L'Île d'Arcane

Étape 5
Enfin, on va mettre en forme les badges pour leur donner un peu de style et différencier les badges obtenus des non-obtenus.

Je tiens à préciser que les exemples qui ne sont pas de mon forum test sont là uniquement pour que vous ayez une idée de ce que vous pourriez obtenir, vous ne pouvez pas les recopier. Les membres de ces forums ont travailler dur pour adapter les codes à leur design, ils méritent qu'on les respecte et qu'on ne les plagie pas Wink

Vous êtes libre de faire l'étape 3 et/ou l'étape 4 selon ce que vous voulez avoir. Les deux javascripts sont indépendants, donc vous pouvez seulement en prendre un des deux ou les deux selon vos souhaits.


Critères de base pour utiliser le LS


- Le code fonctionne seulement avec la version de forum PhpBB2
- Il faut avoir accès au panneau d'administration (donc être Admin)
- Pour mettre les badges sur les sujets ou personnaliser avec le Profil Simple, il faut avoir accès aux templates (donc avoir accès au compte fondateur)

Mettre un crédit vers Never-Utopia est obligatoire.

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^




1. Créer la page des badges (Page HTML)



Nous allons maintenant créer une page HTML dans laquelle nous allons mettre tous les badges.

Pour cela, nous allons aller dans :
> Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".

On choisit un titre comme "Système de Badges".
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <style>
  .badge {
    display: inline-block;
    margin: 5px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
  .obtenu {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
  }
  </style>
</head>
<body>
 
  <div id="badges-profil">
    <img src="https://2img.net/h/www.aht.li/2946903/morpheus.png" title="Badge 1" class="badge badge_1" />
    <img src="https://2img.net/h/www.aht.li/2946904/neo.png" title="Badge 2" class="badge badge_2" />
    <img src="https://2img.net/h/www.aht.li/2946905/architecte.png" title="Badge 3" class="badge badge_3" />
  </div>
 
</body>
</html>


Lorsque vous modifiez votre page, il faut cliquer sur le triple engrenage (Tag html sur Never Utopia - graphisme, codage et game design HAHlEmt), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Chaque badge correspond à ceci :
Code:
<img src="url_du_badge" title="Titre du badge" class="badge badge_3" />


Ici, il s'agit d'une image, mais vous pouvez tout autant faire une infobulle ou autre chose.

Ce qui nous intéresse ici est le badge_3. Pour chaque badge j'ai rajouté une classe unique. Ici, j'ai simplement mis un chiffre, mais on aurait pu mettre "halloween2" par exemple :)

Le but c'est d'avoir une classe supplémentaire et unique (^-^)

Il est important que ces noms ne comportent pas d'espace, ni d'apostrophe ( ' ), de guillement ( " ) ou de caractères spéciaux (point d'exclamation, signe de dollar, etc.), sinon cela ne fonctionnera pas.

Exemples de bonnes classes :
Code:
badge1
concours_2
Roi-du-Monde
Champion_de_l_Été
halloween


Exemples de mauvaises classes :
Code:
badge 1
concours!
Roi-du-Monde"
Champion_de_l'Été
hallo;ween


Voilà \o/




2. Créer le champ des badges



Afin d'afficher les badges obtenus par les membres, on va maintenant créer un champ de profil dans lequel on va mettre les classes uniques aux badges obtenus afin de les identifier.

Pour cela, nous allons aller dans :
> Panneau d'administration > Utilisateurs et Groupes > Utilisateurs > Profils

Comme ça : https://i.imgur.com/DneWS4I.png

On va devoir créer un nouveau champ de profil personnalisé.

Il faut s'assurer des éléments suivants :
- Le Type doit être : Zone de texte
- Le Nom doit être : Badges obtenus
- L'affichage doit être sur le profil et/ou sur les messages selon où vous voulez les badges.
- On doit afficher ce champ pour les Invités.

Le reste est libre.

Comme ça : https://i.imgur.com/59dkhEa.png

Chaque fois qu'un membre obtiendra un badge, il (ou le modo) devra aller l'ajouter dans ce champ sur leur profil.
Les différents badges doivent être séparés par des points virgules ( ; ).

Ainsi on peut avoir comme contenu pour un membre qui a les badge_2 et badge_3 :
Code:
badge_2; badge_3


Si j'avais personnalisé le nom de mes badges dans le HTML, je pourrais avoir par exemple :
Code:
badge1; badge2; concoursgagné; dernière-place; FouDuRoi; TCF_est_meilleur_que_LCF; badge5


Je mets simplement des noms qui sont plus parlants (^-^)




3. Javascript pour les badges sur le profil



Le javascript affiche en bas du profil les badges avec ceux qu'on a, ceux qu'on a pas :)
Le champ de profil qui contient le nom des badges est masqué, donc les membres ne voient même pas qu'il existe (^-^)

On va dans :
> Panneau d'affichage > Modules > HTML et Javascript > Gestion des codes javascript

Si ce n'est pas déjà fait, on va mettre "Oui" à "Activer la gestion des codes Javascript".

Puis, on crée un nouveau javascript. Il faudra mettre le placement "Sur toutes les pages".

Voilà le script :
Code:
/*
 * SYSTEME DE BADGE
 * LIBRE SERVICE NEVER UTOPIA
 */

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
 
  var idPage = "2"; /* numéro de la page HTML */
 
  $.get("/h" + idPage + "-", function (data) {
    /* on récupère le bloc des badges */
    var $badges = $(data).filter("#badges-profil");
 
    /* on attend que notre page soit prête */
    $(function () {
      /* on récupère le champ des badges obtenus */
      var $profilBadges = $("span:contains('Badges obtenus')").closest("[id^=field_id]");
   
      if ($profilBadges.length > 0) {
        /* selection des badges obtenus du membre */
        var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");
     
        if (badgesUser.length > 0) {
          /* pour chaque badge, on ajoute la classe si besoin */
          for (var i = 0, l = badgesUser.length; i < l; i++) {
            if (badgesUser[i].length > 0) {
              try {
                $badges.find("." + badgesUser[i].trim()).addClass("obtenu");
              } catch (e){
                console.log("Système de badge erreur => " + e);
              }
            }
          }
     
          /* si la personne ne peut pas éditer le champ,
          * on le retire la zone */
          if ($profilBadges.find(".field_editable").length < 1) {
            $profilBadges.remove();
          }
        }
      }
   
      /* on ajoute le bloc en fin de page */
      $("#page-body").after($badges);
 
    });
  })
}


N'oubliez pas de regarder le numéro de votre page HTML qu'on a créé plus tôt et de remplacer le 2 par ce numéro de page à cet endroit :
Code:
var idPage = "2"; /* numéro de la page HTML */


Pour trouver le numéro de votre page HTML, c'est par là :
Tag html sur Never Utopia - graphisme, codage et game design J0RCoJi

Petite précision, si le membre peut éditer le champ "Badges obtenus", le champ ne disparaîtra, pour qu'il puisse encore le changer directement en passant par la modification rapide. Par contre si c'est un simple membre qui n'a pas les autorisations pour cela, la ligne sera enlevée :)

Et voilà, vous avez des badges en bas de votre profil !

Le combat contre la publicité:





3.1 Mettre les badges ailleurs



Si vous utilisez un Profil Simple, vous avez l'option de modifier le template "profile_view_body" pour mettre les badges ailleurs dans la page. Cette option est impossible pour le Profil Avancé puisque le template n'y est pas accessible.

Pour savoir si vous avez le profil simple ou avancé, on va aller voir à cet endroit :
> Panneau d'administration > Utilisateurs et Groupes > Utilisateurs > Profils > Options générales
Tag html sur Never Utopia - graphisme, codage et game design N6QrjUy

Si le "Activer le profil avancé" est à "Oui", vous avez un Profil Avancé. S'il est à "Non", vous avez le Profil Simple.

Bref, continuons.

Pour mettre les badges ailleurs dans la page du profil, on va dans :
> Panneau d'affichage > Affichage > Templates > Profil > profile_view_body

Puis on va ajouter ce bout de code là où on veut que nos badges apparaissent dans le template :
Code:
<div class="js-badges-profil"></div>



Enfin, on va retourner dans le javascript, puis on va remplacer ce petit bout de code :
Code:
$("#page-body").after($badges);


Par cela :
Code:
$(".js-badges-profil").html($badges);


Voilà (^-^)




4. Javascript pour les badges dans les sujets



Le javascript se servira du champ des badges pour identifier les badges obtenus et le champ sera remplacé par ces badges. Les badges non-obtenus ne seront pas affichés.

C'est aussi possible de mettre les badges obtenus ailleurs, comme au bas du profil, en haut du message, dans la signature, etc.

Pour cela, on va dans :
> Panneau d'affichage > Modules > HTML et Javascript > Gestion des codes javascript

Si ce n'est pas déjà fait, on va mettre "Oui" à "Activer la gestion des codes Javascript".

Puis, on crée un nouveau javascript. Il faudra mettre le placement "Sur les sujets".

Voilà le script :
Code:
/*
 * SYSTEME DE BADGE SUR LES SUJETS
 * LIBRE SERVICE NEVER UTOPIA
 */

var idPage = "2"; /* numéro de la page HTML */

/* on va sur la page html */
$.get("/h" + idPage + "-", function (data) {
  /* on récupère le bloc des badges dans la page html*/
  var $badges = $(data).filter("#badges-profil");

  /* on attend que notre page soit prête */
  $(function() {
 
    /*pour chaque message*/
    $('tr.post').each(function(){
 
      /* on récupère la zone badge du profil */
      var $profilBadges = $(this).find(".profil-label:contains('Badges'):first");
 
      /*on regarde si la personne a des badges*/
      if ($profilBadges.length > 0) {
   
        /* selection des badges du membre */
        var badgesUser = $profilBadges.next().text().split(";");
   
        /* pour chaque badge dans le champ... */
        $profilBadges.next().html('');
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
             
              /* on copie le badge */
              var lebadge = $badges.find("." + badgesUser[i].trim()).clone(true);
              /* on donne la bonne classe et on l'ajoute sur la page */
              $profilBadges.next().append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      }
    }); 
  });
})


Encore une fois, n'oubliez pas de regarder le numéro de votre page HTML qu'on a créé plus tôt et de remplacer le 2 par ce numéro de page à cet endroit :
Code:
var idPage = "2"; /* numéro de la page HTML */



Pour faire fonctionner ce script, on doit modifier un peu le template "viewtopic_body". Pourquoi? Eh bien, pour que le javascript soit en mesure de trouver le bon champ, on doit leur donner une identité qui nous permettre de les retrouver facilement (^-^)

On va aller dans :
> Panneau d'affichage > Affichage > Templates > Général > viewtopic_body

On va trouver ceci :
Code:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}


Qu'on va remplacer par cela :
Code:
<span class="profil-label">{postrow.displayed.profile_field.LABEL}</span> <span class="profil-champ">{postrow.displayed.profile_field.CONTENT}</span>


Voilà, vos badges obtenus s'afficheront dans le profil des messages !

PS : N'oubliez pas de valider le template Wink


4.1 Mettre les badges ailleurs dans la page



Si vous voulez que les badges soient ailleurs dans le profil ou dans la signature ou ailleurs, on va devoir faire quelques modifications.

Tout d'abord, on doit remplacer ceci dans le javascript :
Code:
/* on donne la bonne classe et on l'ajoute sur la page */
              $profilBadges.next().append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      }
    }); 
  });
})


Par cela :
Code:
/* on donne la bonne classe et on l'ajoute sur la page */
              $(this).find('.js-badges-profil').append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
        /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
        $profilBadges.next().andSelf().remove();
      }
    }); 
  });
})



Puis on va dans le template "viewtopic_body" et vous ajoutez ceci là où vous voulez que les badges apparaissent :
Code:
<div class="js-badges-profil"></div>


Et voilà le travail (^-^)




5. Mise en forme



Les badges ne sont pas nécessairement super jolis pour le moment. Il faut aussi distinguer les badges obtenus des non-obtenus. Alors on va les mettre en forme !

On va dans :
> Panneau d'affichage > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

On va venir y mettre ce CSS :
Code:
/* BADGES DANS LE PROFIL */
/*Badges*/
#badges-profil .badge, .js-badges-profil .badge {
  display: inline-block;
  margin: 5px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
/*Badges obtenus*/
#badges-profil .obtenu, .js-badges-profil .obtenu {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}
/* Style bloc badges*/
#badges-profil, .js-badges-profil {
  border: 2px solid #eed02d;
  background: rgba(255,255,117,0.75);
  margin: 2px 2px 25px;
  text-align: center;
}
/*Titre bloc badges*/
#badges-profil:before, .js-badges-profil:before {
  content: "Badges obtenus";
  display: block;
  background: linear-gradient(#ffff75, #FFc400);
  border-bottom: 1px solid goldenrod;
  color: #20305e;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px;
}

/* BADGES DANS LES MESSAGES */
/*Badges*/
.post .badge {
  display: inline-block;
  margin: 2px;
  vertical-align: middle;
}


Je ne l'explique pas, les titres parlent déjà d'eux-mêmes (^-^)






C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Monomer

Switcheroo v1.2.0 - Gestionnaire de multicomptes - Dim 17 Jan 2021 - 6:43



Introduction


Bonjour à tous !

J'en conviens que le LS que je propose aujourd'hui n'est pas très conventionnel, mais j'espère tout de même qu'il vous sera tout aussi utile qu'à vos membres. Il y a un peu plus d'une semaine déjà, j'écrivais un sujet ici pour teaser le plugin sur lequel je travaillais. Il est maintenant terminé et je ne suis pas peu fier d'enfin pouvoir le partager !
Switcheroo est un plugin inspiré par le visuel de Discord qui vous permet d'enregistrer tous vos comptes d'un même forum sur une barre latérale et d'en changer au besoin, d'un simple clique. Il fonctionne sur toutes les versions (en théorie) et ne demande que très peu de manœuvres pour être installé. Vous pouvez trouver ici un forum d'exemple sur lequel il est installé : les identifiants de deux comptes invité sont fournis sur la page d'accueil pour les curieux.


Si vous êtes intéressés, je vous invite à lire la suite pour savoir comment Switcheroo fonctionne et comment l'installer sur vos forums !


Prérequis


Switcheroo nécessite quelques modifications de votre part avant d'être installer et je vais expliquer comment tout bien préparer :

  1. Tout d'abord, il vous faudra autoriser les formulaires non-officiel à poster leurs données sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et suivez ce chemin Général > Forum > Sécurité. Il faudra décocher l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" et sauvegarder les changements (image). Cette modification permettra au formulaire de Switcheroo de fonctionner avec Fetch, une API de Javascript.
  2. Ensuite, vous devrez vous assurez que la Toolbar de ForumActif est activée. Si ce n'est pas le cas, faites-le en suivant ce chemin : Module > Toolbar > Configuration (image). Si elle était désactivée parce que vous ne l'utilisiez pas, je proposerai plus bas une façon de la rendre invisible, ne vous en faites pas. Cette modification nous permettra de récupérer facilement l'ID d'un membre ainsi que son avatar et de savoir s'il est connecté ou non.
  3. En dernier, la barre de navigation principale de votre forum (celle qui permet de faire une recherche, de se connecter, de s'inscrire et de se déconnecter) devra être présente quelque part sur toutes les pages. Si vous l'avez retiré de vos templates, assurez-vous de l'ajouter quelque part, dans un <div> quelconque et de la cacher avec un style="display: none;". C'est avec cette barre que nous récupérons l'ID temporaire de votre session, qui permettra de changer de compte instantanément.


Installation


Le plugin en lui-même est très simple à installer. Il comprend deux fichiers Javascript hébergés sur dropbox – ce qui me permettra de pouvoir patcher directement les scripts en cas de besoin. Le premier, monomer_core.js, est un outil où je centralise toutes les fonctions utilitaires dont je me sers. Notamment, c'est grâce à ce script que le formulaire de connexion du plugin est appelé en popup. Le deuxième fichier, c'est le plugin : switcheroo.js.

Voici le code qui permet de tout mettre en place d'un seul coup :
Code:
<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>

<script>
(function() {
      new Switcheroo('#switcheroo');
})();
</script>

Il faudra ajouter ce code à la fin de votre template "Fin du bas de page" : Template > Général > overall_footer_end, juste avant la fermeture de </body>. Comme ceci :
Et juste avec ça, le plugin est installé et fonctionnel... bien que tout moche et écrasé dans le bas de votre forum. En même temps c'est normal, il nous manque le CSS pour que tout soit beau. Mais pour l'instant, concentrons-nous sur les options disponibles.


Options


Switcheroo vient avec quelques options qu'il vous est possible de modifier facilement. Elles doivent être ajouter à l'initialisation du plugin pour fonctionner. Celles ci-dessous sont lest options par défaut.
Code:
(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
        updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
        customButtons: [], /* boutons personnalisés, explication plus bas */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();


Pour vous donner l'exemple du forum test qui permet d'afficher un logo vers l'accueil, j'ai ajouter une image à l'option "logo" :
Code:
<script>
(function() {

    new Switcheroo('#switcheroo', {
        logo: '<img src="https://i.imgur.com/C01GNxF.png" />'
    });

})();
</script>


Boutons Customisés


Explication des custom-buttons:



Apparence


Pour ce qui est du CSS maintenant, vous devez l'installer sur votre forum dans sa totalité. Il est complet et vient avec quelques variables pour vous permettre de modifier les couleurs facilement. Celles par défaut vous donneront le même visuel que celui présenté tout en haut de ce sujet (ou sur le forum d'exemple) :
CSS:

Pour ce qui est de personnaliser le reste, faites-le à vos risques et périls (surtout si vous ne connaissez pas flexbox, héhé) !
Sachez également que ce CSS fonctionne, en théorie, sur toutes les versions de forumactif, mais il n'est pas impossible de rencontrer quelques problèmes de compatibilité qui écraseraient l'apparence de certains éléments. Si c'est le cas, n'hésitez pas à venir chercher de l'aide ici !


Variantes visuelles


Le CSS vient également avec certaines variantes qui vous permettent, par exemple, de changer l'orientation de la barre (verticale ou horizontale), sa position et son comportement.
Si nous reprenons le HTML installé dans le template "Fin du bas de page" : Template > Général > overall_footer_end, vous remarquerez sans doute certaines valeurs :
Code:
<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

  • id="switcheroo" Il s'agit de l'identifiant de la balise, qui permet entre autres au JS de fonctionner.
  • class="switcheroo" La classe sert surtout pour le style général de la barre. Je vous déconseille de la changer sans également modifier le CSS.
  • theme="discord" Une option qui permettra, éventuellement, de changer le thème de switcheroo (lorsque j'en aurai ajouté d'autres). Pour l'instant, "discord" est le seul présent et celui à utiliser par défaut.
  • direction="vertical" Permet de changer la direction de la barre, soit "vertical" (par défaut, voir l'exemple plus haut) ou "horizontal".
  • position="top" Après révision (et en écrivant ces lignes), je réalise que cette fonction n'était pas très bien réfléchie. Pour l'instant, n'y touchez pas.


Masquer la toolbar moche


Comme promis, ce petit bout de CSS vous débarrassera de la toolbar sans la désactiver, permettant ainsi au plugin de fonctionner incognito. Si jamais elle a ajouté un espace indésirable en haut de votre forum, assurez-vous qu'elle ne soit pas fixée à l'écran : comme ceci.
Code:
#fa_toolbar, #fa_toolbar_hidden {
    display: none!important;
}



Conclusion


Voilà. Je pense que c'est tout bon. Si jamais vous avez des questions ou des suggestions pour améliorer ce petit plugin, n'hésitez pas à m'en faire part ! Je suis ouvert à publier des mises à jour et ajouter de nouvelles fonctionnalités si j'en vois l'utilité. Je travaille déjà sur une deuxième version qui devrait ajouter quelques fonctionnalités sympathiques et j'ai d'autres idées potentielles sur lesquelles j'hésite encore. Et qui sait, si vous les proposez vous-même, peut-être que j'y réfléchirai plus sérieusement.

Si vous rencontrez un problème lors de l'installation, quoique ce soit, n'hésitez pas à venir me le dire et je m'empresserai de vous aider !

Et, sur ce... enjoyez bien. ♥

FAQ



Sécurité


Pour reprendre ce que j'ai expliqué à 'Christa, je ne suis clairement pas un expert sur le sujet, mais voici comment est abordée la sécurité de Switcheroo :
  • Les identifiants sont enregistrés en LocalStorage (un peu comme les sessions sont enregistrés par FA quand vous cochez "se souvenir de moi" en vous connectant sur un forum).
  • Ces données sont encryptées, au-moins pour les protéger s'il y a plusieurs membres d'une même famille qui sont sur un forum (auquel cas, ils peuvent quand même se servir du plugin s'ils sont d'accord, mais n'auront pas accès aux mots de passe directement, même en allant fouiller l'inspecteur).
  • L'utilisation de scripts par les membres d'un forum étant limitée, ils ne peuvent accéder qu'à leurs identifiants même en utilisant la console.
  • Un administrateur mal intentionné, Switcheroo ou non, pourrait très bien récupérer les identifiants de ses membres avec n'importe quel script JS actif sur n'importe quel formulaire de connexion (ou même changer leurs mot de passe dans son panneau d'administration), donc ce côté là ne change pas.
  • Switcheroo ne stocke aucunes informations sur une base de données externe.


Changelog



Version 1.1.0


  • Une nouvelle option customButtons permet d'ajouter d'autres boutons à la barre.
  • L'option updateAvatar (activée par défaut) permet de rafraîchir l'avatar du compte connecté au clique droit de la souris.
  • L'option enableReorder (activée par défaut) permet de changer l'ordre des comptes enregistrés (drag & drop support).

Version 1.0.1


  • Amélioration du visuel et ajout d'un mode horizontal. Mise place des thèmes.

Fiche de Partenariat - Bataille médiévale, tons marrons - Sam 2 Mai 2020 - 22:22

Fiche de Partenariat - Bataille médiévale, tons marrons



Bonsoir ! Je propose mon premier (il me semble) code en LS sur NU. J'espère qu'il ne comporte pas trop des fautes :)
C'est, comme le titre l'indique, une fiche de partenariat. C'est une fiche qui comporte du CSS, il faut donc soit avoir accès à la fiche de CSS du site où vous souhaitez l'héberger, soit avoir un forum où héberger la fiche en entier.
Vous pouvez voir ici le rendu de la fiche, des animations sont présentes sur les cases "Liens" et les cases "Pseudo".
> https://dame-nature-revenge.1fr1.net/h13-epic
Images :


Les couleurs, images, typographies, etc sont évidemment modifiables. L'image du haut fait 450px de large et les images du staff sont en 100x100 pixels. Et bien sûr, ne retirez pas mon copyright, merci. Voilà le code :

Code:
.a {
    color:#F4F3F3;
    text-decoration : none;
    }
   
    .fond_fiche{
    position : relative;
  height: 625px;
    width: 450px;
    background-color: #929180;
    }
   
    .banniere_nomdufo {
    position : absolute;
    top: -5px;
    height: auto;
    width: 450px;
    background-color:#A9A794 ;
    }
   
    .nomdufo{
    font-family: 'Cinzel', serif;
    color: #F4F3F3;
    font-size: 25px;
    padding-top:3px;
    font-weight : bold;
    text-align: center;
    letter-spacing : 1px;
    }
   
    .bloc_contexte{
    position : absolute;
    top : 45px;
    left: 10px;
    height:235px;
    width:260px;
    border-right: 1px solid #A9A794;
    }
   
    .contenu_contexte{
    position : absolute;
    top: 5px;
    left: 0px;
    height:  225px;
    width: 250px;
    overflow : auto;
    }
   
    .texte{
    font-family: 'Red Hat Display', sans-serif;
    font-size: 11px;
  color: #000000;
    text-align: justify;
    }
   
    .bloc_liens{
    position : absolute;
    right : 10px;
    width :150px;
    height: 25px;
    background-color:#A9A794;
    transition-duration : 1.5s;
    }
   
    .bloc_liens:hover{
    width : 135px;
    transition-duration : 1;5s;
    }
   
    .liensdufo{
    font-family: 'Cizel', serif;
    color: #F4F3F3;
    font-size: 20px;
    text-align :center;
    font-variant : small-caps;
    letter-spacing : 2px;
    transition-duration : 2s;
    }
   
    .liensdufo:hover{
    letter-spacing : 0px;
    transition-duration : 2s;
    }
   
    .banniere_messages_membres {
  position : absolute;
    top : 295px;
    height: auto;
    width: 450px;
    background-color:#A9A794 ;
    text-align: center;
    }
   
    .messages_membres{
    font-family: 'Red Hat Display', sans-serif;
    color: #F4F3F3;
    font-size: 20px;
    font-variant:small-caps;
   
    }
   
    .soustitre_staff {
    position : absolute;
    left : 90px;
    top : 332px;
    color: #F4F3F3;
    font-family :'Cinzel', serif;
    font-size : 23px;
    font-weight : bold;
    }
   
    .image_staff{
    position :absolute;
    left : 20px;
    border : 3px solid #F4F3F3;
    border-radius : 60px;
    }
   
    .pseudostaff{
    position: absolute;
    left : 75px;
    height: 25px;
    width: 140px;
    background-color:#A9A794;
    transition-duration : 1s ;
    }
   
    .pseudostaff:hover{
    width:130px;
  transition-duration : 1s ;
    }
   
    .texte_pseudostaff{
    color: #F4F3F3;
    font-size: 18px;
    font-family :'Cinzel', serif;
    text-align: right;
    padding-right:4px;
    font-variant : small-caps;
    font-weight : bold;
    letter-spacing : 0.5px;
    }
   
    .texte_rangstaff{
    position :absolute;
    right: 250px;
    width : 95px;
    height : 50px;
    font-style :italic;
    font-weight : bold;
    font-size : 12px;
    font-family : 'Red Hat Display', sans-serif;
    color : #F4F3F3;
    text-align : right;
    padding-right : 3px;
    overflow : auto ;
    }
   
    .soustitre_infos{
    position : absolute;
    right: 75px;
    top:332px;
    color: #F4F3F3;
    font-family :'Cinzel', serif;
    font-size : 23px;
    font-weight : bold;
    }
   
    .bloc_infos{
    position : absolute;
    right : 10px;
    top : 364px;
    width : 205px;
    height : 235px;
    border-left: 1px solid #A9A794;
    }
   
    .contenu_infos{
    position : absolute;
    top: 5px;
    left: 10px;
    height:  225px;
    width: 190px;
    overflow : auto;
    }
   
    .credits{
    position : absolute;
    bottom: 5px;
    left :210px ;
    font-family: 'Calibri', sans-serif;
    font-size : 8px;
  color : #000000;
    }


Code:
<img src="https://pre00.deviantart.net/5c26/th/pre/f/2017/112/9/8/the_last_one_by_88grzes-db6preo.jpg"
          style="height:auto;width:450px;" />
       
        <div class="fond_fiche">
         
        <div class="banniere_nomdufo">
          <div class="nomdufo">
            <a class="a" href="#" target="_blank">
              NOM DU FORUM </a>
          </div>
        </div>
          <div class="bloc_contexte">
            <div class="contenu_contexte">
          <div class="texte">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           
          </div>
            </div>
          </div>
         
          <div class="bloc_liens" style="top:45px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">incipit</a> </div></div>
          <div class="bloc_liens" style="top:80px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">effectifs </a></div></div>
          <div class="bloc_liens" style="top:115px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">partenariats </a></div></div>
          <div class="bloc_liens" style="top:150px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">règlement </a></div></div>
          <div class="bloc_liens" style="top:185px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
            <div class="bloc_liens" style="top:220px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
            <div class="bloc_liens" style="top:255px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
         
            <div class="banniere_messages_membres">
          <span class="messages_membres">
            xx membres - xx messages
              </span></div>
       
          <div class="soustitre_staff"> Staff </div>
             
                      <div class="pseudostaff" style="top: 372px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudo </a>
                        </div>
                </div>
         
          <div class="texte_rangstaff" style="top : 398px;"> fondateur
           
          </div>
         
  <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/cheval10.jpg');
    height:70px; width:70px;top : 364px;"></div>
 
            <div class="pseudostaff" style="top: 452px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudolong </a>
                    </div>
                </div>

          <div class="texte_rangstaff" style="top : 478px;"> administrateur & codeur
          </div>
         
  <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/arbre_10.jpg');
    height:70px; width:70px;top : 444px;"></div>
         
            <div class="pseudostaff" style="top: 532px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudo </a>
                    </div>
                </div>
         
          <div class="texte_rangstaff" style="top : 558px;"> moderateur
          </div>

<div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/lance_10.jpg');
    height:70px; width:70px;top : 524px;"></div>
         
         
          <div class="soustitre_infos" style=" margin : 0px; "> Infos </div>
         
          <div class="bloc_infos">
            <div class="contenu_infos">
            <div class="texte">
              :arrow_forward: une première information importante sur ton forum : sa date de création ? une particularité ?
              un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
              récente ? <br /><br />
              :arrow_forward: une deuxième information importante sur ton forum : sa date de création ? une particularité ?
              un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
              récente ? <br /><br />
      :arrow_forward: autre chose ?
             
              </div>
            </div>
            </div>
         
          <div class="credits">@Clém20</div>
         
          </div>

Et les deux typographies utilisées :
Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap" rel="stylesheet">


Je vais apporter quelques précisions pour ceux qui seraient novices en codage et/ou ceux que cela intéresse :
Précisions:

RozenBreizh

Fiche de présentation compacte - Jeu 30 Avr 2020 - 18:39


Fiche de présentation compacte


Hellooow,

Voici un LS pour une fiche de présentation "compacte".

Aperçus de la fiche:



Codes pour les fondateurs et Administrateurs, HTML et CSS divisés :

Partie HTML dans le message :


Code:
<div class="blocprez"><div class="blochaut"><img class="IMGprez" src="https://i.servimg.com/u/f51/18/81/56/20/imgpre11.jpg" /><div class="infosprez"><div class="carreprez"><span><!---->NATIONALITE ICI<!----></span><span><!---->AGE ICI<!----></span><span><!---->GENRE ICI<!----></span><span><!---->DATE D'ARRIVEE ICI<!----></span><span><!---->FACTION ICI<!----></span><span><!---->FONCTION ICI<!----></span></div><div class="blocphobie"><span>Phobies et Peurs</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div></div></div><div class="pseudoperso">Prénom&Nom ou Pseudo du personnage</div><div class="blocmilieu"><div class="blocpower"><span>Pouvoir Inutile</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div><div class="blocIB"><span>Infos Bonus</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div><div class="blocpsyphy"><div class="blocpsy"><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span></div><div class="bloctaille"><!---->TAILLE ICI<!----></div><div class="blocorpu"><!---->CORPULENCE ICI<!----></div><div class="bloctiff"><!---->CHEVEUX ICI<!----></div><div class="blocSD"><span>Signe Distinctif</span><!---->ECRIRE ENTRE LES BALISES<!----></div></div><div class="blocsouvenirs"><span>Mes Souvenirs</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div></div><div class="pseudojoueur">Pseudo du joueur</div><div class="blocbas"><div class="infosjoueur"><span>Comment as-tu découvert le forum ?</span></div></div></div>


Partie CSS dans la feuille de style :

Code:
/** Fiche de présentation du personnage **/
.blocprez {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
background:url("https://i.servimg.com/u/f90/17/48/87/58/fondca12.png") rgba(69,68,68,0.75);
border-top: 2px solid #fcae19;
border-bottom: 2px solid #fcae19;
color: #DEDEDE;}

.blochaut {
  display: flex;
background-color: rgba(78,5,5,0.15);
width: 100%;
height: 150px; }

.IMGprez {
position: relative;
margin: 0 5px 0 0;
width: 125px;
height: 125px;
top: 10px;
left: 20px;
border: 10px solid transparent;
outline: 1px solid #e59b0d;}

.infosprez {
  display: flex;
  position: relative;
  width: 75%;
  height: 125px;
top: 10px;
left: 20px;}

.carreprez {
  position: relative;
  width: 42%;
  height: 115px;
  margin: 0 3px 0 0;
top: 5px;
left: 5px;
padding: 2px;}

.carreprez span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
text-align: center;}

.blocphobie {
  background: linear-gradient(328deg, rgba(35,34,34,1) 50%, rgba(53,53,53,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
  border: 1px solid #484747;
  position: relative;
  width: 55%;
  height: 115px;
top: 5px;
left: 5px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocphobie span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocphobie p {text-align: justify; font-size: 12px;}

.pseudoperso {
position: relative;
width: 85%;
height: 25px;
top: 0px;
left: 100px;
font-family: 'Special Elite', verdana;
color: #fcae19;
text-shadow: 0 1px 2px black;
font-size: 30px;}

.blocmilieu{
width: 100%;
height: 380px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: space-between;}

.blocpower {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 38%;
height: 115px;
top: 5px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocpower span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocpower p {text-align: justify; font-size: 12px;}

.blocIB {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 55%;
height: 115px;
top: 5px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocIB span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocIB p {text-align: justify; font-size: 12px;}

.blocpsyphy {
  display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
position: relative;
width: 38%;
height: 255px;
top: 15px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocpsy {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
height: 75px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.quali { display: inline-block; background: #11927c; line-height: 1.5;
text-align: center;margin: 2px;
padding: 2px 3px;}

.defo { display: inline-block; background: #8b1919;line-height: 1.5;
text-align: center; margin: 1px;
padding: 2px 3px;}

.bloctaille {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
line-height: 1.5;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocorpu {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
line-height: 1.5;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.bloctiff{
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
line-height: 1.5;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocSD{
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 70px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocSD span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocsouvenirs {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 55%;
 height: 255px;
top: 15px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocsouvenirs span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocsouvenirs p {text-align: justify; font-size: 12px;}

.pseudojoueur {
position: relative;
width: 90%;
height: 25px;
top: 20px;
left: 20px;
font-family: 'Special Elite', verdana;
text-shadow: 0 1px 2px black;
font-size: 25px;
color: #DEDEDE;}

.blocbas{
background-color: rgba(78,5,5,0.15);
width: 100%;
height: 65px; }

.infosjoueur {
margin: auto;
position: relative;
width: 90%;
height: 45px;
top: 20px;
left: 20px; }

.infosjoueur span { font-weight: bold;}
/**Fin fiche de présentation du personnage **/


Code de la police "Special Elite" :


Code a mettre dans le template overall_header entre les balises < head >< /head > (sans les espaces dans le template ^^) :

Code:
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">



Codes pour les membres, HTML et CSS ensemble dans le message :


Code:
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<style>.blocprez{display:flex;flex-direction:column;justify-content:space-between;width:100%;background:url(https://i.servimg.com/u/f90/17/48/87/58/fondca12.png) rgba(69,68,68,0.75);border-top:2px solid #fcae19;border-bottom:2px solid #fcae19;color:#DEDEDE}.blochaut{display:flex;background-color:rgba(78,5,5,0.15);width:100%;height:150px}.IMGprez{position:relative;margin:0 5px 0 0;width:125px;height:125px;top:10px;left:20px;border:10px solid transparent;outline:1px solid #e59b0d}.infosprez{display:flex;position:relative;width:75%;height:125px;top:10px;left:20px}.carreprez{position:relative;width:42%;height:115px;margin:0 3px 0 0;top:5px;left:5px;padding:2px}.carreprez span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;text-align:center}.blocphobie{background:linear-gradient(328deg,rgba(35,34,34,1) 50%,rgba(53,53,53,1) 100%);border:1px solid #484747;position:relative;width:55%;height:115px;top:5px;left:5px;padding:2px;overflow:auto;scrollbar-width:thin}.blocphobie span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocphobie p{text-align:justify;font-size:12px}.pseudoperso{position:relative;width:85%;height:25px;top:0;left:100px;font-family:'Special Elite',verdana;color:#fcae19;text-shadow:0 1px 2px #000;font-size:30px}.blocmilieu{width:100%;height:380px;display:flex;flex-flow:row wrap;align-content:flex-start;justify-content:space-between}.blocpower{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:38%;height:115px;top:5px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocpower span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocpower p{text-align:justify;font-size:12px}.blocIB{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:55%;height:115px;top:5px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocIB span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocIB p{text-align:justify;font-size:12px}.blocpsyphy{display:flex;flex-direction:column;justify-content:space-between;margin:auto;position:relative;width:38%;height:255px;top:15px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocpsy{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:75px;top:0;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.quali{display:inline-block;background:#11927c;line-height:1.5;text-align:center;margin:2px;padding:2px 3px}.defo{display:inline-block;background:#8b1919;line-height:1.5;text-align:center;margin:1px;padding:2px 3px}.bloctaille{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;line-height:1.5;overflow:auto;scrollbar-width:thin}.blocorpu{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;overflow:auto;line-height:1.5;scrollbar-width:thin}.bloctiff{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;overflow:auto;line-height:1.5;scrollbar-width:thin}.blocSD{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:70px;top:0;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.blocSD span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:12px;text-transform:uppercase;font-weight:700;text-align:center}.blocsouvenirs{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:55%;height:255px;top:15px;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.blocsouvenirs span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocsouvenirs p{text-align:justify;font-size:12px}.pseudojoueur{position:relative;width:90%;height:25px;top:20px;left:20px;font-family:'Special Elite',verdana;text-shadow:0 1px 2px #000;font-size:25px;color:#DEDEDE}.blocbas{background-color:rgba(78,5,5,0.15);width:100%;height:65px}.infosjoueur{margin:auto;position:relative;width:90%;height:45px;top:20px;left:20px}.infosjoueur span{font-weight:700}</style>

<div class="blocprez"><div class="blochaut"><img class="IMGprez" src="https://i.servimg.com/u/f51/18/81/56/20/imgpre11.jpg" /><div class="infosprez"><div class="carreprez"><span><!---->NATIONALITE ICI<!----></span><span><!---->AGE ICI<!----></span><span><!---->GENRE ICI<!----></span><span><!---->DATE D'ARRIVEE ICI<!----></span><span><!---->FACTION ICI<!----></span><span><!---->FONCTION ICI<!----></span></div><div class="blocphobie"><span>Phobies et Peurs</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div></div></div><div class="pseudoperso">Prénom&Nom ou Pseudo du personnage</div><div class="blocmilieu"><div class="blocpower"><span>Pouvoir Inutile</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div><div class="blocIB"><span>Infos Bonus</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div><div class="blocpsyphy"><div class="blocpsy"><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span></div><div class="bloctaille"><!---->TAILLE ICI<!----></div><div class="blocorpu"><!---->CORPULENCE ICI<!----></div><div class="bloctiff"><!---->CHEVEUX ICI<!----></div><div class="blocSD"><span>Signe Distinctif</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div></div><div class="blocsouvenirs"><span>Mes Souvenirs</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p></div></div><div class="pseudojoueur">Pseudo du joueur</div><div class="blocbas"><div class="infosjoueur">[b]Comment as-tu découvert le forum ?[/b]
[b]Feat sur l'avatar :[/b]</div></div></div>

elfyqchan

Fiche RP - Cyberpunk - Dim 19 Avr 2020 - 11:46


Bonjour !

Je vous propose aujourd'hui un codage de fiche RP un peu futuriste inspiré de Cyberpunk, avec de jolis néons. J'espère qu'il fera quelques heureux !

Vous trouverez un aperçu ici : tadam.


L'image d'entête est de dimensions 400px par 150px.


Bien que le code soit en libre accès, n'hésitez pas à laisser un petit message sous celui-ci ! Wink

Code:
<link href="https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Quicksand&display=swap" rel="stylesheet"><style>.strct-cbrpnk{margin:auto;width:500px}.hdr-cbpnk{width:400px;height:150px;-moz-box-shadow:0 0 10px #D91AC0;-webkit-box-shadow:0 0 10px #D91AC0;box-shadow:0 0 15px #D91AC0}.ttl-cbrpnk{font-family:'Covered By Your Grace',cursive;color:#F0FE26;text-align:center;margin:50px;font-size:36px;text-shadow:0px 0px 8px #A3FDFD;line-height:30px}.bd-cbrpnk{text-align:justify;padding:30px;backdrop-filter:blur(3px);background-color:rgba(0, 0, 0, 0.4);color:white;font-size:13px;font-family:'Quicksand',sans-serif;-moz-box-shadow:0 0 10px #08BDA5;-webkit-box-shadow:0 0 10px #08BDA5;box-shadow:0 0 10px #08BDA5}.bckgrnd-cbpnk{padding:50px 50px 25px;background-image:url('https://i.servimg.com/u/f77/19/35/98/81/backgr10.jpg')} .dlg-cbpnk{margin: 20px 50px 0px; color:#F0FE26;} #crdts-cbpnk{text-align:center;margin:30px 0px 0px;color:#F0FE26;font-size:12px;font-variant:small-caps;text-shadow:0px 0px 4px #A3FDFD;font-family:'Quicksand',sans-serif}#NU-lnk-cbpnk{color:#F0FE26;text-decoration:none}</style><div class="strct-cbrpnk"><div class="bckgrnd-cbpnk"><img src="https://i.servimg.com/u/f77/19/35/98/81/sombra10.jpg" class="hdr-cbpnk"/><div class="ttl-cbrpnk">Cyberpunk</div><div class="bd-cbrpnk"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non faucibus nisl. Morbi suscipit viverra erat vel scelerisque. Ut ornare, est id egestas tempus, elit diam mollis magna, id malesuada turpis erat sed ex. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a libero ante. Vivamus a purus orci. Fusce vulputate nisi sit amet commodo convallis. Donec maximus mauris felis, quis cursus leo fringilla ac. Proin finibus lacus tortor, eu feugiat massa vulputate sit amet. Mauris varius velit tortor, quis vestibulum nisl lobortis sit amet. Nullam euismod ipsum sit amet mollis porttitor.
<div class="dlg-cbpnk">- Lorem ipsum dolor sit amet.</div>
Aliquam vel ipsum nulla. Mauris vestibulum risus a lacus sollicitudin molestie. Nullam leo sapien, tempus sit amet auctor consectetur, fermentum ultrices justo. Sed quam risus, gravida quis pretium consectetur, condimentum et metus. Pellentesque tempus diam in auctor sollicitudin. Cras condimentum augue id nulla sodales auctor. Quisque finibus mollis massa at feugiat. Fusce auctor tortor id sem scelerisque, quis dignissim nulla vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec in varius elit. Suspendisse potenti. Integer est odio, condimentum at erat sit amet, bibendum maximus purus. Fusce commodo mi nulla, sit amet congue nunc ultrices vitae. Fusce eros tortor, hendrerit id tortor eu, ullamcorper imperdiet lorem. Etiam erat mi, gravida ac massa eu, ultricies sollicitudin nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget porttitor nisl. Cras lacinia porta lectus, at elementum odio finibus sed. Nunc odio est, viverra fermentum arcu vitae, elementum finibus enim. Cras sed aliquet ligula, vitae laoreet leo. Proin dui tortor, vulputate in tellus sed, volutpat aliquam libero. Donec vehicula faucibus mauris in semper. Proin sodales nibh ac nibh posuere, ut pretium dui consequat. Praesent non nibh rutrum, condimentum mi eget, ultricies felis.

Cras auctor faucibus elit, ut placerat tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit ante nec ante sagittis lobortis. Vivamus sollicitudin vel orci dignissim vehicula. Curabitur posuere tellus a euismod accumsan. Curabitur vestibulum libero ac tortor gravida semper. Nulla maximus quis ante molestie aliquet. Morbi eget interdum diam, at fringilla elit.

Cras id leo commodo, ultrices velit sed, placerat ex. Nullam sit amet neque at dui rhoncus consectetur ut at dui. Mauris sed erat ut est rhoncus blandit. Etiam iaculis porta faucibus. Quisque augue sapien, ultrices nec congue ac, tristique et erat. Praesent vel consequat metus. Maecenas fermentum dui elit, non fringilla ex commodo sit amet.</div><div id="crdts-cbpnk">@elfyqchan - <a id="NU-lnk-cbpnk" href="https://www.never-utopia.com" target="_blank">Never Utopia</a></div></div></div>

Nasträlya

Signature ptits triangles - Ven 10 Avr 2020 - 21:09





Signature: les ptits triangles



Bonjour :friends:

Je vous propose une petite signature que j'ai faite exprès pour qu'elle passe sans iframe  :cow: (et que j'utilise actuellement sur mon forum :bwaha: )

Tag html sur Never Utopia - graphisme, codage et game design Screen40

Il suffit juste de mettre ce code dans la partie signature de votre profil:

Code:
<div style="background-color:transparent; width:363px; margin:auto; height:80px;"><!-- images 1--><img src="https://zupimages.net/up/20/15/770e.jpg" style="clip-path:polygon(50% 100%, 100% 0, 0 0); width:80px; height:80px; float:left;"/><!-- image 2--><img src="https://zupimages.net/up/20/15/11qm.jpg" style="clip-path:polygon(50% 0, 0 100%, 100% 100%); width:80px; height:80px; float:left; margin-left:-35px;"/><div style="background-color:transparent; width:150px; color:#585858; text-align:center; margin:auto; margin-left: 95px;padding:10px; position:absolute; font-size:12px;"><!-- votre citation -->"Si tu veux être un homme libre, laisse les autres te mépriser."</div><!-- image 3 --><img src="https://zupimages.net/up/20/15/co6t.jpg" style="clip-path:polygon(50% 100%, 100% 0, 0 0); width:80px; height:80px; float:right; margin-left:-35px;"/><!-- image 4 --><img src="https://zupimages.net/up/20/15/0elq.jpg" style="clip-path:polygon(50% 0, 0 100%, 100% 100%); width:80px; height:80px; float:right;"/></div>


les images sont en 80*80. Normalement, elles sont automatiquement redimensionnées.


Et voilà, tout simplement :ange:



Nasträlya

Planning/Calendrier numérique - Mer 8 Avr 2020 - 11:04





Planning/calendrier



Bonjour :friends:


Je vous propose un planning/calendrier plus immersif pour vos personnages, permettant de signifier les Rp en cours ou terminés :cow:

Voici à quoi cela ressemble:

Rendu:


Il suffit simplement de mettre le code dans votre post! Il est possible de changer toutes les couleurs et de rendre les jours pris plus ou moins grands (je vous ai cependant déjà fait 3 modèles: 1 jour, 2 jours et une semaine.)

Le code maintenant:

Code:
<style type="text/css">.cadrefont{background-color:#fff; width:700px; margin:auto; height:580px;} .cadresearch{background-color:#424242; width:700px; height:50px; padding-top:3px;} .cadreloupe{background-color:#585858; width:300px; height:25px; margin-left:10px; margin-top:10px; padding-top:5px; float:left;} .searchtop{font-familiy:arial; color:#a5a5a5; margin-left:5px;} .daycalend{float:right; width:100px; background-color:transparent; color:#a5a5a5; font-size:18px; margin-top:-36px;} .blocday{background-color: transparent; width:94px; border: 1px solid #a5a5a5; height: 94px; float:left; margin:2px;} .day{margin:10px; color:#a5a5a5;} .semainetop{background-color:transparent; width:700px; margin:-29px 0 -48px 4px;} .semaineL{background-color: transparent; width:100px; color:#a5a5a5; float:left;} .semaineM{background-color: transparent; width:100px; color:#a5a5a5; float:left;} .semaineMe{background-color: transparent; width:100px; color:#a5a5a5; float:left;} .semaineJ{background-color: transparent; width:100px; color:#a5a5a5; float:left;} .semaineV{background-color: transparent; width:101px; color:#a5a5a5; float:left;} .semaineS{background-color: transparent; width:100px; color:#a5a5a5; float:left;} .semaineD{background-color: transparent; width:60px; color:#a5a5a5; float:left;} .rprdv{background-color:#F7BE81; width:90px; border-radius:5px; padding:2px; text-align:center; font-size:10px; color:#2E2E2E; margin-bottom:2px;} .rptwoday{background-color:#A9D0F5; width:190px; border-radius:5px; padding:2px; text-align:center; font-size:10px; color:#2E2E2E; margin-bottom:2px; position:absolute;} .rpsemainesept{background-color:#A9F5BC; width:690px; border-radius:5px; padding:2px; text-align:center; font-size:10px; color:#2E2E2E; margin-bottom:2px; position:absolute;} </style>

<div class="cadrefont"><div class="cadresearch"><div class= "cadreloupe"><div class="searchtop"> Search |</div></div></div><div class="daycalend">Juin 5067</div>

<div class="semainetop"><div class="semaineL">Lundi</div><div class="semaineM">Mardi</div><div class="semaineMe">Mercredi</div><div class="semaineJ">Jeudi</div></div><div class="semaineV">Vendredi</div><div class="semaineS">Samedi</div><div class="semaineD">Dimanche</div>

<!--- semaine 1 ---><div class="blocday"><div class="day">1</div></div><div class="blocday"><div class="day">2</div><div class="rprdv"> <a href="URL ICI"> RDV médecin</a></div><div class="rptwoday"><a href="URL ICI">Chasse nocturne</a></div></div><div class="blocday"><div class="day">3</div></div><div class="blocday"><div class="day">4</div></div><div class="blocday"><div class="day">5</div></div><div class="blocday"><div class="day">6</div></div><div class="blocday"><div class="day">7</div></div>

<!--- semaine 2 ---><div class="blocday"><div class="day">8</div></div><div class="blocday"><div class="day">9</div></div><div class="blocday"><div class="day">10</div></div><div class="blocday"><div class="day">11</div></div><div class="blocday"><div class="day">12</div></div><div class="blocday"><div class="day">13</div></div><div class="blocday"><div class="day">14</div></div>


<!--- semaine 3 ---><div class="blocday"><div class="day">15</div></div><div class="blocday"><div class="day">16</div></div><div class="blocday"><div class="day">17</div></div><div class="blocday"><div class="day">18</div></div><div class="blocday"><div class="day">19</div></div><div class="blocday"><div class="day">20</div></div><div class="blocday"><div class="day">21</div></div>

<!--- semaine 4 ---><div class="blocday"><div class="day">22</div><div class="rpsemainesept"><a href="URL ICI">Base numéro 548 : recherche de survivants</a></div></div><div class="blocday"><div class="day">23</div></div><div class="blocday"><div class="day">24</div></div><div class="blocday"><div class="day">25</div></div><div class="blocday"><div class="day">26</div></div><div class="blocday"><div class="day">27</div></div><div class="blocday"><div class="day">28</div></div>


<!--- semaine 5 ---><div class="blocday"><div class="day">29</div></div><div class="blocday"><div class="day">30</div></div>

</div>


Pour dire que le rp est terminé, il suffit de mettre les balises strike entre <...> (il faut éviter de mélanger du BBcode avec du HTML, donc évitez les [...] )   :cowboy:


Voici maintenant les différents code pour les jours que vous souhaitez colorer:
1 jour:
Code:
<div class="rprdv"> <a href="URL ICI"> VOTRE RDV ICI</a></div>


2jours:
Code:
<div class="rptwoday"><a href="URL ICI">VOTRE TITRE ICI</a></div>


Une semaine:
Code:
<div class="rpsemainesept"><a href="URL ICI">VOTRE TITRE ICI</a></div>



Et voilà! Vous avez maintenant votre planning de fait pour votre personnage   :pompom:

Je n'ai pas mis de crédit, mais un petit merci ici fait toujours plaisir :hug:


Nasträlya

Réseau social type FB (Profil) - Mer 8 Avr 2020 - 10:57






Réseau social type FB



Bonjour :friends:


Je vous propose une page de profil de type réseau social afin d'un peu plus pousser la personnalisation de votre personnage ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

Voici à quoi elle ressemble:

Rendu:


Il suffit simplement de mettre ce code dans votre post:

Code:
 <style> .prayablock {margin:auto; width:700px; height:auto; background-color: #a5a5a5} .profilpraya { float: left; margin-top: -100px; position: relative; margin-left: 31px; border-radius: 50%; border: 3px solid #ffffff; } .barreblanche { background-color: #ffffff; height: 50px; margin-bottom: -21px; } .barrenav_praya { float: right; height: 30px; margin-top: 12px; padding-right: 33px; } .info_praya { background-color: #ffffff; float: left; height: auto; width: 200px; } .publi_praya {background-color:#ffffff; float: left; height:auto; width:478px; } .Idpraya { position: absolute; color: #ffffff; margin-left: 190px; margin-top: -27px; font-size: 20px; font-family: arial; } .Idpost { color: #a4cecc; font-size: 15px; font-family: arial; font-weight: bold; margin-top: 15px; margin-left: 63px; } .date_praya { color: #a5a5a5; margin-left: 62px; font-size: 12px; } .contenant_praya {color: #a5a5a5; font-size: 12px; font-family: arial; margin-top: -30px; float: right; display: flex; } .praya_tiret {padding-left:10px; padding-right:10px; color:#a4cecc;} .citapraya{background-color:transparent; width:200px; margin:auto; text-align:center;} .textcitapraya{color:#191919; font-size:12px; font-family:arial; padding:7px;} .separapraya{margin-left:50px;} .infointro{padding-left:7px;padding-bottom:8px;color:#191919;}    .infointro span{font-size:12px; color:#a5a5a5; padding-right:6px;} .infointro img{margin-right:6px;} .textinfo{padding-bottom:8px; padding-left:6px; float:right; color:#191919;}.etudeinfo{font-size:12px; color:#a5a5a5;float:left; padding-left:6px;} .imgecole{float:left;} .imgpost{border-radius:50%; float:left; padding-right:10px; padding-left:6px; padding-top:5px; width:40px; height:40px;} .fontpublipraya{ background-color:transparent; margin:auto; text-align:center;}.publipraya{color:#191919; font-size:12px; font-family:arial; padding:9px;} .fontjaime{background-color:transparent; float:left; width:200px;} .likepraya{color:#a5a5a5; font-size:14px; font-family:arial; float:left;    padding-left:5px; padding-top:2px;} .imglikepraya{margin-left:7px; margin-bottom:7px; margin-right:5px; float:left;} .nbrcom{color:#a5a5a5; font-size:14px; font-family:arial; float:right; padding-top: 2px; padding-right:7px;} .comentbarre{margin-bottom: 10px;} .fontinfopubli{background-color:transparent; width:700px; height:auto;} .copyright_oceen{background-color:transparent; margin:auto; text-align:center; color:#BDBDBD; font-size:10px; padding:5px;} .blocpublicationP{float:right; background-color:transparent; margin-top:-36px;} .intropad{padding:5px;}
</style>

<!-- le haut de page --><div class="prayablock"><img src="https://zupimages.net/up/20/06/p4qr.png"/>
<!-- l'url de l'image de couverture --><img src="https://zupimages.net/up/20/06/yljn.jpg" alt="image de couverture" /><!-- le nom et prenom --><div class="Idpraya">Lëan Vandorallen</div>
<!-- l'image de profil --><img src="https://zupimages.net/up/20/06/t80b.jpg" alt="image de profil" class="profilpraya"/><div class="barreblanche"><div class="barrenav_praya">

<!-- les liens --><div class="contenant_praya"><a href="URL ICI">Amis</a><div class="praya_tiret">|</div><a href="URL ICI">Photos</a><div class="praya_tiret"> |</div><a href="URL ICI">Plus ▼</a></div></div></div>

<!-- la colonne introduction --><div class = "info_praya"><img src="https://zupimages.net/up/20/06/o8cy.png" alt="symbole intro" class="intropad"/><div class="citapraya"><!-- le texte d'introduction --><div class="textcitapraya">"Si vous voulez dépasser les limites dans lesquelles la société vous cantonne, il faut vous battre."</div></div>
<div class="separapraya"><img src = "https://zupimages.net/up/20/06/43gq.png"/></div>
<div class="infointro"><img src="https://zupimages.net/up/20/06/cd5z.png"/><!-- le métier --> Ingénieur Robotique </div><div class="infointro"><img src="https://zupimages.net/up/20/06/5fcz.png"/><!-- le lieu d'habitation --> District 2 </div><div class="infointro"> <img src="https://zupimages.net/up/20/06/i96z.png"/><span>A étudié à:</span><!-- l'école où le personnage a étudié --> E.I.R du District 1</div> <div class="infointro"><img src="https://zupimages.net/up/20/06/gu3q.png"/><!-- Situation -->Célibataire </div></div>

<!-- profil et pseudo publication --><div class="blocpublicationP"><div class="publi_praya"><!-- url image de profil --><img src="https://zupimages.net/up/20/10/b7ak.jpg" alt="image de profil" class="imgpost"/><!-- nom prénom --><div class="Idpost">Tom Waller</div><!-- date publication --><div class="date_praya">2 Juin, 23:12</div>

<!--publication--><div class="fontpublipraya"><div class="publipraya"> C'est thème Cyborg à la Fleurette ! Ton cocktail t'attends :coktail:</div></div>

<!-- bas de la publication --><img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<div class="fontjaime"><img src = "https://zupimages.net/up/20/06/smvg.png" alt="like" class="imglikepraya"/><!-- nombre de likes --><div class="likepraya">32</div></div><!-- nombre de commentaires --><div class="nbrcom">10 commentaires</div>
<img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<img src="https://zupimages.net/up/20/06/9fy3.png" alt="barre commenter" class="comentbarre"/></div>
</div>

<div class="copyright_oceen">@Nasträlya</div></div>


L'image de couverture fait 700*300, tandis que les images de profils peuvent être mises en 136*136 :omg:

Si vous voulez changer la couleurs (le bleu très clair), il vous faudra changer tous les petits logos ainsi que la barre du haut. La barre du haut est donc aussi une image: c'était pour éviter du code inutile à mes membres, puisque je considère déjà que c'est un code assez long!   :han:


Le crédit est tout petit et d'une couleur sobre qui se fond avec le codage, c'est mon petit bébé vu que je débute en code, alors laissez le s'il vous plaît :lovebomb:



Nasträlya

(Poké)Ball Signature - Mer 8 Avr 2020 - 10:47





(Poké)Ball Signature



Bonjour :friends:


Je vous propose une signature façon ball ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

Voici à quoi elle ressemble:

Rendu:


Dans un premier temps, il faut une page HTML: Modules > Gestion des pages HTML > Création en mode avancé (HTML)

Vous y mettrez ceci:

Code:
<html>
     <head>
       <meta charset="utf-8" />
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}
       </style>
    </head>
<body>
  <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div>
<div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>
    </body>
</html>


Vous y mettez alors vos images en 150*150, votre citation et vous enregistrez!   :hehe:

Ensuite, il suffit de mettre l'iframe dans le profil, là où on met normalement la signature:

Code:
<center><iframe src="URL PAGE HTML" name="signa" scrolling="no" frameborder="no" align="center" height = "300px" width = "320px">
</iframe></center>


Le tour est joué, vous avez une (Poké)Ball Signature :pompom:

---

Dans le cas où vous n'auriez pas accès aux pages HTML et que vous voudriez essayer de la mettre directement dans votre profil, ce sera ce code-ci:

Code:
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}</style>

 <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div><div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>


Personnellement, elle m'apparaît trop longue pour être validée, mais ne connaissant pas les autres versions, voir même où vous souhaitez la mettre, cela peut, peut être, vous servir :bwaha:


elfyqchan

Fiche RP - Sinister Blade - Jeu 2 Avr 2020 - 13:44


Hello !

Je vous propose le codage d'une fiche de RP que j'ai réalisé il y a quelques années pour mon propre compte. Comme je ne m'en sers plus, j'ai décidé de le partager ! Le LS est évidemment modifiable, notamment pour les couleurs et les images ! En revanche, merci de ne pas retirer les crédits. Wink

L'aperçu est dispo ici !


Le fond gris clair/bleu visible ne fait pas partie du codage. Le fond de l'entête, hors images, est donc transparent. Le codage a été testé sous Chrome, Firefox et Opera GX.

Les trois images de l'entête sont de dimension 500px*90px


PS. Bien que le codage soit visible par tous, un petit merci fait toujours plaisir ! :hug:

Code:
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Jura:300|Architects+Daughter' rel='stylesheet' type='text/css'><style>.strct-snstr-bld{margin: auto; width: 500px;} .bd-snstr-bld{text-align: justify; padding: 30px; background-color: #232323; color: white; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300;} .bckgrnd-snstr-bld{background-color: #820909; padding: 50px 50px 75px;} .ttl-snstr-bld{margin: 20px auto; font-variant: small-caps; font-size: 34px; text-align: center; font-family: 'Jura', sans-serif; font-weight: 300; color: #232323;} .ft-ttl-snstr-bld{margin: 20px auto; font-size: 16px; text-align: center; font-family: 'Architects Daughter', cursive; line-height: 13px; color: #232323;} .dlg-snstr-bld{margin: 20px 50px 0px; color:#F17A60;} #crdts-snstr-bld{text-align: center; margin: 30px 0px -50px; color: white; font-size: 12px; font-variant: small-caps; font-family:Trebuchet MS, sans-serif;} #NU-lnk-snstr-bld{color: white; text-decoration: none;}</style><div class="strct-snstr-bld"><!-- IMAGES 500PX * 90PX--><img src="https://i.servimg.com/u/f77/19/35/98/81/kat110.jpg"/><div class="ttl-snstr-bld">The Sinister</div><img src="https://i.servimg.com/u/f77/19/35/98/81/kat210.jpg"/><div class="ttl-snstr-bld">Blade</div><img src="https://i.servimg.com/u/f77/19/35/98/81/kat310.jpg"/><div class="ft-ttl-snstr-bld">Feat.<br/>Machin, Bidule et truc</div><div class="bckgrnd-snstr-bld"><div class="bd-snstr-bld">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non faucibus nisl. Morbi suscipit viverra erat vel scelerisque. Ut ornare, est id egestas tempus, elit diam mollis magna, id malesuada turpis erat sed ex. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a libero ante. Vivamus a purus orci. Fusce vulputate nisi sit amet commodo convallis. Donec maximus mauris felis, quis cursus leo fringilla ac. Proin finibus lacus tortor, eu feugiat massa vulputate sit amet. Mauris varius velit tortor, quis vestibulum nisl lobortis sit amet. Nullam euismod ipsum sit amet mollis porttitor.
<div class="dlg-snstr-bld">- Lorem ipsum dolor sit amet</div>
Aliquam vel ipsum nulla. Mauris vestibulum risus a lacus sollicitudin molestie. Nullam leo sapien, tempus sit amet auctor consectetur, fermentum ultrices justo. Sed quam risus, gravida quis pretium consectetur, condimentum et metus. Pellentesque tempus diam in auctor sollicitudin. Cras condimentum augue id nulla sodales auctor. Quisque finibus mollis massa at feugiat. Fusce auctor tortor id sem scelerisque, quis dignissim nulla vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec in varius elit. Suspendisse potenti. Integer est odio, condimentum at erat sit amet, bibendum maximus purus. Fusce commodo mi nulla, sit amet congue nunc ultrices vitae. Fusce eros tortor, hendrerit id tortor eu, ullamcorper imperdiet lorem. Etiam erat mi, gravida ac massa eu, ultricies sollicitudin nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget porttitor nisl. Cras lacinia porta lectus, at elementum odio finibus sed. Nunc odio est, viverra fermentum arcu vitae, elementum finibus enim. Cras sed aliquet ligula, vitae laoreet leo. Proin dui tortor, vulputate in tellus sed, volutpat aliquam libero. Donec vehicula faucibus mauris in semper. Proin sodales nibh ac nibh posuere, ut pretium dui consequat. Praesent non nibh rutrum, condimentum mi eget, ultricies felis.

Cras auctor faucibus elit, ut placerat tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit ante nec ante sagittis lobortis. Vivamus sollicitudin vel orci dignissim vehicula. Curabitur posuere tellus a euismod accumsan. Curabitur vestibulum libero ac tortor gravida semper. Nulla maximus quis ante molestie aliquet. Morbi eget interdum diam, at fringilla elit.

Cras id leo commodo, ultrices velit sed, placerat ex. Nullam sit amet neque at dui rhoncus consectetur ut at dui. Mauris sed erat ut est rhoncus blandit. Etiam iaculis porta faucibus. Quisque augue sapien, ultrices nec congue ac, tristique et erat. Praesent vel consequat metus. Maecenas fermentum dui elit, non fringilla ex commodo sit amet.</div><div id="crdts-snstr-bld">@elfyqchan - <a id="NU-lnk-snstr-bld" href="https://www.never-utopia.com" target="_blank">Never Utopia</a></div></div></div>

Illeanëlia

Fiche RP simple avec image de fond - Sam 28 Mar 2020 - 10:54



Fiche RP simple avec image de fond



Voilà je propose une petite fiche rp assez simple

rendu:


Alors c'est un ls avec juste un corps HTML tout est modifiable bien sur ^^

Code:
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet"><div style="background-image: url('https://i.servimg.com/u/f94/19/77/99/78/8x6s9j11.jpg'); width: 550px; background-size: cover; border: solid 2px #e5e5e5; box-shadow: 2px 2px 10px #a0a0a0; border-top-left-radius: 10px; border-bottom-right-radius: 20px; margin: auto;">

<div style="width: 400px; text-align: center; font-family: 'Cinzel Decorative',cursive; font-size: 30px; font-weight: bold; letter-spacing: -1px; color: #55551F; padding: 15px 0px 3px 0px; text-shadow: 3px 3px 2px #57525F; margin: auto;">Titre de votre Rp</div><div style="width: 350px; color: white; font-size: 9px; text-transform: uppercase; text-align: center; font-family: helvetica, sans serif; margin: auto;">Petit mot doux qui est dit à l'oreille, de peu de chose fait merveille !</div><div style="padding: 0px; width: 450px; height: 200px; border: solid 3px #e5e5e5; box-shadow: 2px 2px 10px #a0a0a0; border-radius: 0px ; background-image: url('https://i.pinimg.com/originals/00/0b/68/000b68a9cf1c3616b3ba1648767ebd2b.gif'); -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); margin: auto;"></div>

<div style="width: 400px; font-family: ARIAL, sans serif; font-size: 11px; line-height: 12px; text-align: justify; background-color: transparent; padding: 10px 10px 10px 10px; color: #55551F; box-shadow: 2px 2px 10px #55551F; margin: auto; overflow: auto; font-weight: bold;">Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vica;rium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.

Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.</div>

<p style="text-align: center; font-weight: bold;"> n.1 | 434 mots
code (c) Luinilinëalia</p></div>

Un seul compte, plusieurs personnages : Choix déroulant (2 versions) - Dim 21 Avr 2019 - 16:46

Un seul compte, plusieurs personnages : Choix déroulant




Alors, le multicompte !

Okhmakala avait déjà pensé à cela et avait proposé une astuce juste ici.

Puis, j'ai découvert Esquisse où j'ai réalisé qu'il y avait un système très intéressant où les joueurs ajoutaient une toute petite ligne de code (différente pour chaque personnage) sur leurs messages RP. Ensuite, un javascript repérait cette merveilleuse ligne de code et modifiait le pseudo et l'avatar du joueur pour ceux du personnage dans ce message.

Je reprends ces deux idées et je vais un pas plus loin.


De ce que j'ai pu voir, les principales oppositions à l'idée de Okhmhaka étaient les suivantes :
- Il va falloir que je change des choses
- Oui, logique, un changement implique des changements. Si cela complique la vis des gens, cela passe très mal. Si cela leur facilite la vie, cela passe très bien. On va essayer d'être dans la deuxième catégorie ^^

- Le codage est trop compliqué pour certains de mes membres.
Plus maintenant ! La seule chose que votre membre aura besoin de faire, c'est de sélectionner son personnage, rien d'autre. Le membre n'a pas à toucher à une miette de code ^^

- Les gens doivent toujours copier/coller leur fiche rp, c'est frustrant.
Nope ! Les gens n'auront qu'à sélectionner leur personnage dans un choix déroulant et la magie s'opérera. Leur fiche rp personnalisée apparaîtra comme par magie et leur rp se met lui-même au bon endroit. Il ne reste plus qu'à poster ^^

- C'est louche... Ça fonctionne comment exactement?
Oui, oui, ça s'en vient XD Allez, je vous présente les deux versions.


Version 1


1. Choisir dans un menu déroulant le personnage souhaité lorsque vous postez votre RP.


Le javascript vous propose vos personnages dans un choix déroulant.
Voir un exemple de choix de personnages.

Une fois le choix fait, un petite ligne de code magique qui fait tout fonctionner s'ajoute à votre message.
Voir un exemple de ce qui ce passe une fois le choix fait.
Note : Cela ne fonctionne pas sur les réponses rapides. Il faut cliquer sur "Prévisualiser", puis choisir son personnage.
Note 2 : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

2. Avoir les informations du personnage choisi qui remplacent les vôtres


Dans les sujets où vous avez choisi un personnage avant de poster, vous verrez votre avatar, votre pseudo, la couleur de votre groupe, votre rang et votre image de rang seront remplacés par ceux du personnage.
Votre pseudo en tant que joueur sera déplacé ailleurs (en dessous du pseudo du personnage sur l'exemple), mais restera quand même là pour dire qui est le propriétaire de ce personnage.
Voir un exemple de plusieurs personnages.

3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
Voir un exemple.
Note : Sur l'exemple, on ne voit pas les champs "normaux" du joueur parce que je ne voulais pas les voir en même temps que les champs personnalisés. Je les ai cachés pour qu'ils apparaissent seulement au survol de l'avatar. Il y a un tas de LS sur ça, je vous laisse fouiller si ça vous intéresse.

4. Avoir 2 profils distincts si vous préférez cette option


Disons que, à la place d'avoir les informations sur personnage qui remplace celles du joueur, vous préférez avoir un profil joueur et un profil personnage, puis voir les 2 apparaître en même temps, c'est aussi une option qui vous sera proposée.
Si les instructions mentionnent "2 profils distincts", cela s'adresse à vous.
Voir un exemple.
Par contre, ce LS est uniquement pour faire fonctionner le système et mettre en forme la partie personnage. Pour la partie profil du joueur, c'est à vous de le faire, quitte à aller voir les autres LS de profil. Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka (qui est 100% compatible, je m'en suis assurée :ange:)

5. Modifier les données des personnages avec une Google Sheet


Vous pouvez utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.

6. Modifier les données des personnages directement dans le javascript


Disons que vous avez une haine profonde de Google Sheet et que vous voulez une autre option pour où mettre les données des personnages, cette option est pour vous.
L'information est enregistrée directement dans le javascript lui-même pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que seuls les Admins pourront le modifier.
Le désavantage, c'est que seuls les Admins pourront le modifier (dépendamment du nombre de membres et de modifications à faire, cela peut rapidement devenir ardu).
Si vous n'aimez pas utiliser Google Sheet ou des sites externes, c'est une solution comme une autre.


Version 2


Contrairement à la Version 1, il n'y a pas de ligne de code magique qui s'ajoute à votre message et les informations de votre personnage ne vont pas remplacer celles de votre profil.
Le principe de cette version, c'est qu'on veut voir la progression du personnage dans le temps.
Or, dans la Version 1, dès qu'on change une information dans la Google Sheet, les informations se modifient partout (bref, selon le même principe que les champs du profil FA habituels).

Par conséquent, voilà ce que cette version vous permettra de faire :

1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.


Bref, le javascript va regarder dans la base de données quels sont vos personnages et vous les propose.
Voir un exemple de choix de personnages.
Note : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

2. Mettre toutes les informations de votre personnage dans une feuille RP avant de poster


Lorsque vous choisissez un personnage, le javascript magique crée une feuille RP qui contient les informations de vos personnages et y glisse le message que vous venez d'écrire.
Voir un exemple de ce qui se passe quand on choisit un personnage.
Voir un exemple du résultat une fois le message posté.

3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires qui sont inclus dans la feuille rp et il est possible de personnaliser l'apparence de chacun des champs personnalisés, tel que vu dans l'exemple précédent (l'inventaire était différents des autres champs).

4. Apparence avec 2 profils


Dans vos messages normaux, vous verrez votre profil joueur et votre message.
Dans vos messages RP, vous verrez votre profil joueur, votre profil personnage et votre message.
C'est un tout inclus !
Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka.

5. Modifier les données des personnages avec une Google Sheet


Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.


Donc en gros


La Version 1 est plutôt pour ceux d'entre vous qui auraient des profils assez stables qui ne changent pas beaucoup. Ou, si les informations changent, il faut qu'elles changent partout sur le forum.
La mise en place se fait assez facilement et cela ne dérange pas du tout le codage de votre forum. Vous pourriez avoir un profil ou un message totalement codé et quand même installer ce système sans difficultés.

La Version 2 est plutôt pour ceux d'entre vous qui auraient des profils personnages dont les informations changeraient beaucoup et/ou qui préféreraient suivre la progression du personnage à travers le RP. Par exemple, s'il y a une barre d'expérience, une barre de vie, un inventaire, etc., cette version est plus pour vous.
La mise en place se met relativement facilement, mais je suggère que vous ayez quelques connaissances en codage pour mieux personnaliser la fiche de RP.

Dans les 2 cas, l'action à poser par le membre est extrêmement simple, il suffit de sélectionner son personnage et de mettre à jour la Google Sheet si c'est nécessaire.


Je peux mettre quoi comme champ personnalisé exactement?

N'importe quoi. Littéralement.

Vous voulez mettre des badges?
On mettrait ceci dans la Google Sheet dans le champ "Badges" :
Code:
<img src="lien Badge1" /><img src="lien Badge2" /><img src="lien Badge3" />


Vous voulez mettre des pokéballs avec des infobulles? Pourquoi pas !
On mettrait ceci dans la Google Sheet dans le champ "Pokéballs" :
Code:
<span class="infobulle_poke"><img src="image pokéball 1" /><span class="poke">Pikachu</span></span> <span class="infobulle_poke"><img src="image pokéball 2" /><span class="poke">Rattata</span></span>

Et un petit CSS pour faire fonctionner l'infobulle.

Vous voulez une barre de vie?
On mettrait ceci dans la Google Sheet dans le champ "PV" :
Code:
<span class="barrepv"><span class="width: 43%;"></span></span> 43/100

Et on mettrait ceci dans le CSS :
Code:
/*La barre de vie*/
.barrepv {
  display: inline-block;
  width: 100px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 2px;
}
/*La partie remplie de la barre de vie*/
.barrepv > span {
  display: inline-block;
  background-color: red;
}


Tant que vous avez de l'imagination, vous devriez vous débrouiller Razz

Sur ce, je vous présente les Version 1 et Version 2 dans les deux prochains messages Wink

Enjoy \o/

Littleelda

LS Fondu avatar avec infos derrière - Dim 18 Mar 2018 - 11:36

Fondu Avatar dans la Liste de Membres




Ce LS est pour forum en PHPBB2.


Bonjour,

Alors je propose un LS pour l'affichage de la liste des membres. Il s'agit d'une refonte du LS déposée par Marie(Allhyka) juste , qui m'a servi de base pour faire cette LS. J'ai changé pas mal d'éléments afin de l'adapter au codage dans ma section "affichage d'un sujet" donc je me suis ajoutée sur le copyright. A vous de voir si c'est mérité ou non.


Alors voici une mise en page pour l'affichage de la liste des membres. On y affiche les avatars qui, au passage de la souris font un fondu pour afficher les éléments du profil.

Aperçus : Normal et Ouvert

Alors tout d'abord, rendez vous sur le panneau d'administration -> Affichage ->Templates (section Général) -> memberlist_body (liste des membres)

et changer le tout pour celui-ci :

Code:
<!-- BEGIN switch_user_logged_in -->
<p class="right rightside">{LAST_VISIT_DATE}</p>
<!-- END switch_user_logged_in -->

<p>{CURRENT_TIME}</p>
<div class="titrePA row2">{PAGE_TITLE}

    <form action="{S_MODE_ACTION}" method="get">
        <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
          <tr>
              <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
          </tr>
          <tr>
              <td class="row1">
              <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
                <tr>
                    <td width="100%">{L_USER_SELECT} <input type="text" class="post row2" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />   
                    {L_SELECT_SORT_METHOD} {S_MODE_SELECT}   
                    {L_ORDER} {S_ORDER_SELECT}     
                    {S_HIDDEN_SID}
                    <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
                </tr>
              </table>
              </td>
          </tr>
        </table>
        </form>
     
        <!-- BEGIN memberrow -->
       
              <div class="memberlist">
            <div class="facebase">
               <div class="flip">
                  <div class="face1"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
               </div>
               <div class="face2">
                            <div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
                            <div class="stat_member"> Arrivé(e) le : {memberrow.JOINED}. <br/><br/>Dernière errance : {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Le joindre : {memberrow.PM_IMG}</div></div></div></div>
                    </div>
          <!-- END memberrow -->
          <!-- BEGIN switch_no_user -->
       
          <!-- END switch_no_user -->
     
            <br/><div class="copyright_memberlist">Codé par Allhyka et modifié par Littleelda pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></div>
     
        <!-- BEGIN switch_pagination -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td><span class="nav">{PAGE_NUMBER}</span></td>
              <td align="right"><span class="nav">{PAGINATION}</span></td>
          </tr>
        </table>
        <br />
        <!-- END switch_pagination -->
</div>





Enregistrez puis allez dans le CSS (Affichage ->Images et Couleurs (Couleur) -> Feuilles de style CSS) et ajoutez ce code-ci

Code:
 
    /**** CODE PAR MARIE, MODIFIE PAR LITTLEELDA POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

    /**** AFFICHAGE MEMBRER LISTE****/

    .memberlist {
    display:inline-block;
    vertical-align:top;
    margin-bottom: 15px;
    margin-right: 10px;
   margin-left:10px;
   margin-top: 15px;
    }

    /*** FORMAT DE L'IMAGE DE L'AVATAR ***/
   
    .avatar_member_list img{/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
      width:150px;
      height:300px;
    }


    /*** L'ANIMATION FLIP CARD ***/
   
   .facebase, .face1, .face2 {
        width: 150px;/*largeur de l'avatar*/
          height: 300px;/*hauteur de l'avatar*/

        }

   .facebase{
      margin: 0;
      position: relative;
      box-shadow : 1px 2px 9px 5px rgba(66,101,90,0.8);
      background-color: #9AB8AF;
}
      
    .flip {
      -moz-transition: all 1.5s ease-in-out;
      -ms-transition: all 1.5s ease-in-out;
      -o-transition: all 1.5s ease-in-out;
      -webkit-transition: all 1.5s ease-in-out;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      transition: all 1.5s ease-in-out;
      width: 100%;
      z-index: 2;
    }

    .face1 {
      background-color: #9AB8AF;
      left: 0;
      position: absolute;
      top: 0;
      z-index: 3;
      transition: all 1.5s ease-in-out;
    }

    .face2 {
      border-bottom: 2px solid #39210c;
      border-top: 2px solid #39210c;
      box-sizing: border-box;
      font-size: 13px;
      left: 0;
      overflow: auto;
      padding: 15px;
      position: absolute;
      top: 0;
      z-index: 0;
}

      .facebase:hover > .face2 {
         display: block;
         z-index:5;
      }

    .facebase:hover .face1 {
          opacity: 0.2;
          filter: alpha(opacity=20);
        -moz-opacity:0.5;
          z-index:1;
    }

    /*** DERRIERE L'AVATAR ***/

    .pseudo_member {
   
    font-family: Cinzel Decorative, cursive; /**L'écriture**/
      text-align: center;
      color: #000;
      line-height: 100%;
      font-size: 14px;
      text-transform: uppercase;
    }

    .stat_member {
      font-size: 10px;
      text-align: left;
    }

    .groups {
      font-family: arial; /**L'écriture**/
      text-align: center;
      font-size: 7px;
      color: #000;
      line-height: 100%;
      text-transform: uppercase;
      margin-bottom: 5px;
      border-bottom:1px solid #000;
    }


    .copyright_memberlist {
    font-size: 10px;
    text-align: right;
    font-family: georgia;
    }


Et enfin enregistrez et normalement tout est bon. Si vous avez des questions, n'hésitez pas à les poser. =)

Modifier les textes et nombres des variables du QEEL - Lun 18 Déc 2017 - 6:50

Modifier les textes et nombres des variables du QEEL




Bonjour,

Le code suivant fait suite à une demande d'un membre qui pourra sans doute servir à d'autres. :)
Aperçu:

HTML & Javascript
Modification de la template index_body : Affichage > Templates > General
Modification du Javascript : Modules > HTML & Javascript > Gestion des codes Javascript
Pour vérifier que le Javascript est bien activé sur votre forum, rendez-vous ici.

La première étape sera de checker que le Javascript soit activé sur votre forum.
Ensuite dans la gestion des codes Javascript, ajoutez un code avec le titre de votre choix et collez ce code :
Code:
jQuery(document).ready(function(){
  var nb = parseInt($('#member_nb strong').text());
  nb -= 5;
  $('#member_nb strong').text(nb);
});

Ce code prévoit actuellement d'enlever 5 membres au total, si vous souhaitez en ajouter 3 par exemple, il vous remplacer "nb -= 5;" par "nb += 3;".

Ensuite, dans le template index_body, remplace {TOTAL_USERS} par :
Code:
<span id="member_nb">{TOTAL_USERS}</span>


Explication :
Dans le template index_body, on sépare la variable des autres en lui donnant un id pour la retrouver après. Cette variable est composée de : "Nous avons " + X + " membres enregistrés".
Ainsi dans le JQuery, on va récupérer le nombre en stockant le contenu de la balise strong (en séléctionnant l'id "member_nb" ainsi que la balise strong qui encadre le nombre en question) qu'on transforme en chiffre (puisqu'il est actuellement reconnu comme du texte et non comme un chiffre) sur lequel on soustraira ou additionnera ce qu'on veut.

Si vous souhaitez modifier tout le contenu de la variable (incluant donc "Nous avons x membres enregistrés"), il faudra utiliser le code suivant :
Code:
jQuery(document).ready(function(){
  var nb = parseInt($('#member_nb strong').text());
  $('#member_nb').text("Nous avons " + nb + " inscrits au registre");
});


Ces codes peuvent être facilement réutilisés pour les autres variables du forum en utilisant toujours le même principe : Donner un id à la variable que l'on souhaite modifier en l'encadrant d'une balise span, regarder de quoi ce compose cette variable et remplacer les éléments dans le Javascript en indiquant l'identifiant de l'élément que l'on souhaite modifier, ici "#member_nb" pour la variable en entière et "#member_nb strong" pour isoler uniquement le chiffre.

Onyx

Boîte de messagerie originale - Mar 17 Oct 2017 - 17:24




Boîte de réception originale



Salut !

Voici un LS de boîte de réception qui a été fait pour la demande de R.Falsworth.

Voilà l'aperçu de la boîte de réception : cliquez ici pour voir.
Voilà l'aperçu des MPs : cliquez ici pour voir.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer la boîte de réception dans le template.
  • Ensuite, nous allons installer la revue de MPs dans le template.
  • Puis, nous allons installer l'affichage des MPS dans le template.
  • Enfin, nous allons mettre en forme les catégories à l'aide du CSS.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.





1. La boîte de réception (Template Privmsgs_Body)



Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_BODY

On met le code suivant et on enregistre :
Code:
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
<div class="main_mp">
  <div class="mp_new_post">{POST_PM_IMG}</div>
  <div class="mp_types">
    <div class="mp_type">{INBOX}</div>
    <div class="mp_type">{SENTBOX}</div>
    <div class="mp_type">{OUTBOX}</div>
    <div class="mp_type">{SAVEBOX}</div>
  </div>
  <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list" class="mp_list_form">
    <div class="mp_list">
      <div class="mp_list_top">
        <!-- BEGIN switch_box_size_notice -->
        <div class="mp_list_100">{BOX_SIZE_STATUS}</div>
        <!-- END switch_box_size_notice -->
        <div class="mp_list_select">
          {L_DISPLAY_MESSAGES}: 
          <select name="msgdays">
            {S_SELECT_MSG_DAYS}
          </select> 
          <input class="liteoption" type="submit" name="submit_msgdays" value="{L_GO}" />
        </div>
        <div style="clear: both;"></div>
      </div>
      <!-- BEGIN listrow -->
      <div class="mp_list_one">
        <span class="mp_list_img">
          <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" />
        </span>
        <span class="mp_list_title">
          <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> par {listrow.FROM} le {listrow.DATE}
        </span>
        <span class="mp_list_one_select">
          <input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" />
        </span>
        <div style="clear: both;"></div>
      </div>
      <!-- END listrow -->
      <!-- BEGIN switch_no_messages -->
      <div class="mp_nothing">{L_NO_MESSAGES}</div>
      <!-- END switch_no_messages -->
      <div class="mp_pagination">
        <span class="nav">{PAGE_NUMBER} {PAGINATION}</span>
      </div>
    </div>
    <div class="mp_list_bottom">
      {S_HIDDEN_FIELDS}
      <!-- BEGIN switch_save -->
      <input class="mainoption" type="submit" name="save" value="{L_SAVE_MARKED}" />  
      <!-- END switch_save -->
      <!-- BEGIN switch_move_profile -->
      <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
      <!-- END switch_move_profile -->
      <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MARKED}" />  
      <input class="liteoption" type="submit" name="deleteall" value="{L_DELETE_ALL}" />  
      <div class="mp_bottom_right">
        <a class="gensmall" href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: 
        <a class="gensmall" href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a>
      </div>
      <div style="clear: both;"></div>
    </div>
  </form>
  <div style="clear: both;"></div>
</div>

<table width="100%" border="0">
    <tr>
        <td align="right" valign="top">{JUMPBOX}</td>
    </tr>
</table>





2. Revue des messages privés (Template Privmsg_Topic_Review)



Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_TOPIC_REVIEW

On met le code suivant et on enregistre :
Code:
<div class="me_review_bloc">
  <div class="mp_sent_boite">Revue des messages</div>
  <!-- BEGIN postrow -->
  <div class="mp_revue_space"></div>
  <div class="mp_sent_pseudo_title">
    <div class="mp_sent_pseudo">{postrow.POSTER_NAME}</div>
    <div class="mp_sent_title">{postrow.POST_SUBJECT} / {postrow.POST_DATE}</div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_ava_mess">
    <div class="mp_sent_ava">
      {postrow.POSTER_AVATAR}
    </div>
    <div class="mp_sent_mess">
      {postrow.MESSAGE}
    </div>
    <div style="clear: both;"></div>
  </div>
  <!-- END postrow -->
</div>





3. Affichage du message privé (Template Privmsgs_Read_Body)



Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_READ_BODY

On met le code suivant et on enregistre :
Code:
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
<div class="mp_sent_topbloc">
  <div class="mp_sent_types">
    <div class="mp_sent_type">{INBOX}</div>
    <div class="mp_sent_type">{SENTBOX}</div>
    <div class="mp_sent_type">{OUTBOX}</div>
    <div class="mp_sent_type">{SAVEBOX}</div>
    <div class="clear: both;"></div>
  </div>
  <!-- BEGIN switch_post_reply -->
  <div class="mp_sent_reply">{REPLY_PM_IMG}</div>
  <!-- END switch_post_reply -->
  <div style="clear: both;"></div>
</div>

<form action="{S_PRIVMSGS_ACTION}" method="post" class="mp_sent_bloc">
  <div class="mp_sent_boite">{BOX_NAME}</div>
  <div class="mp_sent_pseudo_title">
    <div class="mp_sent_pseudo">{MESSAGE_FROM}</div>
    <div class="mp_sent_title">{POST_SUBJECT} / {POST_DATE}</div>
    <div class="mp_sent_quote_edit">
    <!-- BEGIN switch_quote -->{QUOTE_PM_IMG} <!-- END switch_quote -->{EDIT_PM_IMG}
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_ava_mess">
    <div class="mp_sent_ava">
      {AVATAR_FROM}
    </div>
    <div class="mp_sent_mess">
      <div class="mp__sent_message">
        {MESSAGE}
      </div>
      <!-- BEGIN switch_user_contact -->
      <div class="mp__sent_contact">
        {PROFILE_IMG} {PM_IMG} {EMAIL_IMG} {WWW_IMG} {AIM_IMG} {YIM_IMG} {MSN_IMG} {SKYPE_IMG}
      </div>
      <!-- END switch_user_contact -->
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_bottom">
    {S_HIDDEN_FIELDS}
    <!-- BEGIN switch_save -->
    <input class="liteoption" type="submit" name="save" value="{L_SAVE_MSG}" />  
    <!-- END switch_save -->
    <!-- BEGIN switch_move_profile -->
    <input class="liteoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE}" />  
    <!-- END switch_move_profile -->
    <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MSG}" />
  </div>
  <br />
  <br />
  <!-- BEGIN switch_review_box -->
  <div class="mp_sent_review">
    {TOPIC_REVIEW_BOX}
  </div>
  <!-- END switch_review_box -->
</form>
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="right" valign="top"><span class="gensmall">{JUMPBOX}</span></td>
   </tr>
</table>

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->





4. Mise en forme (CSS)



Si vous regardez votre boîte de messagerie, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre le totu en forme à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
Code:
/*** Bloc de tous les mps ***/
.main_mp {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
  color: white;
}
.mp_new_post {
  text-align: right;
  padding-bottom: 5px;
}

/** Bloc des types de boite **/
.mp_types {
  background: #56739a;
  float: left;
  width: 20%;
  box-sizing: border-box;
  margin-right: 1%;
}
/*Type de boite*/
.mp_type {
  margin: 5px;
  display: block;
  background: #24445c;
  color: #e67e30;
  text-align: center;
  padding: 2px;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}
/*Type de boite pas choisi*/
.mp_type a {
  display: block;
  margin: -5px -2px -2px -2px;
  padding: 2px;
  color: white;
  text-align: center;
  text-decoration: none!important;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}
/*Type de boite pas choisi au survol*/
.mp_type a:hover {
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}

/**Section de droite**/
.mp_list_form {
  float: left;
  width: 79%;
  box-sizing: border-box;
}

/*Bloc de droite avec la liste*/
.mp_list {
  background: #56739a;
}
/*Top de la liste*/
.mp_list_top {
  padding: 5px;
  text-align: left;
  font-size: 11px;
  margin-bottom: 5px;
}
/*Pourcentage de la boite*/
.mp_list_100 {
  float: left;
  padding-top: 2px;
  width: 235px;
}
/*Selectionner date message*/
.mp_list_select {
  float: right;
  text-align: right;
}

/** Un message prive **/
.mp_list_one {
  margin: 5px;
  background: #24445c;
  padding: 2px;
  text-align: left;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  font-size: 12px;
  font-family: verdana;
}
/*Bloc image*/
.mp_list_img {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  float: left;
  padding-right: 5px;
  width: 20px;
}
/*Image*/
.mp_list_img img {
  width: 20px;
  height: 20px;
}
/*Bloc info*/
.mp_list_title {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  float: left;
  padding-right: 5px;
}
/*Titre à la bonne taille*/
.mp_list_title .topictitle {
  font-size: 12px;
}
/*Select droite*/
.mp_list_one_select {
  float: right;
}
/*Pagination*/
.mp_pagination {
  padding: 0px 2px 2px 2px;
  text-align: left;
}
.mp_pagination .nav {
  color: white;
}

/*En bas de la liste des mp*/
.mp_list_bottom {
  margin-top: 5px;
}
/*Mettre les selectionner a droite*/
.mp_bottom_right {
  float: right;
}



/*Top message envoye*/
.mp_sent_topbloc {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
}
/*Bloc type de boite*/
.mp_sent_types {
  float: left;
  text-align: left;
}
/*Type de boite*/
.mp_sent_type {
  float: left;
  margin-right: 5px;
  width: 150px;
  background: #56739a;
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  text-align: center;
}
/*Lien Type de boite*/
.mp_sent_type a {
  display: block;
  padding: 2px;
  padding-top: 5px;
  color: white;
  background: #56739a;
  text-align: center;
  text-decoration: none!important;
}
/*Lien Type de boite pas choisi au survol*/
.mp_sent_type a:hover {
  background: #24445c;
  color: #e67e30;
}
/*Bouton repondre*/
.mp_sent_reply {
  float: right;
}

/*Bloc message envoye*/
.mp_sent_bloc {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
  color: white;
}
/*Boite message envoye*/
.mp_sent_boite {
  box-sizing: border-box;
  background: #24445c;
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  width: 100%;
  margin: 5px 0px;
  padding: 5px;
  padding-top: 10px;
  text-align: center;
}
/*Bloc pseudo et titre*/
.mp_sent_pseudo_title {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 13px;
  text-left: center;
}
/*Bloc pseudo*/
.mp_sent_pseudo {
  float: left;
  width: 200px;
  padding: 0px 5px;
  text-align: center;
}
/*Bloc titre*/
.mp_sent_title {
  float: left;
  padding-left: 5px;
  text-align: left;
}
/*Bloc citer et éditer*/
.mp_sent_quote_edit {
  width: 150px;
  float: right;
  padding-right: 5px;
  text-align: right;
}

/*Bloc avatar et message*/
.mp_sent_ava_mess {
  width: 100%;
  margin: 5px 0px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
/*Avatar message envoye*/
.mp_sent_ava {
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  background: #56739a;
  width: 200px;
  margin-right: 5px;
  color: #ffffff;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}
/*Bloc message*/
.mp_sent_mess {
  order: 2;
  flex-grow: 10;
  flex-shrink: 10;
  flex-basis: 100%;
  box-sizing: border-box;
  background: #56739a;
  color: #ffffff;
  padding: 5px;
  font-size: 12px;
  text-align: left;
}
/*Bloc contacts*/
.mp__sent_contact {
  margin-top: 10px;
}
/*mp_sent_bottom*/
.mp_sent_bottom {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}

/*Bloc espace entre posts*/
.mp_revue_space {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

CHATBOX - Rajouter la couleur du groupe derrière les pseudos - Lun 2 Oct 2017 - 9:08

CHATBOX - Rajouter la couleur du groupe derrière les pseudos




Pensez à faire un petit remerciement à Never Utopia pour l'aide apportée :hug:

Hello,
Voici un petit tuto pour apprendre à mettre une couleur de fond derrière certaines couleurs de pseudo sur la chatbox.
Ce tutoriel suppose d'avoir déjà quelques pré-requis en HTML / CSS / être à l'aise avec le code :)

Normal :
Tag html sur Never Utopia - graphisme, codage et game design ZizIIpF

En changeant en fonction de la couleur de groupe :
Tag html sur Never Utopia - graphisme, codage et game design P9nuNIa

Exemple pour un groupe :
Code:
/* Chatbox - changer couleur de fond du pseudo
pour le groupe de couleur verte (#16A085) */
.user-msg .user[style*="#16A085"] {
  background: #16A085; /* couleur de fond */
  color: white!important; /* couleur texte */
  padding: 2px; /* marges intérieures */
  border-radius: 3px; /* arrondi */
  margin-right: 5px; /* espace à droite avant le message */
}



D'autres exemples pour montrer des idées :
Spoiler:



---------------------

Explications


Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).

Prérequis CSS


Je n'ai pas l'intention de faire un doublon du tuto sur les sélecteurs, donc si vous êtes intéressés, prenez le temps de le lire. (◕‿◕✿)

Voici les sélecteurs que l'on va utiliser (ils sont dans les tutoriels de Manumanu, pour vous rafraichir la mémoire, je vous met un exemple pour chaque) :

  • Sélectionner une classe.
    Code:
    .msg { }

    Code:
    <span class="msg"></span>


  • Sélecteur de descendance. (.toto qui se dans un élément avec la classe "msg")
    Code:
    .msg .toto { }

    Code:
    <div class="msg"><div class="toto">exemple</div></div>


  • Sélecteur d'attribut :
    Code:
    a[href="#top"]

    Code:
    <a href="#top">Retour en haut</a>



Le HTML


Voilà à quoi ressemble la structure HTML d'un message sur la chatbox :
Code:
<p class="chatbox_row_1 clearfix">
    <span class="date-and-time" title="01 Oct 2017">[19:41:53]</span>
    <span class="user-msg">
        <span class="user" style="color:#16A085;">
            <strong><span class="chatbox-username chatbox-message-username" data-user="1">Pseudo</span> : </strong>
        </span>
        <span class="msg"><span style="color: #000000">Message</span></span>
    </span>
</p>

La classe "chatbox_row_1" est remplacé un message sur 2 pour être "chatbox_row_2"

La partie qui va le plus nous intéresser est cette ligne là :
Code:
<span class="user" style="color:#16A085;">
    <strong><span class="chatbox-username chatbox-message-username" data-user="1">Pseudo</span> : </strong>
</span>


Sur la première ligne, si on regarde bien il y a la couleur du pseudo de la personne #16A085 :
Code:
<span class="user" style="color:#16A085;">


On va commencer par sélectionner l'élément avec la classe "user" :
Code:
.user {
    background: red;
}

On rajoute un fond rouge pour être sûrs de remarquer où notre code est mis.
Pour l'instant, on peut voir que tous nos pseudos ont un fond rouge.
Tag html sur Never Utopia - graphisme, codage et game design MT5uTKu

La classe CSS "user" peut se trouver à plein d'endroits du forum. Si on ajoute ce code directement, on prend le risque de changer des endroits non souhaités. Pour être sûrs de ne cibler sur la chatbox, nous pouvons rajouter .user-msg devant. De cette manière, nous ne ciblons que les .user qui se trouvent dans un élément avec la classe "user-msg".
Code:
.chatbox .user-msg .user {
    background: red;
}




Maintenant, nous allons sélectionner seulement ceux qui ont l'attribut style avec la couleur #16A085
Code:
.chatbox .user-msg .user[style="color:#16A085"] {
    background: red;
}

Tag html sur Never Utopia - graphisme, codage et game design IFDtfZ1
TAAAADAAA (avouez, c'est trop beau)


Attention à recopier parfaitement le code couleur "16A085", en prenant en compte les majuscules et les minuscules.
En effet, forumactif remet exactement le même code couleur que celui inscrit dans le panneau d'admininistration. Il est possible de dire au CSS "ne fait pas attention si la couleur est en minuscule ou en majuscule", mais cela ne fonctionne pas sur IE et sur Edge Sad

Les plus attentifs d'entre vous auront remarqué que je n'ai pas utilisé [style="color:#16A085"] mais [style*="#16A085"] dans mon CSS fourni tout au début.

*= n'est pas la même chose que =.

[style*="#16A085"] signifie "il faut qu'on trouve "#16A085" dans l'attribut style".

[style="color:[b]#16A085"] signifie il faut que l'attribut style ai exactement comme valeur "[style="color:#16A085"]" .

Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple. On pourrait même juste mettre [style*="16A085"]. De mon côté je laisse le dièse car je trouve ça plus joli Very Happy

La documentation de MDN pour en savoir beaucoup plus : CSS > Sélecteurs d'attribut


Une fois qu'on a réussi à sélectionner le bon élément, il n'y a plus qu'à changer le style comme on veut ! Ici, un peu de padding, la couleur du texte et une petite marge :)

Personnaliser


Ajouter plusieurs groupes


Si vous avez la flemme, vous pouvez simplement copier le code :
Exemple pour 3 groupes :
Code:
.user-msg .user[style*="#8e44ad"] {
  background: #8e44ad;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}

.user-msg .user[style*="#e74c3c"] {
  background: #e74c3c;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}


.user-msg .user[style*="#16a085"] {
  background: #16a085;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}


Le problème, c'est que le jour où on voudra changer l'arrondi, ou d'autres éléments en commun, cela sera bien fatigant x)
On peut donc mettre en commun le code pour tous les groupes de couleurs qu'on souhaite modifier :
Code:

/* Code en commun pour tous les groupes */
.user-msg .user[style*="#8e44ad"],
.user-msg .user[style*="#e74c3c"],
.user-msg .user[style*="#16a085"] {
  background: #8e44ad;
  color: white!important;
  padding: 2px;
  border-radius: 3px;
  margin-right: 5px;
}

/* On sépare seulement la partie différence */
.user-msg .user[style*="#8e44ad"] {
  background: #8e44ad;
}

.user-msg .user[style*="#e74c3c"] {
  background: #e74c3c;
}

.user-msg .user[style*="#16a085"] {
  background: #16a085;
}

Les lignes qui se répètent se retrouve en haut, en commun pour les 3 styles, en dessous nous ne mettons que l'élément qui change : la couleur de fond.

Si ce genre de technique vous intéresse, vous pouvez aussi aller voir le tuto basé sur le même principe : Chatbox - Styliser les messages de connexion / déconnexion (CSS)

Maintenant vous n'avez plus qu'à personnaliser !

Merci beaucoup pour votre attention, j'espère que ce tuto a pu vous être utile :hug:
En cas de soucis, je vous conseille d'aller poster dans la section Problème avec mon code

Faire apparaître un texte au survol d'une image. - Mer 3 Mai 2017 - 14:59

Faire apparaître un texte au survol d'une image




Bonjour à tous !

Alors je vous propose aujourd’hui un code personnalisable qui vous permet de faire apparaître un texte sur une image au survol de la souris. Vous allez voir, ce n’est pas très difficile, mais soyez quand même attentif et lisez bien tout pour ne pas louper une étape. A noter que je ne vous donne pas le code tout prêt. Ce sera à vous de le constituer !
Si vous avez des problèmes, n’hésitez à la poser dans le forum Problème avec mon code ou des questions par mp, comme ça je pourrais les ajouter à ce post et ça pourra surement aider d’autres personnes. N’oubliez pas, aucune question n’est stupide !

Alors en premier lieu, il vous faut une image. Pour mon cas, je vais utiliser celle-ci
Spoiler:

Peu importe la taille, nous la définirons dans le code ! Elle peut être plus grande ou plus petite. La première chose que nous allons faire, c’est noter dans un coin sa taille justement. Pour mon image ce sera donc : 500px de largeur et 500px de hauteur.

Nous allons donc créer une div, qui va nous permette de faire l’effet que nous recherchons. A noter que c’est dans cette div que vous mettrez tous les codes. Il vous faut lui donner un nom. Moi je vais l’appeler Cache_Texte. Donc dans mon css je vais avoir

Code:
.Cache_Texte{

}


On oublie pas le point du début ! Et c’est entre les accolades que nous allons mettre le contenu de notre code.

Nous allons commencer par mettre la taille de notre division, cette division qui contiendra notre texte. Pour ça on utilise le code de la larguer et de la hauteur (dans cet ordre là !)
Code:
.Cache_Texte{
width : LARGEURpx;
height : HAUTEURpx;
}

On fait attention à garder les points virgules qui terminent la ligne de code !

Ensuite, je vais déterminer si mon texte sera plus haut ou moins haut que mon image, afin de savoir si je dois insérer un code pour faire apparaître une scrollbarr. Ce code sera le suivant, en langage css. Si vous n’êtes pas administrateur sur le forum, faites appel à du css via les balises appropriées (voir plus bas, je vous les donne Wink )
Code:
 overflow: auto;


Donc si je résume pour l’instant : mon texte sera dans une div faisant 500 de largeur et 500 de hauteur. Si mon texte est plus grand un scrollbarr apparaîtra de manière automatique.


Maintenant nous allons ajouter le code pour faire une transition, histoire que cela soit plus jolie. On va utiliser pour cela transition-duration. Pour ma part, je vais mettre 0.8 secondes. Si vous voulez que ce soit plus long, augmentez le timing. Si vous voulez que ce soit plus rapide, et bien, vous diminuez tout simplement. Le code est
Code:
 transition-duration:.Zs;

(remplacez Z par la valeur que vous désirez)
Ce code n'étant pas toujours pris en compte par les anciens navigateurs, on va rajouter un préfixe pour qu’il le soit. Je vous renvoie au tutoriel Savoir quand utiliser des préfixes CSS fait par Manumanu.

Enfin, et bien il nous reste qu’à rendre notre texte invisible au premier abord. Pour cela on va utiliser le code opacity.
Code:
 opacity : 0;


0, car on ne veut pas que le texte se voit au début. Et, comme précédemment, on rajoute des préfixes pour être sûr que tous les navigateurs le prennent en charge. Attention, pour internet explorer, il faut utiliser la propriété suivante
Code:
filter : alpha(opacity=0); 


Donc au final, si je résume : mon texte sera dans une div faisant 500 de largeur et 500 de hauteur. Si mon texte est plus grand un scrollbarr apparaîtra de manière automatique. J’ai mis une transition pour que cela soit plus jolie, et enfin j’ai caché mon texte comme ça, il ne se verra pas.


Ensuite, et bien, cela dépend de vous. Si vous voulez qu’il y ait un fond de couleur, vous ajoutez le code nécessaire. Si vous voulez une couleur de texte spécifique, c’est pareil. C’est un code css, il est donc personnalisable :)

Nous avons donc fini la première partie du code. Maintenant, on va coder notre div pour, qu’au passage de la souris, notre div (texte) apparaisse. Nous allons nous servir pour cela du « hover » ce qui signifie en code le survol. On reprend le nom de notre div et on rajoute un deux-points suivi de hover. Donc pour ma part :
Code:
.Cache_Texte :hover{

}


ATTENTION on garde le précédent code fait ! Celui-ci est un nouveau ! Donc nous avons


Code:
 .Cache_Texte{

}

.Cache_Texte :hover{

}


Le premier est rempli par les atrtibuts vu plus haut. Et le second, nous allons le remplir avec un seul attribut, donné ci-dessous.

Ce qu’on va ajouter au hover, c’est pour permettre de changer l’opacité. On reprend le code donné plus haut mais à la place de mettre 0, on mets un 1. Si vous voulez que l’image reste un peu en fond, vous pouvez, à la place de mettre 1, mettre 0.8 par exemple. Pour le filter, on est 100 pour 1 et 80 par exemple pour 0.8. Il est calculé en pourcentage.


Et voilà, la partie css est terminée. Maintenant nous allons voir le code html. C’est assez simple. On va d’abord mettre l’image en fond via le code background-image auquel on va attribuer la taille de l’image qu’on a noté plus haut.

Code:
 <div style="background-image:url(URL DE L IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;">

</div>

On prend l’habitude de fermer un code html dès qu’on l’a ouvert. J’ai ouvert la div, je la ferme dans mon code.

Pour ma part, avec mon image, cela donne du coup
Code:
 <div style="background-image:url(http://img15.hostingpics.net/pics/798434AlexPe.png);    width:500px; height:500px;">

</div>


Et maintenant on rajoute la div que nous avons créé en css, que l’on vient incorporer dans celle que nous venons de coder. Pour ma part, cela donne du coup
Code:
 <div style="background-image:url(URL DE L’IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;"> <div class="NOM DE LA DIV QUE VOUS AVEZ CREE">  texte ici blablabla
</div></div>


Et comme promis, le code pour exporter un css quand nous n’avons pas assez au panneau d’admin c’est
Code:
 <style>

</style>


A noter que les lignes de codes doivent être sur une même ligne. On enlève les sauts de lignes en gros.



Et voilà vous savez tout. Et pour ma part, en personnalisant les balises css, cela me donne :



Ezeÿel Sköell

Loup de la meute

Petit-fils de l’ancien ulfric

Autre texte ici blablabla



A noter que le background color ne fonctionne pas si on l'ajoute dans les balises < style >. Si vous voulez en ajouter un, il suffit de l'ajouter en style sur la div.


Par exemple, pour moi cela donne :
Code:
<div class="Cache_Texte" style="background-color:#000000;">  </div>



Et voilà, vous savez tout. A vous de tenter et d'essayer

PS : pensez à changer le nom de la div si vous voulez le faire à la suite, sinon cela court-circuitera mon propre code Wink

Ayael

Galerie d'avatar avec crédit et zoom au survol. - Jeu 23 Mar 2017 - 17:49



Bonjour, cela fait longtemps :p Je viens proposer ce code que j'ai fais pour mon forum récemment, il s'agit d'une galerie d'avatar avec une zone pour les crédits et un effet de zoom au survol. Simple mais efficace, contenant seulement du HTML et du CSS

Capture d'écran / Capture au survol


Les dimensions des images sont bien entendu modifiables à volonté mais prenez garde à conserver les proportions autrement l'image miniature apparaitra déformée.


Le CSS :
Code:
/* Affichage des images*/
   
div.proposition_avatar {
width: 500px;  /*largeur du cadre total, modifiable selon le nombre d'image que vous voulez par ligne. */
margin-top:70px; /* marge en haut pour éviter que l'image chevauche quelque chose d'autre au survol.*/
margin-bottom:70px; /* marge en bas pour éviter que l'image chevauche quelque chose d'autre au survol.*/
line-height: 0;

/*centre le bloc sur la page*/
margin-left:auto;
margin-right:auto;
}


div.proposition_avatar p, div.proposition_avatar p img {
width: 120px; /* Largeur de la miniature */
height: 240px; /* Hauteur de la miniature */
float:left;

}

div.proposition_avatar p {
display: inline-block;
position: relative;
margin: 1px; /* marge entre les images, peut être augmenté si nécessaire */
}


div.proposition_avatar p img {
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
 
}

div.proposition_avatar p:hover img {
height: 400px; /* Hauteur finale de l'image */
width: 200px; /* Largeur finale de l'image */
z-index: 99;
 
/*Gère la position de la grande image, peut être modifié */
left: -25%; /*Décale l'image vers la gauche*/
top: -25%; /* Décale l'image vers le haut*/
}

/*********** Gère la partie "crédit"*/

/*crédit pour la miniature*/
div.proposition_avatar p .credit {
position:absolute;
display:block;
z-index:2;

width:110px; /* largeur du cadre, à modifier en fonction de la largeur de votre image miniature*/
padding:5px;
line-height:15px;

bottom:0px; /* positionne le cadre en bas de l'image, peut être modifié*/
background-color:rgba(0, 0, 0, 0.5); /* couleur de fond du cadre, par défaut noir, peut être modifié*/ 
font-family:arial; /* Police d'écriture, peut être modifié*/
text-align:center; /*centre le texte, peut être modifié*/
color:#fff; /*couleur du texte, peut être modifié*/
font-size:11px; /*taille du texte, peut-être modifié*/

-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
      }
      
/* crédit au survol des images*/
div.proposition_avatar p:hover span.credit {
z-index:99;
width:190px!important; /*largeur du cadre, à modifier en fonction de la largeur de votre grande image -10px */
font-size:16px;
bottom:-100px; /*permet de positionner le cadre en bas de l'image, doit être modifié en fonction de la taille de votre grande image*/
left:-25%; /* Permet de positionner le cadre sur la gauche, peut être modifié*/
}



Le html

Code:
<div class="proposition_avatar">   

   <p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p><!--NEXT--><p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p>

<div class="clear: both;"></div>
</div>


Cet élément est multipliable à l'infini selon le nombre d'image que vous voulez afficher :
Code:
<!--NEXT--><p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p>


Comme je suis d'humeur généreuse, j'ai également codé une variante ou le crédit n'apparait QUE au survol de l'image. Le html est le même, seul le CSS change.

CSS : crédit uniquement au survol
Code:
/* Affichage des images*/
   
div.proposition_avatar {
width: 500px;  /*largeur du cadre total, modifiable selon le nombre d'image que vous voulez par ligne. */
margin: auto; /*centre le cadre*/
margin-top:70px; /* marge en haut pour éviter que l'image chevauche quelque chose d'autre au survol.*/
margin-bottom:70px; /* marge en bas pour éviter que l'image chevauche quelque chose d'autre au survol.*/
line-height: 0;
}


div.proposition_avatar p, div.proposition_avatar p img {
width: 120px; /* Largeur de la miniature */
height: 240px; /* Hauteur de la miniature */
float:left;

}

div.proposition_avatar p {
display: inline-block;
position: relative;
margin: 1px; /* marge entre les images, peut être augmenté si nécessaire */
}


div.proposition_avatar p img {
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
 
}

div.proposition_avatar p:hover img {
height: 400px; /* Hauteur finale de l'image */
width: 200px; /* Largeur finale de l'image */
z-index: 99;
 
/*Gère la position de la grande image, peut être modifié */
left: -25%; /*Décale l'image vers la gauche*/
top: -25%; /* Décale l'image vers le haut*/
}

/*********** Gère la partie "crédit"*/


.credit {
display:none;
}
      
/* crédit au survol des images*/
div.proposition_avatar p:hover span.credit {
display:block;
padding:5px;
line-height:15px;
position:absolute;
color:#fff; /*couleur du texte, peut être modifié*/
background-color:rgba(0, 0, 0, 0.5); /* couleur de fond du cadre, par défaut noir, peut être modifié*/ 
font-family:arial; /* Police d'écriture, peut être modifié*/
z-index:99;
width:190px!important; /*largeur du cadre, à modifier en fonction de la largeur de votre grande image -10px */
font-size:16px;
bottom:-100px; /*permet de positionner le cadre en bas de l'image, doit être modifié en fonction de la taille de votre grande image*/
left:-25%; /* Permet de positionner le cadre sur la gauche, peut être modifié*/
}




Voilà, en espérant que cela sera utile à certains d'entre vous !

Cheshire Cat

Profil gris avec effet au survol - Dim 19 Fév 2017 - 14:54



Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de profil avec un style assez simple !

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Aperçu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

Quelques infos:
- La taille de la création est de 200 pixels.
- La taille des avatars dans le code est de 320 pixels, mais adaptable si vous modifiez la valeur.
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.

Installer votre nouveau profil:
Pour commencer l'installation de notre nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Vous supprimez et vous remplacez par ce qui suis
Code:
<!-- BEGIN displayed -->
   <tr id="p{postrow.displayed.U_POST_ID}">
      <td valign="top">
                     <div class="profil_posteur">
            <div class="pseudo_sujet">
                                  <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
                                  {postrow.displayed.POSTER_NAME}
                             </div>
            <div class="rang_sujet">
                                  {postrow.displayed.POSTER_RANK}
                             </div>
            <div class="hover_profil">
                                     <div class="avatar_sujet">
                                       {postrow.displayed.POSTER_AVATAR}
                                     </div>
                                     <div class="infosprofil_sujet">
                  <!-- BEGIN profile_field -->
                                             <div class="label_sujet">
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                                             </div>
                  <!-- END profile_field -->
                 {postrow.displayed.POSTER_RPG}
                                     </div>
            </div>
            <div class="rang_sujet">
              {postrow.displayed.RANK_IMAGE}
                             </div>
                     </div>
      </td>


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Code:
/* Profil du membre dans les sujets */
.profil_posteur{
  width:200px;
  background:#927d75;
  padding:8px 0;
  font-family:calibri; /* Police sur toute la zone du profil */
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
}
/* La partie suivante centre a la fois le pseudo, le rang écrit et l image du rang */
.pseudo_sujet, .rang_sujet{
  text-align:center;
}
/* La partie suivante concerne uniquement le pseudo du membre */
.pseudo_sujet{
  font-size:16px;
}
/* La partie suivante concerne les div du rang */
.rang_sujet{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
}
/* La partie suivante concerne uniquement l image du rang */
.rang_sujet img{
  max-width:100%;
}
/* La partie suivante concerne l'effet sur le profil */
.hover_profil{
  position:relative; /* Ne pas modifier cette partie */
  width:200px; /* A modifier en fonction de la taille de votre avatars */
  height:320px; /* A modifier en fonction de la taille de votre avatars */
  overflow:hidden;
  margin:8px 0;
}
.avatar_sujet{
  position:absolute;
  top:0;
  left:0;
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .avatar_sujet{
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(2);
  transform:scale(2);
}
.infosprofil_sujet{
  position:absolute; /* Ne pas modifier cette partie */
  top:10px; /* Ne pas modifier cette partie */
  left:10px; /* Ne pas modifier cette partie */
  width:180px;
  height:300px;
  overflow:auto;
  padding:10px;
  background:rgba(0, 0, 0, 0.2); /* La derniere valeur permet de modifier l opacite de la couleur de fond */
  border:4px solid #f9fdf9;
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
  opacity:0;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .infosprofil_sujet{
  opacity:1;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
}
.label_sujet{
  background:#f9fdf9;
  padding:3px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  margin:0 0 5px 0;
}
/* Ne pas modifier cette partie */
.label_sujet:last-child{
  margin:0 0 0 0;
}
/* empeche certaines infos du profil de depasser*/
.infosprofil_sujet img,
.infosprofil_sujet textarea {
  max-width: 100%;
  box-sizing: border-box;
}


Si jamais vous voulez une image dans vos profils, vous devez mettre le champ en tout premier et avec une image par défaut, sans quoi cela peut provoquer quelques problèmes avec le code actuel.

Voici aussi les champs à renseigner pour ne pas afficher le titre du label
Tag html sur Never Utopia - graphisme, codage et game design Bac408486e

Donc, si vous suivez ces indications, ajoutez ceci à votre CSS
Code:
/* Ne pas modifier cette partie */
.label_sujet:first-child{
  padding:0;
}
/* Ne pas modifier cette partie */
.label_sujet:first-child > img{
  width:100%; /* le pourcentage permet de redimensionner l image quelque soit sa taille et celle de la zone */
}


N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

J'espère que ça vous plaît, et n'hésitez surtout pas à poster un petit "merci", ça fait toujours très plaisir :hudada:

Cheshire Cat

Profil simple aux bordures arrondies - Dim 19 Fév 2017 - 14:53



Bonjour à tous !
Aujourd'hui je vous propose un profil très simple et facilement modifiable ^-^

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

Quelques infos:
- La taille est adaptée automatiquement
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
- L'image "Info du profil" est modifiable.

Installer votre nouveau profil:
Pour commencer l'installation de nos nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>


Vous supprimez et vous remplacez par ce qui suis
Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a></span>
                   <div class="SujetPseudo">{postrow.displayed.POSTER_NAME}</div>
                   <div class="SujetProfil">
 <div class="SujetRang">
                                   {postrow.displayed.POSTER_RANK}<br />
                                   {postrow.displayed.RANK_IMAGE}
                           </div>
                           <span class="SujetAvatar">
                           {postrow.displayed.POSTER_AVATAR}
                           </span>
                   </div>
                   <div class="SujetInfosProfil">
                           <div>
 <!-- BEGIN profile_field -->
                           <div class="SujetLabel">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div>
 <!-- END profile_field -->
 <div class="SujetFeuillePerso">{postrow.displayed.POSTER_RPG}</div>
                           </div>
                           <img src="http://img11.hostingpics.net/pics/480042Infoduprofil.png" alt="Infos fermées" class="ImageInfosClosed" />
                   </div>
 </td>


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Code:
/* Commande profil par Cheshire Cat */
/* Concerne le pseudo du membre */
.SujetPseudo{
  margin-bottom:-12px; /* fait descendre le pseudo en dessous de la bordure du profil */
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
}
/* Empêche le pseudo d'être écrit en gras */
.SujetPseudo strong{
  font-weight:normal;
}
/* Concerne l'avatar et le rang */
.SujetProfil{
  margin:0 5px;
  width:230px;
  padding:15px;
  box-sizing:border-box;
  border-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
}
/* Concerne le rang */
.SujetRang{
  margin:5px 0 15px;
  text-align:center;
  font-size:15px;
  color:#6e520f;
  letter-spacing:1px;
}
/* Concerne les informations du profil */
.SujetInfosProfil{
  width:135px;
  padding:0px 15px 0px 15px;
  margin-top:-1px;
  margin-left:34px;
  box-sizing-border-box;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
  transition:all 800ms;
  font-size:11px;
}
/* Ajoute un padding supérieur au passage de la souris pour afficher les informations */
.SujetInfosProfil:hover{
  padding:15px 15px 0 15px;
}
/* Concerne la parite interne aux informations */
.SujetInfosProfil > div{
  height:0px;
  overflow:auto;
  transition:all 800ms; /* créé une transition progressive avant et après passage de la souris */
}
/* Affiche les informations au survol */
.SujetInfosProfil:hover > div{
  height:180px;
}
/* Concerne les champs du profil */
.SujetLabel{
  margin-bottom:5px;
  margin-right:5px;
  padding:3px;
  background-color:rgba(233, 236, 234, 0.7);
  border:1px solid #bcb7ba;
  color:#6e520f;
}
/* Supprime le margin-bottom pour le dernier champ du profil */
.SujetLabel:last-of-type{
  margin-bottom:0;
}
/* Concerne la feuille de personnage */
.SujetFeuillePerso{
  color:#6e520f;
}
/* Concerne le lien vers la feuille de personnage */
.SujetFeuillePerso a[href="/u1rpgsheet"]{
  text-align:center;
  letter-spacing:1px;
  display:block;
  margin:10px 0 5px;
  color:#6e520f;
  border-bottom:1px solid #6e520f;
}
/* Supprime les balises BR avant et après le lien vers la feuille de personnage */
.SujetFeuillePerso br:first-of-type,
.SujetFeuillePerso br:nth-of-type(2){
  display:none;
}
/* Concerne l'image en bas des informations du profil */
.ImageInfosClosed{
  margin-bottom:-1px;
  margin-left:-15px;
  opacity:0.6;
}

/* empeche certaines infos du profil de depasser*/
.SujetInfosProfil > div img,
.SujetInfosProfil > div textarea {
  max-width: 100%;
  box-sizing: border-box;
}


N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

Un petit merci fait toujours plaisir, alors hésite pas ! :mouton:

Cheshire Cat

Catégories style steampunk - Dim 19 Fév 2017 - 14:49



Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de catégories avec un style plutôt steampunk ^-^
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Un aperçu en image:
Spoiler:


Optimisé pour tous les navigateurs - Version PHPBB2

Installer vos nouvelles catégories:
Pour commencer l'installation de nos nouvelles catégories, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > Index_box et remplacer le code d'origine par le suivant.

Code:
<div class="catLiens">
  <!-- BEGIN switch_user_logged_in -->
  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW} - </a>
  <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF} - </a>
  <!-- END switch_user_logged_in -->
  <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie">
 {catrow.tablehead.L_FORUM}
 <!-- END tablehead -->
 <!-- BEGIN forumrow -->
  <div class="catCentre">
  <div class="inline catGauche">
          <div class="catStats">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</div>
          <div class="inline catLast">
                  <img class="newOldLock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
  {catrow.forumrow.LAST_POST}
          </div>
          <div class="inline catAvatar">
 <!-- BEGIN avatar -->
                  {catrow.forumrow.avatar.LAST_POST_AVATAR}
  <!-- END avatar -->
          </div>
  <div class="inline sousForums">{catrow.forumrow.LINKS}</div>
  </div>
  <div class="inline catDroite">
  <a class="catTitreForum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  <div class="catDescrip">{catrow.forumrow.FORUM_DESC}</div>
        </div>
  </div>
 <!-- END forumrow -->
 <!-- BEGIN tablefoot -->
  <img src="http://zupimages.net/up/17/13/mt9t.png" />
</div><!-- END tablefoot --><!-- END catrow -->


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

Code:
/* Catégories réalisées par Cheshire Cat */
.catLiens{
  text-align:center;
}
.categorie{
  width:800px;
  margin:0 auto;
  font-family:calibri;
  font-size:12px;
}
.inline{
  display:inline-block;
  vertical-align:top;
}
.categorie h2{
  margin:20px 0 0;
  padding:30px 0;
  box-sizing:border-box;
  background-image:url('http://zupimages.net/up/17/13/mt9t.png');
  font-size:30px;
  font-weight:normal;
  text-align:center;
  color: #523e32;
  text-shadow: 0 0 3px #55493f;
}
.catCentre{
  padding:0 20px 40px 20px;
  background:#21130d;
}
.categorie h2 + .catCentre{
  padding-top:40px;
}
.catGauche{
  width:400px;
  background-color:#a9a08b;
  margin-right:10px;
  padding:10px;
  box-sizing:border-box;
}
.catStats{
  color:#654f3f;
  font-size:15px;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.catLast{
  width:130px;
  height:120px;
  padding:5px;
  box-sizing:border-box;
  background-color:#ccc6b8;
  text-align:center;
  line-height:20px;
  overflow:auto;
}
.catAvatar{
  width:80px;
  height:120px;
  margin:0 10px;
  overflow:hidden;
  background-color:#ccc6b8;
}
.catAvatar img{
  width:100%;
}
.sousForums{
  width:150px;
  height:120px;
  background-color:#ccc6b8;
  font-size:0;
  overflow: auto;
}
.sousForums a{
  display:block;
  background:#fff;
  font-size:12px;
  text-align:center;
  margin-bottom:5px;
}
.catDroite{
  width:350px;
  background-color:#a9a08b;
  padding:10px;
  box-sizing:border-box;
}
.catTitreForum {
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.catDescrip{
  height:120px;
  background-color:#ccc6b8;
  margin-top:5px;
  padding:10px;
  overflow:auto;
  text-align:justify;
  box-sizing:border-box;
}


N'hésitez pas à poster un petit message, ça fait toujours plaisir !

Cheshire Cat

Page d'accueil Rose/Violet/Blanc pastel - Dim 19 Fév 2017 - 14:48



Bonjour à vous tous !
Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:


Optimisé pour tous les navigateurs - Toutes versions

Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et copiez le code qui va suivre dans votre feuille de style
Code:
/* Commande de Page d'accueil par Cheshire Cat */
      .inline{
         display:inline-block;
         vertical-align:top;
      }
      .PA{
         background-color:#f1ead6;
         width:800px;
         margin:20px auto;
         padding:10px 20px 20px 20px;
         box-sizing:border-box;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:30px;
         font-family:calibri;
         font-size:13px;
         color:#674b4b;
      }
      .PA a{
         color:#de8585;
         transition:all 400ms;
      }
      .PA a:hover{
         color:#8a4c4c;
      }
      .PA h1{
         margin:0 -20px 10px;
         padding-bottom:10px;
         text-align:center;
         font-weight:normal;
         font-size:40px;
         border-bottom:2px solid #b79f9f;
         font-family:'Montez';
      }
      .PA h2{
         margin:0 20px 10px;
         text-align:center;
         font-weight:normal;
         font-size:30px;
         border-bottom:2px solid #b79f9f;
         font-family:'Montez';
      }
      .PA-Gauche{
         width:250px;
      }
      .contexte{
         height:240px;
         margin-bottom:20px;
         padding:10px;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         overflow:auto;
         text-align:justify;
         line-height:16px;
      }
      .PA-Droite{
         width:480px;
         margin-left:20px;
      }
      .staff-votes{
         width:235px;
         margin-right:20px;
      }
      .staff{
         padding:0 10px;
         margin-bottom:10px;
      }
      .infobulle{
         position:relative;
         width:100px;
         height:100px;
         overflow:hidden;
         border-radius:10px;
         background-color:#EFEFEF;
         box-shadow:1px 1px 3px #b1a9a9;
      }
      .infobulle:first-of-type{
         margin-right:10px;
      }
      .infobulle > img{
         width:100%;
      }
      .infobulle div{
         position:absolute;
         top:100px;
         left:0;
         width:100px;
         height:100px;
         padding:10px;
         box-sizing:border-box;
         background-color:#fbf7f7;
         text-align:center;
         font-size:15px;
         line-height:25px;
         opacity:0;
         transition:all 600ms;
      }
      .infobulle:hover div{
         top:0;
         opacity:0.9;
      }
      .votes{
         text-align:center;
         font-size:0;
      }
      .votes img{
         margin:0 3px;
      }
      .nouveautes{
         width:200px;
         height:190px;
         margin-bottom:10px;
         padding:10px;
         overflow:auto;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         text-align:justify;
         line-height:20px;
      }
      .partenaires{
         padding:10px;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         text-align:center;
         line-height:17px;
      }
      #boxe_defil {
         position:relative;
         height:31px;
         overflow:hidden;
      }
      #defile {
         position:absolute;
         margin-top:1px;
         background-color:transparent;
      }
      .credits{
         font-size:10px;
         padding:0 20px;
      }


Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et collez-le dans la zone.
Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montez" />      
<div class="PA">
        
 <h1>
 Namaste {USERNAME}
 </h1>
        
 <div class="inline PA-Gauche">
            
 <h2>
 Contexte
 </h2>
            
 <div class="contexte">
               En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine. Ses nombreuses pattes, lamentablement grêles par comparaison avec la corpulence qu’il avait par ailleurs, grouillaient désespérément sous ses yeux. « Qu’est-ce qui m’est arrivé ? » pensa-t-il. Ce n’était pas un rêve.            
 </div>
            
 <div class="credits">
               ©️ PA codée par Cheshire Cat de <a href="http://epicode.bbactif.com/">Epicode</a> et <a href="http://www.never-utopia.com">N-U</a><br />            
 </div>
        
 </div>
        
 <div class="inline PA-Droite">
            
 <div class="inline staff-votes">
              
 <h2>
 Staff
 </h2>
              
 <div class="staff">
                  
 <div class="infobulle inline">
                     <img alt="Pseudo" src="https://i37.servimg.com/u/f37/19/61/08/98/avamoi10.jpg" />                    
 <div>
                        Alrun<br />                        Fondatrice<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
 </div>
                  
 </div>
                  
 <div class="infobulle inline">
                     <img alt="Pseudo" src="http://img11.hostingpics.net/pics/675085toto.png" />                    
 <div>
                        Tomgoku<br />                        Fondateur<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
 </div>
                  
 </div>
              
 </div>
              
 <h2>
 Top-sites
 </h2>
              
 <div class="votes">
                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>              
 </div>
            
 </div>
            
 <div class="inline">
              
 <h2 class="">
 Nouveautés
 </h2>
              
 <div class="nouveautes">
               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />              
 </div>
            
 </div>
            
 <h2>
 Partenaires
 </h2>
            
 <div class="partenaires">
              
 <div id="boxe_defil">
                  
 <div id="defile">
                     <a href="http://feminin-pluriel.discutland.net/"><img title="Féminin Pluriel" alt="Féminin Pluriel" src="http://img110.xooimage.com/files/d/b/6/logo-5185e32.gif" /></a>                     <a href="http://www.ouaf-ouaf-pub.com/"><img title="Ouaf Ouaf Pub" alt="Ouaf Ouaf Pub" src="http://image.noelshack.com/fichiers/2016/42/1476784253-oop-kit88.gif" /></a>                     <a href="http://voyances-ombeline.forumgratuit.be/"><img title="Au delà des voyances" alt="Au delà des voyances" src="http://i18.servimg.com/u/f18/11/27/81/85/logo_811.png" /></a>                     <a href="http://dream-pub.forumactif.fr/"><img title="Dream Pub" alt="Dream Pub" src="http://i68.tinypic.com/2n9hnrc.jpg" /></a>                     <a href="http://lecture-publicites.forumactif.com/"><img title="Lecture et publicités" alt="Lecture et publicités" src="https://i37.servimg.com/u/f37/19/58/81/65/logo_810.png" /></a>                  
 </div>
              
 </div>
               <script type="text/javascript">
               var defile;// l'element a deplacer
               var psinit = 480; // position horizontale de depart
               var pscrnt = psinit;      
               function texteDefile() {
                  if (!defile) defile = document.getElementById('defile');
                  if (defile) {
                     if(pscrnt < ( - defile.offsetWidth) ){
                        pscrnt = psinit;
                           } else {
                     pscrnt+= -1; // pixel par deplacement
                  }
                     defile.style.left = pscrnt+"px";
                  }
               }
               window.setInterval("texteDefile()",20); // delai de deplacement
               </script>            
 </div>
        
 </div>
      
</div>


Vous avez le droit de poster pour dire un p'tit "merci", ça fait toujours plaisir ! Very Happy

IceCreamMaster

Fiche de RP beige simple - Dim 12 Fév 2017 - 0:00



Fiche de RP beige



C'est ma toute première fiche :3

Le code est en hide. Aperçu :3

Marie

Affichage liste de membres en flip Card - Mer 8 Fév 2017 - 22:45


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour/ Bonsoir!

Alors, je viens vous proposer un petit LS faite de mes propres mains! Je l'appelle le "Flip Card Member List". Bon il existe surement mais j'ai la flemme de trouver un nom original donc voilà! Puis, si ça vous convient pas c'est la même! Razz Bon, je charriais et c'était entièrement ironique!

Affichage : Flip - Affichage en survol :Backflip! - Lien d'un forum test : Ici Version du forum : PHPBB2



Template memberlist_body:

Code:
<form action="{S_MODE_ACTION}" method="get">
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
      <tr>
          <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
      </tr>
      <tr>
          <td class="row1">
          <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
            <tr>
                <td width="100%">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />     
                {L_SELECT_SORT_METHOD} {S_MODE_SELECT}     
                {L_ORDER} {S_ORDER_SELECT}     
                {S_HIDDEN_SID}
                <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
            </tr>
          </table>
          </td>
      </tr>
    </table>
    </form>
   
    <!-- BEGIN memberrow -->
     
          <div class="memberlist"><div class="flipa"><div class="flipb"><div class="flipping">
                      <div class="backflip"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
                      <div class="sousavatar"><div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
                        <div class="stat_member"> Ce membre nous a rejoint le {memberrow.JOINED}. <br/><br/>Sa dernière visite est {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Boîte à mp:{memberrow.PM_IMG}{memberrow.WWW_IMG}</div></div></div></div></div></div>
                    </div>
      <!-- END memberrow -->
      <!-- BEGIN switch_no_user -->
     
      <!-- END switch_no_user -->
   
        <br/><div class="copyright">Codé par Allhyka pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></div>
   
    <!-- BEGIN switch_pagination -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
          <td><span class="nav">{PAGE_NUMBER}</span></td>
          <td align="right"><span class="nav">{PAGINATION}</span></td>
      </tr>
    </table>
    <br />
    <!-- END switch_pagination -->




Le CSS:

Code:

/**** CODER PAR MARIE POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

/**** AFFICHAGE MEMBRE LISTE****/

.memberlist {
display:inline-block;
vertical-align:top;
margin-bottom: 15px;
margin-right: 15px;
}

 /*** FORMAT DE L'IMAGE DE L'AVATAR ***/
.avatar_member_list img{
  width: 100px;/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
  height: 160px;
}


/*** L'ANIMATION FLIP CARD ***/
.flipa {
  width: 100px; /** les tailles doivent être le même format que l'image de l'avatar! **/
  height: 160px;
  overflow: hidden;
  background-color: #D0D7D2;
  border: 2px outset black; /**** La bordure autour ***/
  box-shadow: 10px 10px 2px 0px #5E5E5E;
}

.flipb {
  width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
  height: 160px;
  perspective:1000;
  box-shadow: 2px 2px #999696;
}

.flipping {
  transform-style:preserve-3d;
  transition: all 1.2s ease-in-out;
  box-shadow: 2px 2px #999696;
}

.flipb:hover .flipping {
 transform: rotateY(180deg); /*** Le sens du flip***/
}

.backflip {
  width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
  height: 160px;
  box-shadow: 3px 3px 0px #999696;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: all 1.2s ease-in-out;
}

/*** DERRIERE L'AVATAR ***/

.sousavatar {
  width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
  height: 160px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 2px 2px #999696;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 1.2s ease-in-out;
  backface-visibility: hidden;
  position: absolute;
  overflow: auto;
}

.pseudo_member {
 
 font-family: 'Playball', cursive; /**L'écriture**/
  text-align: center;
  color: #000;
  line-height: 100%;
  font-size: 16px;
  text-transform: uppercase;
}

.stat_member {
  font-family: georgia; /**L'écriture**/
  font-size: 10px;
  color: #000;
  text-align: left;
 }

.groups {
  font-family: arial; /**L'écriture**/
  text-align: center;
  font-size: 7px;
  color: #000;
  line-height: 100%;
  text-transform: uppercase;
  margin-bottom: 5px;
  border-bottom:1px solid #000;
}


.flipb:hover .sousavatar {
  opacity: 1;
}

.copyright {
font-size: 10px;
text-align: right;
font-family: georgia;
}


Pour tout problème ou question, il suffira de poster un petit sujet là --> Problème avec mon code <--- Je viendrai vous aider avec plaisir ! :)


Voilà!

J'espère que ce LS vous aura plus!

A bientôt pour d'autre LS! :wesh:

Littleelda

Contenue rp style cerisier - Ven 3 Fév 2017 - 21:35



Fiche de RP cerisier



Bonjour,
voici mon premier libre service, j'espère qu'il vous plaira.

Deux trois choses à savoir avant :

- la taille (balise "width") est en pourcentage afin de s'adapter sur normalement tout les forums et je l'ai fixé à 80% mais vous pouvez la diminuer ou la mettre à 100% si vous préférez (pensez à changer celle de la zone de texte aussi).
- Pour l'image des cerisiers j'ai mis une image de 700 px de large afin qu'elle convienne au plus de forums possible. Vous pouvez la retoucher si nécessaire.

Voilà, j'espère qu'elle sera simple et facile d'accès. =)

Aperçu photo:


Aperçu tel quel:





Edit : merci pour l'ajout de balise et pour le coup de main, j'ai eu un trou. je viens de le mettre à jour, j'espère que ça plaira =)


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 4:28