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.


114 résultats trouvés pour phpBB2

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 phpbb2 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 phpbb2 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 phpbb2 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 phpbb2 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 !

Comment personnaliser l'apparence de la chatbox - Mar 11 Avr 2017 - 22:06



Comment personnaliser l'apparence de la chatbox



Bonjour !

Nous avions précédemment une tonne de petits tutoriels qui donnaient des trucs sur la chatbox et qui, très souvent, se répétaient. Du coup, ce tutoriel a été fait pour but d'être plus complet et de rassembler en un endroit la majorité astuces.

Je vous réfère quand même à plusieurs astuces intéressantes :
- Styliser les messages de connexion / déconnexion (CSS)
- Empêcher les soucis des messages dans la Chatbox ForumActif

Tout les codes donnés ci-bas se mettent dans la feuille de style CSS.




Le bloc de la chatbox


Voilà le bloc qui contient toute la chatbox :
Code:
/*Contient toute la CB*/
body.chatbox {
}



En-tête de la chatbox


Voilà l'en-tête de la chat-box :
Code:
/*Barre de titre*/
#chatbox_header .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 30px;
}

/*Titre normal */
#chatbox_header .catBottom .cattitle {
}
/*Titre normal au survol*/
#chatbox_header .catBottom .cattitle:hover {
}

/*Liens de droite de la barre de titre*/
#chatbox_header .catBottom .chatbox-options a {
}
/*Liens de droite de la barre de titre au survol*/
#chatbox_header .catBottom .chatbox-options a:hover {
}



Pour remplacer le texte dans l'en-tête de la chatbox :
Code:
/*Pour cacher le titre normal*/
#chatbox_header .cattitle strong {
  font-size: 0px;
}
/*Titre Personnalisé*/
#chatbox_header .cattitle:before {
  content: "NOM"; /* Modifiez NOM par le titre que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
  font-size: 0;
}
/*Lien pour accéder aux archives Personnalisé*/
#chatbox_option_with_archives a:before {
  content: "HISTORIQUE"; /* Modifiez HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour sortir des archives normal*/
#chatbox_option_without_archives a {
  font-size: 0px;
}
/*Lien pour sortir des archives Personnalisé*/
#chatbox_option_without_archives a:before {
  content: "QUITTER HISTORIQUE"; /* Modifiez QUITTER HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la connexion*/
#chatbox_option_co strong {
  font-size: 0px;
}
/*Lien de la connexion Personnalisé*/
#chatbox_option_co strong:before {
  content: "ENTRER SUR LA CB"; /* Modifiez ENTRER SUR LA CB par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la déconnexion*/
#chatbox_option_disco {
  font-size: 0px;
}
/*Lien de la déconnexion Personnalisé*/
#chatbox_option_disco:before {
  content: "QUITTER LA CB"; /* Modifiez QUITTER LA CB par ce que vous désirez */
  font-size: 12px;
}





La liste des membres de la chatbox


Voilà la liste des membres de la chat-box :
Code:
/*Bloc de la liste des membres*/
#chatbox_members {
  background-color: transparent; /*Enlève couleur de fond*/
  border-right: 1px solid #000; /*Bordure entre la liste des membres et les messages*/
}

/*Ligne de titre des membres en ligne*/
#chatbox_members .online {
}
/*Liste qui contient les membres en ligne*/
#chatbox_members .online-users {
}
/*Ligne du nom du membre en ligne*/
#chatbox_members .online-users li {
}

/*Ligne de titre des membres absents*/
#chatbox_members .away {
}
/*Liste qui contient les membres absents*/
#chatbox_members .away-users {
}
/*Ligne du nom du membre absent*/
#chatbox_members .away-users li {
}
/* Menu au clic droit des pseudos */
#chatbox_contextmenu {
}



Pour remplacer le texte de "En ligne" et de "Absents" dans la liste des membres
Code:
/*Pour cacher le titre des membres en ligne*/
#chatbox_members .online {
  font-size: 0px;
}
/*Titre des membres en ligne personnalisé*/
#chatbox_members .online:before {
  content: "MEMBRES ACTIFS"; /* Modifiez MEMBRES ACTIFS par ce que vous désirez */
  font-size: 12px;
  color: green; /*Couleur de la police*/
}

/*Pour cacher le titre des membres absents*/
#chatbox_members .away {
  font-size: 0px;
}
/*Titre des membres absents personnalisé*/
#chatbox_members .away:before {
  content: "PROIES DE TIMMY"; /* Modifiez PROIES DE TIMMY par ce que vous désirez */
  font-size: 12px;
  color: darkred; /*Couleur de la police*/
}





L'intérieur de la chatbox où il y a les messages


Voilà l'intérieur où il y a les messages :
Code:
/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
}

/*Lignes des message impairs*/
#chatbox .chatbox_row_1 {
  margin: 0px;
}
/*Lignes de messages pairs*/
#chatbox .chatbox_row_2 {
  margin: 0px;
}

/*Empêcher le bug des textes trop longs*/
#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

/* Mise en forme de la date */
#chatbox .date-and-time {
}

/*Bloc du pseudo du membre incluant le @ des modos et admins*/
#chatbox .user {
}
/*Pseudo du membre*/
#chatbox .chatbox-message-username {
}

/*Le message du membre*/
#chatbox .msg {
}



Les avatars de la chatbox :
Code:
/*Bloc avatar du membre*/
#chatbox .cb-avatar {
  padding: 1px!important; /*Padding*/
  border: 1px solid #d5d5d5!important; /*Bordure*/
  width:30px!important; /*Largeur*/
  height:30px!important; /*Hauteur*/
  overflow:hidden; /*Cache ce qui dépasse*/
  box-shadow: 0 2px 2px rgba(0,0,0,0.1)!important; /*Ombre du bloc*/
  transform: translateZ(0); /* empeche bug Chrome */
}
/*Avatar du membre*/
#chatbox .cb-avatar > img {
  width:30px!important;
  height:30px!important;
}





Barre de bas du forum


Voilà la barre du bas du forum :
Code:
/*Pour arranger la hauteur de la barre du bas*/
#chatbox_footer {
  height: 29px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 29px;
}

/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
}

/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
  background-color: pink;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
}

/*Texte avant le message*/
#chatbox_footer label[for="message"] {
}
/*Champ texte pour le message*/
#chatbox_footer #message {
}
/*Bouton pour envoyer le message*/
#chatbox_footer #submit_button {
}





C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Invité

Chatbox personnalisée kaki - Mer 1 Mar 2017 - 23:32

{#}css{/#} {#}css3{/#} {#}chatbox{/#} {#}auteur_Shaneliae{/#} {#}phpBB2{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

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 phpbb2 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 !

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:

Système de profil à 2 personnages qui change selon la catégorie - Mer 21 Déc 2016 - 22:12



Système de profil à 2 personnages qui change selon la catégorie


Salut !

Suite à la demande de 24nono38, j'ai conçu un code qui permet l'affichage de 2 personnages différent selon la catégorie où un message est posté.

Je m'explique :
Disons que vous avez un forum rpg avec section "monde des rêves" et "monde réel" et que vos joueurs incarnent un personnage différent selon le monde où ils sont. Vous voulez que le profil de vos joueurs affichent les données du personnage qu'ils jouent selon la catégorie où ils jouent.
Il vous suffira de créer des champs de profil où les joueurs mettront les informations du 2e personnage, soit les champs généraux comme âge, humeur, métier ainsi que des champs plus spéciaux comme rang, url de l'avatar, nom du 2e personnage.
Ensuite, le javascript s'occupera de faire apparaître les bons champs et les bonnes informations selon la catégorie où ils postent.
Utile, non?

Pour voir l'aperçu du premier profil : cliquez ici.
Pour voir l'aperçu du 2e profil : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer le profil dans le template.
  • Puis, nous allons mettre en forme le profil à l'aide du CSS.
  • Ensuite, nous allons créer les champs du 2e personnage dans le profil.
  • Enfin, nous allons installer et modifier le javascript qui fera fonctionner le tout.


- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





1. Le profil (Template Viewtopic_Body)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Viewtopic_Body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Vous devez trouver ce bout de code (lignes 61 à 67) :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>   


Et le remplacer par ceci :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                <span class="profil_navig">{NAV_CAT_DESC_SECOND}</span>
            </span>
      </td>   



Puis, vous devez trouver ceci (lignes 139 à 150) :
Code:
      <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>


Et le remplacer par ceci :
Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div class="postdetails poster-profile">
              <div class="profil_utilisateur">
                <div class="name">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="profil_pseudo">
                    <strong>{postrow.displayed.POSTER_NAME}</strong>
                  </div>
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profil_rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="profil_contact">
                  <!-- BEGIN contact_field -->
                  {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.ONLINE_IMG}
                </div>
                <div class="profil_infos">
                  <div class="profil_champs">
                    <!-- BEGIN profile_field -->
                    <span class="profil_champ">
                      {postrow.displayed.profile_field.LABEL} <span>{postrow.displayed.profile_field.CONTENT}</span>
                    </span>
                    <!-- END profile_field -->
                  </div>
                </div>
              </div>
        </div>
      </td>



Enfin, vous devez trouvez ceci (lignes 253 à 261) :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>


Et le remplacer par cela :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
               </td>
            </tr>
         </table>
      </td>





2. Mise en forme (CSS)



Si vous regardez votre profil, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre 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 :
Code:

/*Bloc profil*/
.profil_utilisateur {
  width: 200px;
  margin: auto;
  position: relative;
}

/*Pseudo*/
.profil_pseudo {
  border-bottom: 1px solid #635f5f;
  padding: 5px 2px 5px 2px;
  font-size: 20px;
  margin: auto;
  text-align: center;
}

/*Bloc avatar*/
.profil_avatar {
  margin: 5px auto;
  box-shadow: 0px 0px 5px #635f5f;
  width: 200px;
  height: 320px;
  background: #ffffff;
}
/*Image avatar*/
.profil_avatar img {
  width: 200px;
  height: 320px;
}

/*Rang*/
.profil_rang {
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
  padding: 3px;
  font-size: 20px;
  margin: 5px auto;
  text-align: center;
  color: #41506f;
  font-family: 'Verdana';
  font-size: 14px;
  font-style: italic;
}

/*Liens sous le rang*/
.profil_contact {
  text-align: center;
}

/*Bloc qui contient les infos*/
.profil_infos {
  margin: 10px auto 5px auto;
  width: 190px;
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
}
.profil_champ {
  color: #6f6f6f;
  font-size: 11px;
  display: none;
}
.profil_champ .label {
  color: #000000!important;
}





3. Créer les champs du 2e personnage (profil)



Maintenant, il faut créer les champs qui vont correspondrent aux informations du 2e personnage.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > UTILISATEURS & GROUPES
> > > UTILISATEURS
> > > > PROFILS

Puis vous créez les champs. Je suppose que je n'ai pas besoin de vous expliquer comment faire? La seule chose que je vous conseille, c'est de les mettre en ordre. À l'exception du rang, de l'image de l'avatar et du pseudo du 2e personnage, les informations s'affichent dans l'ordre où vous les mettez.

Voilà mon résultat si cela peut vous aider :
Spoiler:





4. Faire fonctionner le système de double profil (Javascript)



Enfin, on passe au javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de double profil".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){
   
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/
      var champnamespecial = [
        "Je suis né(e) le (2e perso) : ",
        "Age du personnage (2e perso) : ",
        "Coté coeur (2e perso) : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis (2e perso) : ",
        "Métier (2e perso) : ",
        "Avatar (2e perso) : ",
        "Crédit kit (2e perso) : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation (2e perso) : ",
        "Emploi : ",
        "Humeur (2e perso) : ",
        "Let's rock (2e perso) : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/
      var champnamespecialvrai = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Variables*/
      var champs;
      var champ;
      var champnormal;
      var champspecial;
      var champtext;
      var nouvellevaleur;
      var principal;
      var pseudomachin;
      var cate = $('.profil_navig:first').find('a:first').attr('href');

      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";
   
      /*Nom du champ du l'image de l'avatar du profil spécial*/
      var avatar2 = "Image avatar (2e perso) : ";
   
      /*Nom du champ du Nom du personnage du profil spécial*/
      var pseudo2 = "Prénom et Nom (2e perso) : ";
   
      /*Nom du champ du rang du personnage du profil spécial*/
      var rang2 = "Rang (2e perso) : ";
   
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      if (cate == catespecial) {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/
      else {
        $('.profil_utilisateur').each(function(){
          champs = $(this).find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            for (z = 1; z < champnamenormal.length; z++) {
              champnormal = champnamenormal[z];
              if (champ.find('span.label:first').text() == champnormal) {
                champ.css('display', 'block');
              }
            }
          }
        });
      }
    });


Il y a 4 choses à modifier dans ce javascript.

La première section correspond aux champs du profil normal qui apparaît dans presque toutes les catégories. Il s'agit de cette section :
Code:
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];



Même chose pour la section /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/ qui contient les champs du profil spécial tels que vous les avez créés dans le profil.


La section /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/ contient les noms des champs du profil spécial tels que vous voulez qu'ils apparaîssent dans le profil. Les champs doivent être dans le même ordre que la section précédente.


Enfin, vous devez remplacer le URL DE LA CATÉGORIE SPÉCIALE de ce bout de code par l'url de votre propre catégorie.
Code:
      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";


Pour cela, allez sur la catégorie où le profil spécial doit s'afficher et regarder l'url de la page. Cela vous donnera quelque chose comme "https://www.never-utopia.com/c31-les-ateliers". Vous gardez seulement le / et ce qu'il y après, comme "/c31-les-ateliers" et c'est ce que vous utilisez pour remplacer le URL DE LA CATÉGORIE SPÉCIALE.




Si jamais vous voulez que le profil spécial s'affiche dans plus qu'une catégorie spécifique, vous ajoutez ce bout de code pour chaque forum/catégorie supplémentaire juste avant le "/*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/" :
Code:
/*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      else if (cate == "URL DE CATÉGORIE") {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }


Il vous suffira de modifier le "URL DE CATÉGORIE" par l'url de la catégorie où vous voulez que le profil spécial s'affiche.




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 voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Nemalus

Catégorie "Winds of Winter" - Lun 14 Nov 2016 - 10:22




Catégories réalisées suite à la demande de Ailes.
Les couleurs sont modifiables, merci de ne pas retirer le crédit.

Voici un aperçu :

lien direct : www

Version forum : testé sur phpbb2

Dimensions des images :
Les images de description doivent être si possible au format 250px x 100px;
Les images "Pas de nouveaux messages ; Nouveaux messages ; etc" doivent être en 35px X 35px

Pour ajouter des images de description : www
Pour activer les avatars : www


Remplacer l'intégralité du template index-box par :

Code:
<table width="900px" border="0" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
        </td>
        <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
        </td>
        </tr>
     
        </table><!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="TitreCategorie"><h2>{catrow.tablehead.L_FORUM}</h2></div>
        <div class="BlocCategorie"><!-- END tablehead -->

        <!-- BEGIN cathead -->
        <!-- END cathead -->
     
        <!-- BEGIN forumrow -->
        <div class="BlocForum"><div class="TitreForum"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="ImageForum" /><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="Forum"><div class="DescriptionForum">{catrow.forumrow.FORUM_DESC}</div><div class="BlocImageDescription"><div class="SousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="DernierMessage"><div class="NombreSetM">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div><hr /><table><tr><td><div class="AvatarForum"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></td><td>{catrow.forumrow.LAST_POST}</td></tr></table></div></div></div>
        <!-- END forumrow -->
     
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </div>
        <div class="BasCategorie"></div>
        <!-- END tablefoot --><!-- END catrow -->



Dans la feuille de style (CSS) ajouter le code :

Code:
/* BLOC TITRE CATEGORIE */
.TitreCategorie {
margin:5px auto 0; width:900px; padding:15px 0;
background:#D07F7F; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.TitreCategorie h2{
margin:0; font-size:32px; text-align:center;
color:white; font-family:Arial; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.BlocCategorie {
margin:auto; width:900px; padding:25px 0 15px;
background:#D7D5D5; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.BasCategorie {
margin:auto; margin-bottom:10px; width:900px; height:35px;
background:#D07F7F; /* MODIFIABLE */
}
/* BLOC FORUM */
.BlocForum{
width:850px; margin:auto; text-align:center;
}
/* BLOC TITRE FORUM */
.TitreForum {
margin:0 auto 5px;
font-size:25px;
width:805px; padding:5px 25px 5px 0;
text-align:left; /* MODIFIABLE */
}
/* TITRE FORUM */
.TitreForum a{
color:black !important; /* MODIFIABLE */
}
/* BLOC FORUM */
.Forum {
margin:auto; margin-bottom:10px;
width:830px; height:100px; overflow:hidden;
}
/* ICÔNES FORUM */
.ImageForum{
display:inline-block; vertical-align:top;
width:35px; height:35px;
margin-top:-18px; margin-left:-20px;
}
/* DESCRIPTION FORUM */
.DescriptionForum {
display:inline-block; vertical-align:top;
width:300px; height:90px; padding:5px; overflow:auto;
font-size:10px; text-align:justify;
background:#C6B5CA; color:black; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.DescriptionForum img{
position:absolute; margin-top:-5px; margin-left:310px;
width:250px; height:100px;
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
.BlocImageDescription {
display:inline-block; vertical-align:top;
width:250px; height:100px;
border-left:5px solid; border-right:5px solid;
background:white; border-color:#D7D5D5 !important; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.SousForums {
position:relative; z-index:2;
width:250px; height:90px; padding:5px 0; overflow:auto;
background:#42A8AE; /* MODIFIABLE */
color:rgba(0,0,0,0); line-height:6px;
opacity:0; transition:opacity 0.55s ease-in-out; -webkit-transition:opacity 0.55s ease-in-out;
}
.SousForums:hover {
opacity:1;
}
/* LIEN SOUS-FORUM */
.SousForums a{
display:block; margin:auto;
width:95%; line-height:16px;
background:white; color:#D07F7F !important; text-transform:uppercase; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.DernierMessage {
display:inline-block; vertical-align:top;
width:250px; height:90px; padding:5px;
text-align:center; font-size:10px; text-transform:uppercase;
background:#C6B5CA; color:black; /* MODIFIABLE */
margin-bottom:-50px;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.NombreSetM {
text-transform:none;
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.AvatarForum {
display:inline-block; vertical-align:top;
width:50px; height:50px; overflow:hidden;
background:#ccc; /* MODIFIABLE */
}
.AvatarForum img {
width:50px; filter:grayscale(1); -webkit-filter:grayscale(1);
}



Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Onyx

Qeel Carrousel (4 blocs) - css & html - Ven 30 Sep 2016 - 1:16



Qeel Carrousel



Salut !

Voici un petit LS de Qeel que j'ai fait pour la demande de P'tit loup. Le code vient de cette cette PA (page d'accueil) de Okhmhaka qui a été adaptée pour un qeel.

Pour voir l'aperçu du bloc de devant (bloc 1): cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) : cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) au survol d'une image de groupe : cliquez ici.
Pour voir l'aperçu du bloc de gauche (bloc 3) : cliquez ici.
Pour voir l'aperçu du bloc de gauche (3) au survol de l'image : cliquez ici.
Pour voir l'aperçu du bloc de derrière (4) : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  • Puis, nous allons le mettre en forme à l'aide du CSS.


La largeur du Qeel est de 850 pixels et la hauteur 450px.
- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





1. Corps du qeel (Template Index_Body)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 220 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
Code:
<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
<div id="qeeltarget1">
  <div id="qeeltarget2">
    <div id="qeeltarget3">
      <div id="qeeltarget4">
        <div id="qeelespace_top">
          <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
        </div>
        <div id="qeelespace_carousel">
         
          <!-- ZONE 1 - DEFAUT -->
          <div id="qeelcarousel_1">
            <a href="#qeeltarget1" class="qeellien1"></a>
            <div class="qeelcarousel_1_content">
              <div class="qeel_subtitle">Statistiques</div>
              <div class="qeel_bloc">
                Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
              </div>
            </div>
          </div>
         
          <!-- ZONE 2 -->
          <div id="qeelcarousel_2">
            <a href="#qeeltarget2" class="qeellien2"></a>
            <div class="qeelcarousel_2_content">
              <div class="qeel_subtitle">Groupes</div>
              <div class="qeel_bloc">
                <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                  <a href="#">NOM DU GROUPE 1</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                  <a href="#">NOM DU GROUPE 2</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                  <a href="#">NOM DU GROUPE 3</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                  <a href="#">NOM DU GROUPE 4</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>
              </div>
              <div class="qeel_bloc">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 1" alt="Image du groupe 1" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 1
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 2" alt="Image du groupe 2" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 2
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 3" alt="Image du groupe 3" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 3
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 4" alt="Image du groupe 4" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 4
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
         
          <!-- ZONE 3 -->
          <div id="qeelcarousel_3">
            <a href="#qeeltarget3" class="qeellien3"></a>
            <div class="qeelcarousel_3_content">
              <div class="qeel_subtitle">Anniversaires</div>
              <div class="qeel_bloc">
                <table id="qeelbirthday" cellspacing="0">
                  {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}
                </table>
              </div>
              <div class="qeel_anniv_bas">
                <img class="qeel_img_anniv" src="URL IMAGE SOUS LES ANNIVERSAIRES" alt="machin" />
                <div class="qeel_anniv_texte">
                  Codage du Qeel par Okhmhaka et Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
                </div>
              </div>
            </div>
          </div>
         
          <!-- ZONE 4 -->
          <div id="qeelcarousel_4">
            <a href="#qeeltarget4" class="qeellien4"></a>
            <div class="qeelcarousel_4_content">
              <div class="qeel_subtitle">Partenaires</div>
              <div class="qeel_bloc">
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 1" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 2" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 3" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 4" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 5" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 6" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 7" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 8" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 9" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 10" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 11" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 12" /></a>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
</script>
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>


Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par trois manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe. Enfin, on modifie la hauteur des groupes.

Les noms des groupes ressemblent à ceci :
Code:
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>


Quant aux descriptions des groupes, elles correspondent à ceci :
Code:
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>


Il suffit de changer le 5 à tous les endroits où il y en a un par un nouveau chiffre.

Pour la hauteur des groupes, il faut se rendre à cet endroit dans le CSS (que nous allons ajouter à la prochaine étape) :
Code:
/*Nom des groupes*/
.qeelonglet {
  display: block;
  font-size: 18px;
  height: 38px;
  padding: 15px 3px 0px 3px;
  margin-bottom: 1px;
  text-align: center;
  background: #E9E8E8;
  font-weight: bold;
  text-transform: uppercase;
}


Et vous devez modifier le "height" et le "padding" pour arriver à une hauteur des onglets qui vous convient.




2. Mise en forme (CSS)



Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à 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 :
Code:
/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/





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 voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Nemalus

Catégories en 4 cases - Dim 28 Aoû 2016 - 18:05




Catégories réalisées suite à la demande de .Loumpia.
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait sous phpBB2.

Voici un aperçu :

lien direct : www

Remplacer l'intégralité du template index-box par :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><table width="100%" border="0" cellspacing="7" cellpadding="5" class="categories">
  <!-- BEGIN cathead -->
  <tr>
      <td class="{catrow.cathead.CLASS_CAT}" colspan="3" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <td class="newpost" align="center" valign="middle">
        <span class="lastpost" class="gensmall">{catrow.forumrow.LAST_POST}<br/><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span></span><div class="details" class="gensmall"></div>
                          </td>                <td align="center" valign="middle">
            <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                </td>
      <td valign="top" class="descriptions">
        <div class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
  <br/>
        <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}♠ </center>
       
              </td>
          <td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Dans la feuille de style (CSS) ajouter le code :
Code:
.categories {
  margin: auto;
  width: 880px;
  background:transparent;
  }
  table.categories td a {
  color:#4861A3;
  transition:color linear 0.2s;
  -webkit-transition:color linear 0.2s;
  }
  table.categories td a:hover {
  color:#6274a3;
  transition:color linear 0.2s;
  -webkit-transition:color linear 0.2s;
  }
  table.categories td.newpost {
  border-radius:30px 30px 30px 30px;
  padding-left:10px;
  background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
  border: 3px solid #EA9EE0;
  height:105px;
  width:200px;
  }
  table.categories td span.lastpost {
  height:56px;
  width:127px;
  overflow:visible;
  }
  table.categories td.descriptions {
  border-radius:40px 40px 40px 40px;
  padding-right:10px;
  width:450px;
  background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
  border: 3px solid #EA9EE0;
  height:105px;
  }
  table.categories div.description {
  padding:5px;
  margin:5px 0px 5px 0px;
  overflow:auto;
  height:40px;
  text-align:justify;
  }
  table.categories div.forumlink {
  text-align:center;
  }
  .categories div.forumlink a{
  font-size:20px;
  color:pink;
  font-family:'Cookie';
  }
  table.categories div.details {
  text-align:center;
  }
  table.categories div.lastpost-avatar {
  height:105px;
  width:75px;
  background-image:url('http://24.media.tumblr.com/tumblr_m8b149g05e1r6uwfxo1_250.png');
  border: 3px solid #EA9EE0;
  }
  table.categories div.lastpost-avatar img {
  height:105px;
  width:75px;
  padding: auto;
  margin: auto;
  }




Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Nemalus

Catégories vertes - Dim 28 Aoû 2016 - 17:58




Catégories réalisées suite à la demande de Moro-PM.
Les couleurs sont modifiables, merci de me créditer si utilisation du code. Le code a été fait pour phpCC2

Voici un aperçu :

lien direct : www

Remplacer l'intégralité du template index-box par :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div align="center"><div class="titreCAT">{catrow.tablehead.L_FORUM}</div></div>
    <br clear="all" /><!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
    
<div class="glop"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> {catrow.forumrow.TOPICS} Topics et {catrow.forumrow.POSTS} Messages<br/><br/>
  <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="sousforum"><div align="center">{catrow.forumrow.LAST_POST}<br/><br/><div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div></div><div class="description">{catrow.forumrow.FORUM_DESC}<br/><br/><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}♠ </center></div></div>
    
    
    <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    
    <!-- BEGIN tablefoot -->
    <br clear="all" />
    <!-- END tablefoot --><!-- END catrow -->


Dans la feuille de style (CSS) ajouter le code :
Code:
/* TITRES CATEGORIES */
.titreCAT{
width:450px; height:15px; text-align:center; margin:0 5px; display:inline-block;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); /* MODIFIABLE */
}
.titreCAT h2{
font-size:30px; text-transform:uppercase; letter-spacing:3px;margin-top: -20px;
font-family:Pacifico; color:#BF6161; text-shadow:1px 1px 0px black; /* MODIFIABLE */
}
/* BLOC DESCRIPTION + SOUS-FORUMS */
.glop{
width:600px; margin:10px auto; padding:10px;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo9_r3_250.png'); box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* DESCRIPTIONS BLOC FORUMS */
.description {
margin-left: 5px;
width:350px; height:159px; padding:0px 5px; overflow:auto;
display:inline-block;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); 
font-size:11px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* IMAGES DESCRIPTIVES BLOC FORUMS */
.description img {
position:absolute; z-index:3; margin-left:-169px;
width:159px; height:159px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
/* SOUS-FORUMS */
.sousforum{
position:relative; z-index:5; display:inline-block;
padding:5px; width:149px; height:149px; overflow:auto; text-align:left;
background:#dfdfdf; /* MODIFIABLE */
opacity:0;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sousforum a{
color:white !important; /* MODIFIABLE */
}
.sousforum:hover {
opacity:1;
}




Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Nemalus

Qui est en ligne | Noir et blanc - Dim 28 Aoû 2016 - 0:53




Qui est en ligne réalisé suite à la demande de Cecile362.
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait avec la version de forum phpBB2

Voici un aperçu :

lien direct : www

Dans le template index-body, remplacer les lignes 173 à 221 par :
Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td>
<!-- TITRE -->
      <div class="titreQEEL">
        <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
      </div>
      <div class="QEEL">
<!-- 24H -->
        <div class="dernierQEEL"><table>{L_CONNECTED_MEMBERS}</table>
        </div>
        <div class="GroupeQEEL">
          <div id="groupe">
            <div class="h3">Les Groupes</div>
            <div class="ha">
              <div class="square d1"><span>INTJ</span></div>
              <div class="square d2"><span>INTP</span></div>
              <div class="square d3"><span>ENTJ</span></div>
              <div class="square d4" ><span>ENTP</span></div>
              <div class="square d5 "><span>INFJ</span></div>
              <div class="square d6"><span>INFP</span></div>
              <div class="square d7 "><span>ENFJ</span></div>
              <div class="square d8 "><span>ENFP</span></div>
              <div class="square d9"><span>ISTJ</span></div>
              <div class="square d10"><span>ISFJ</span></div>
              <div class="square d11"><span>ESTJ</span></div>
              <div class="square d12"><span>ESFJ</span></div>
              <div class="square d13"><span>ISTP</span></div>
              <div class="square d14"><span>ISFP</span></div>
              <div class="square d15"><span>ESTP</span></div>
              <div class="square d16 "><span>ESFP</span></div>
            </div>
          </div>
        </div>
<!-- MESSAGES / MEMBRES / CONNECTES / DERNIER INSCRIT -->
        <div class="boxQEEL">
  <!-- TOTAL UTILISATEURS CONNECTES -->
          <span id="UsersOnline">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">document.getElementById('UsersOnline').innerHTML=document.getElementById('UsersOnline').innerHTML.replace(/Il y a en tout/,"");</script>
          <div class="boxQEEL">
<!-- TOTAL MESSAGES -->
            <div class="TotalPosts">
              <span id="tPOSTS"><b>{TOTAL_POSTS}</b></span>
              <script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script> messages
            </div>
<!-- TOTAL MEMBRES -->
            <div class="TotalUsers">
              <span id="tUSERS"><b>{TOTAL_USERS}</b></span>
              <script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script> membres
            </div>
          </div>
<!-- MEMBRES CONNECTES -->
          <div class="online" id="onLINE">
            <table>{LOGGED_IN_USERS_LIST}</table>
          </div>
<!-- DERNIER UTILISATEUR ENREGISTRE -->
          <div class="lstQEEL">New Player :
            <span id="nUSER">{NEWEST_USER}</span>
            <script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
          </div>
          <div class="creditQEEL">CREDITS : QEEL réalisé par Nemalus</div>
        </div>
      </div>
      <div class="FinQEEL"></div>
    </td>
  </tr>
</table>
<!-- END disable_viewonline -->



Dans la feuille de style (CSS) ajouter le code :
Code:
/****************************************
   QEEL par Nemalus sur Never-Utopia
   (Amphibole sur Exquisite
    Nemalus sur Cap-RPG
    Andramas sur Somewhere)
*****************************************/
/* BLOC TITRE QEEL */
.titreQEEL {
margin:auto;
width:900px; height:55px; padding-top:40px;
background:#000;  /* MODIFIABLE */
font-family:Oswald; letter-spacing:2px; text-transform:uppercase; text-align:right; color:#fff;
}
/* TITRE QEEL */
.titreQEEL a{
font-size:40px; padding-right:35px;
color:white; text-shadow:1px 1px 0 #cad78e; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:900px; text-align:center; background:#fff; padding:12px 0;
}
/* 24H QEEL */
.dernierQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:200px; height:300px; padding:5px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; /* MODIFIABLE */
}
.dernierQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dernierQEEL .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}
/* Groupe QEEL */
.GroupeQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:250px; padding:5px;
font-size:12px; text-align:justify;
}
#groupe .h3{
  margin:-5px -5px 5px;
  color:black;
  font:20px oswald;
  text-transform:uppercase;
  padding:10px 0;
  border-bottom:3px solid #333;
}
#groupe .square span{
  font:8px arial narrow;
  text-transform:uppercase;
  letter-spacing:1px;
  background:#333;
  text-shadow:1px 1px 0px black;
  color:#efefef;
  display:block;
  width:50px;
  padding:4px 0;
  -webkit-transition:ease-in-out 0.5s;
  transition:ease-in-out 0.5s;
  position:relative;
  left:50px;
}
#groupe a{color:transparent;text-decoration:none;}
#groupe{text-align:center;width:250px;margin: 0 auto;background:rgba(0,0,0,0.05);padding:5px 5px 0;}
#groupe .square{
  width:50px;
  height:50px;
  box-sizing:border-box;
  padding-top:17px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
  margin-bottom:5px;
}
#groupe .square:nth-child(odd){
  margin-right:5px;
}
#groupe .square:hover span{
  left:0px;
}
/* COULEURS DES GROUPES */
#groupe .d1{background:#B891C4;}
#groupe .d2{background:#B36A8E;}
#groupe .d3{background:#80405C;}
#groupe .d4{background:#917277;}
#groupe .d5{background:#9AC59A;}
#groupe .d6{background:#ADC56B;}
#groupe .d7{background:#7F9D58;}
#groupe .d8{background:#698D4D;}
#groupe .d9{background:#90E7E5;}
#groupe .d10{background:#A7BCC7;}
#groupe .d11{background:#5CC7C8;}
#groupe .d12{background:#5DAFE6;}
#groupe .d13{background:#CB4C3B;}
#groupe .d14{background:#A20812;}
#groupe .d15{background:#E17257;}
#groupe .d16{background:#DD2B45;}

/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
}
/* TOTAL MESSAGES QEEL */
.TotalPosts {
margin-bottom:10px;
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.TotalUsers {
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.online {
display:inline-block; vertical-align:top; margin-left:10px;
width:235px; height:120px; padding:10px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; color:black; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
background:#dedede;; color:white; /* MODIFIABLE */
text-align:center; font-size:18px;
}
/* NOMBRE UTILISATEURS EN LIGNE */
#UsersOnline {
display:block; margin-top:10px;
width:385px; height:15px; padding:5px 0;
font-size:11px; text-align:center;
background:white; color:black; /* MODIFIABLE */
}
/* CREDITS */
.creditQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
color:black;font-family:Oswald;text-transform:Uppercase; text-align:left; /* MODIFIABLE */
text-align:center; font-size:18px; font-style:italic;text-shadow:1px 1px 0 #dedede;
}
/* BLOC FIN QEEL */
.FinQEEL {
margin:auto;
width:900px; height:35px; padding-top:40px;
background:#000;  /* MODIFIABLE */
}




Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Profil simple avec hover et feuille de rpg cachée - Mer 10 Aoû 2016 - 16:44



Bonjour, je viens vous proposer un profil à la bordure dorée, avec les informations qui apparaissent à la survol de l'avatar, comme ceci :

► Simple
► Au survol

De plus, la feuille de rpg est cachée et s'affiche/se referme quand vous cliquez sur "Ouvrir".

L'arrière plan sombre est celui de mon forum. L'avatar est en 200x400. Cela a été créé pour phpBB2.

Il suffit de se rendre dans le template viewtopic_body et de remplacer ceci :
Code:
      <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>


Par ceci :
Code:
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <div class="namePOST"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="imgrankPOST">{postrow.displayed.RANK_IMAGE}</div><div class="avaPOST"><div>{postrow.displayed.POSTER_RANK}<br/><br/><!-- BEGIN profile_field --><font style="color:white;">{postrow.displayed.profile_field.LABEL}</font> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div><p>{postrow.displayed.POSTER_AVATAR}</p></div><div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="openPOST">Ouvrir</div><div class="rpgPOST" style="display:none;">{postrow.displayed.POSTER_RPG}</div>
 </td>


Et le CSS :
Code:
/*****************PROFIL*****************/
/* PSEUDONYME SUJET */
.namePOST {
  font-family: 'Eagle Lake'; /**modifiable**/
  text-decoration:none;
  text-shadow: 0px 1px lightgrey;
text-transform:uppercase; text-align:center;
}
.namePOST a {
  text-decoration:none;}
/* AVATAR SUJET */
.avaPOST {
position:relative; z-index:5; width:200px; height:400px; overflow:hidden; border-radius:10px;
  border:2px groove DarkGoldenRod; /* MODIFIABLE */
}
.avaPOST p {
position:relative; z-index:3; margin:0;
}
.avaPOST:hover p{
z-index:-1; opacity:0;
}
/* INFORMATIONS JOUEUR SUJET */
.avaPOST div{
position:absolute;
width:190px; height:390px; padding:5px; overflow:auto;
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* IMAGE RANG SUJET */
.imgrankPOST {margin-top:-5px;
}
.imgrankPOST img{
max-height:400px;
}
/* OUVRIR FEUILLE DE PERSONNAGE SUJET */
.openPOST {
position:relative; z-index:10; margin:auto; margin-top:-15px;
cursor:pointer; width:175px; height:25px; color:rgba(0,0,0,0);
background:url(http://image.noelshack.com/fichiers/2016/31/1470580990-sans-titre-2.png);  /* IMAGE 175*25 */
}
/* FEUILLE DE PERSONNAGE SUJET */
.rpgPOST {
margin-top:-10px;
padding:08px 10px 10px; border-radius:0 0 15px 15px;
background:#191919; /* MODIFIABLE */
font-size:11px;
}


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Cheshire Cat

Chatbox personnalisée #1 par Cheshire Cat - Mer 6 Juil 2016 - 1:18


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


Coucou !
Me re-voici donc pour un nouveau dépôt de LS, une chatbox personnalisée et personnalisable :3

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.


Avec avatar:


Sans avatar:


Pour choisir si votre chatbox affiche les avatars des membres ou non, il faut faire Panneau d'administration > Modules > Chatbox > Configuration > Afficher les avatars des utilisateurs dans la chatbox

Version sans les avatars des membres

Code:
/* CHATBOX PERSONNALISEE */
.chatbox{
  border:none;
}

/* Couleur du texte par défaut (contextmenu / message + heure + liste des membres sans groupe) */
#chatbox, #chatbox_contextmenu, #chatbox_contextmenu a, #chatbox_members {
  color: #000!important;
}

/* Enlever image de fond par défaut */
.chatbox .catBottom { background: transparent; }
#chatbox_header{
  background:#b7a89f;
}
#chatbox_header strong{
  margin-left:10px;
  text-transform:uppercase;
}
#chatbox_header a{
  color: #FFF;
}

/* Liste des membres à droite */
#chatbox_members{
  width:181px;
  background:#e5d9d3;
  margin-bottom:-10px;
  border:none;
}
#chatbox_members .member-title{
  color:#FFF;
  padding:3px;
  margin-top:10px;
  margin-bottom:5px;
}

/* Menu au clic droit du pseudo à droite */
#chatbox_contextmenu{
  background:#FFF;
  font-size:15px;
}
/* Titre de la liste des membres (En ligne) */
#chatbox_members .online{ background:#80aa3e; }

/* Titre de la liste des membres (Hors ligne) */
#chatbox_members .away{ background:#a03a2e; }
/* Partie centrale de la chatbox */
#chatbox{
  background:#FFF;
  margin-bottom:-10px;
}
/* Fond des messages differents */
.chatbox_row_2{ background:#f4ece8!important; }
.chatbox_row_1{ background:transparent!important; }

#chatbox > p{
  margin:0; /* phpbb3 => enlever les marges par défaut */
  border:none!important;
}

/* Barre inférieure de la chatbox */
#chatbox_footer{
  background:#b7a89f;
  padding-bottom:4px;
}

/* Zone d'écriture du message de la chatbox */
.chatbox input{ border:1px solid #6f6660!important; }
#chatbox_footer #submit_button{
  padding-right:2px;
}



Version avec les avatars des membres
Il faut tout bêtement rajouter ce bout de code :)

Code:
/* Mise en forme de l'avatar du membre */
#chatbox .cb-avatar {
  padding:0!important;
  width:50px!important;
  height:50px!important;
  border-radius:50px!important;
  overflow:hidden!important;
  box-shadow: none!important;
  transform: translateZ(0); /* empeche bug Chrome */
}
#chatbox .cb-avatar > img {
  position:relative!important;
  top: -10px;
  width:50px!important;
  height:auto!important;
}

/* Mise en forme de la date */
#chatbox .date-and-time {
  display:inline-block;
  float:none!important;
  margin-left:2px!important;
  margin-top:2px!important;
  margin-bottom:3px!important;
  font-size:12px;
}

/* Mise en forme du pseudo du membre ayant poste */
#chatbox .user { float:left!important; }
#chatbox .user strong {font-size: 0;}
.chatbox-username.chatbox-message-username { font-size: 12px; }

Shoki

Menu latéral fixe [PhPBB2 - PhPBB3] - Jeu 30 Juin 2016 - 9:44



Hello !
Pour mon premier LS ici (oui, j'en fait peu, je ne partage que trèèèès rarement mes codes oui je suis radine Cool), j'ai décidé de frapper fort en vous codant un panneau latéral gris fixe ! Je recommande plutôt Mozilla Firefox pour l'utiliser, mais il fonctionne sous Chrome et Internet Explorer/Microsoft Edge (même si il y a un pas élégant espace). Et pour me faire pardonner de ce petit imprévu, ce code est adapté pour 2 versions de forums (Je suis trop forte je sais huhu) Cool.

   
Pour PhPBB2 et PhPBB3
Aperçu sous Mozilla Firefox : www (le fond rouge correspond à mon forum-test)
Aperçu sous Chrome & IE : www
En action


Les codes


Le CSS est à mettre dans Affichage > Couleurs > Feuille de style CSS
Vous devez avoir accès au compte fondateur pour pour accéder aux templates
Votre forum doit faire grand maximum 800 pixels de largeur

PhPBB2


CSS
Code:
/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
 position: fixed;
 top: 0;
 left: 0;
 width: 185px;
 height: 100%;
 background: grey;
 z-index: 200;
 padding: 5px;
 font-family: 'Verdana', sans-serif;
}
#panneau_lat h2 {
 font-size: 19pt;
 font-family: 'Georgia', serif;
 text-align: center;
 color: #FFF;
 margin-bottom: 3px;
 margin-top: 1px;
 font-variant: small-caps;
}
#panneau_lat h3 {
 font-size: 15pt;
 text-align: center;
 color: #FFF;
 margin-bottom: 0px;
 margin-top: 10px;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
 text-align: center;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
 font-size: 11px;
 color: #FFF;
}
.recherche {
 text-align: center;
 font-family: 'Georgia', serif;
 color: #FFF;
 font-size: 13px;
 font-variant: small-caps;
 margin-top: 3px;
}
.boite {
 width: 175px;
 height: 120px;
 background: #ccc;
 overflow: auto;
 margin: auto;
 padding: 5px;
 font-size: 12px;
 text-align: justify;
}
.membre_mois {
 display: inline-block;
 width: 85px;
 height: 60px;
 background: #ccc;
 border: 1px solid orange;
 margin-left: 4px;
 overflow: hidden;
}
.member_des {
 width: 85px;
 height: 60px;
 overflow: auto;
 text-align: center;
 font-family: 'Georgia', serif;
 background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
 width: 85px;
 height: 60px;
 overflow: hidden;
 margin-top: -60px;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
 visibility: visible;
}
.membre_mois:hover img {
 opacity: 0;
 visibility: hidden;
}
.util_link {
 text-align: center;
 font-family: 'Georgia', serif;
 color: #FFF;
 font-variant: small-caps;
 font-size: 15px;
}
.util_link a {
 color: #ccc !important;
 text-decoration: none !important;
 letter-spacing: 0;
 -webkit-transition: all 800ms;
 transition: all 800ms;
}
.util_link a:hover {
 letter-spacing: 2px;
 text-decoration: none !important;
}
.credits_pann {
 font-size: 10px;
 color: #FFF;
 text-align: center;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
 margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/


HTML
Vous voulez que le menu s'affiche sur toutes les pages de votre forum

Dans le template overall_header (Affichage > Templates > Général) repérez ceci :
Code:
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Après ces deux lignes, intégrez ce code :
Code:
<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
  <h2>Bienvenue</h2>
  <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
    <h3>Liens utiles</h3>
    <div class="util_link">
      <a href="mon_lien">x Règlement</a><br />
      <a href="mon_lien">x Contexte</a><br />
      <a href="mon_lien">x Annexes</a><br />
      <a href="mon_lien">x FAQ</a><br />
      <a href="mon_lien">x Défis</a><br />
      <a href="mon_lien">x Annonces</a><br />
      <a href="mon_lien">x Partenariats</a>
    </div>
    <h3>Effectifs</h3>
    <div class="recherche">
      Groupe 1 x ... membre(s)<br />
      Groupe 2 x ... membre(s)<br />
      Groupe 3 x ... membre(s)<br />
      Groupe 4 x ... membre(s)</div>
    <h3>Rumeurs</h3>
    <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
      <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
    <h3>Membres du mois</h3>
    <div class="membre_mois"><div class="member_des">NOM<br />
      <span style="font-size: 12px;"><a href="mon_lien">Profil</a></span><br />
      <span style="font-size: 12px;"><a href="mon_lien">Fiche</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="membre_mois"><div class="member_des">NOM²<br />
      <span style="font-size: 12px;"><a href="mon_lien">Profil²</a></span><br />
      <span style="font-size: 12px;"><a href="mon_lien">Fiche²</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
  </div>
<!-- Menu latéral by MV/Shoki [END] -->



Vous voulez que le menu ne s'affiche que sur l'index

Dans ce cas, allez dans le template index_body (Affichage > Templates > Général) et juste après
Code:
{JAVASCRIPT}

Mettez le code fourni un peu plus haut.

PhPBB3


CSS
Code:
/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
  position: fixed;
  top: 0;
  left: 0;
  width: 185px;
  height: 100%;
  background: grey;
  z-index: 200;
  padding: 5px;
  font-family: 'Verdana', sans-serif;
}
#panneau_lat h1 {
  font-size: 19pt;
  font-family: 'Georgia', serif;
  text-align: center;
  color: #FFF;
  margin-bottom: 3px;
  margin-top: 1px;
  font-variant: small-caps;
  border: 0 !important;
}
#panneau_lat h4 {
  font-size: 15pt;
  text-align: center;
  color: #FFF;
  margin-bottom: -1px;
  margin-top: 10px;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  border: 0 !important;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
  text-align: center;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  font-size: 11px;
  color: #FFF;
}
.recherche {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #FFF;
  font-size: 13px;
  font-variant: small-caps;
  margin-top: 3px;
}
.boite {
  width: 175px;
  height: 120px;
  background: #ccc;
  overflow: auto;
  margin: auto;
  padding: 5px;
  font-size: 12px;
  text-align: justify;
}
.membre_mois {
  display: inline-block;
  width: 85px;
  height: 60px;
  background: #ccc;
  border: 1px solid orange;
  margin-left: 4px;
  overflow: hidden;
}
.member_des {
  width: 85px;
  height: 60px;
  overflow: auto;
  text-align: center;
  font-family: 'Georgia', serif;
  background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
  width: 85px;
  height: 60px;
  overflow: hidden;
  margin-top: -60px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  visibility: visible;
}
.membre_mois:hover img {
  opacity: 0;
  visibility: hidden;
}
.util_link {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #FFF;
  font-variant: small-caps;
  font-size: 15px;
}
.util_link a {
  color: #ccc !important;
  letter-spacing: 0;
  -webkit-transition: all 800ms;
  transition: all 800ms;
}
.util_link a:hover {
  letter-spacing: 2px;
}
.credits_pann {
  font-size: 10px;
  color: #FFF;
  text-align: center;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/


HTML

Vous voulez que le menu s'affiche sur toutes les pages de votre forum

Dans le template overall_header (Affichage > Template > Général), repérez
Code:
</head>
<body id="phpbb">


Après ces deux lignes, intégrer le code qui suit
Code:
<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
  <h1>Bienvenue</h1>
  <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
    <h4>Liens utiles</h4>
    <div class="util_link">
      <a href="mon_lien">x Règlement</a><br />
      <a href="mon_lien">x Contexte</a><br />
      <a href="mon_lien">x Annexes</a><br />
      <a href="mon_lien">x FAQ</a><br />
      <a href="mon_lien">x Défis</a><br />
      <a href="mon_lien">x Annonces</a><br />
      <a href="mon_lien">x Partenariats</a>
    </div>
    <h4>Effectifs</h4>
    <div class="recherche">
      Groupe 1 x ... membre(s)<br />
      Groupe 2 x ... membre(s)<br />
      Groupe 3 x ... membre(s)<br />
      Groupe 4 x ... membre(s)</div>
    <h4>Rumeurs</h4>
    <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
      <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
    <h4>Membres du mois</h4>
    <div class="membre_mois"><div class="member_des">NOM<br />
      <span style="font-size: 12px;">Profil</span><br />
      <span style="font-size: 12px;">Fiche</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="membre_mois"><div class="member_des">NOM²<br />
      <span style="font-size: 12px;">Profil²</span><br />
      <span style="font-size: 12px;">Fiche²</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
  </div>
<!-- Menu latéral by MV/Shoki [END] -->



Vous voulez que le menu ne s'affiche que sur l'index

Dans le template index_body (Affichage > Templates > Général), juste après
Code:
{JAVASCRIPT}

Mettre le code fourni un peu plus haut

 
En cas de soucis avec votre code, le section Problème avec mon Code est disponible. En cas de problème pour personnaliser le menu (changer les couleurs, la taille, la police et autres problèmes liés à la personnalisation), la section Personnalisations est à votre disposition.

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

Cheshire Cat

Catégories style science-fiction bleues - Ven 27 Mai 2016 - 1:22



Bonjour amis de Never Utopia ! Aujourd'hui je vous présente une toute nouvelle catégorie.

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.

Ces catégories sont faites pour la version PHPBB2 avec une hiérarchie séparée moyenne.

Merci d'ajouter un crédit à Never Utopia sur votre forum.

Réalisé à la demande d'Arkaline.

Tag phpbb2 sur Never Utopia - graphisme, codage et game design Z268

Alors, elles sont pas toutes belles ! :face:

- La taille de la création est d'environ 900 pixels
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
- La taille de l'avatar du dernier poste_r est fixée à 63 pixels de largeur.
- Vous êtes autorisés à ne pas activer l'affichage des sous-forums.
- Des indications ont été ajoutées dans le code pour ne pas vous perdre à certains endroits.

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. Une fois cela fait, enregistrez et validez votre template.
Code:
<link href='https://fonts.googleapis.com/css?family=Montserrat|Raleway' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="fondcat" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
     <th colspan="4" nowrap="nowrap" class="titrecat">{catrow.tablehead.L_FORUM}<div class="barrecat"></div></th>
 </tr>
 <!-- END tablehead --><!-- BEGIN cathead -->
   <tr>
         <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td colspan="4">
 <h1 class="titrecat">{catrow.cathead.CAT_TITLE}</h1>
 </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <td>
 <img class="imgcat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td>
 <h2 class="titrefrm">
 <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </h2>
 <div class="descricat">{catrow.forumrow.FORUM_DESC}</div>
 <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
 </td>
                <td>
                        <div class="derniermessage">
                          <span class="topics">{catrow.forumrow.TOPICS}</span>
                          <span class="messages">{catrow.forumrow.POSTS}</span><br />
                         {catrow.forumrow.LAST_POST}
                        </div>
                </td>
 <td>
            
               <div class="avatardernierposter">
                          <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
                   </div>
 </td>
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Ensuite, nous allons avoir besoin d'ajouter les descriptions des forums. Pour cela, nous allons faire Généralités > Forum > Catégories et forums. Dans chaque description, il va falloir copier ce code.
Code:
<img alt="Image au dessus de la description" src="http://zupimages.net/up/16/15/ml8e.png" />
<div class="texte">
 Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.
</div>


Notre code n'est cependant pas complet et nous allons 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:
/*Début Catégories par Cheshire Cat*/
.fondcat{
  width:875px;
  margin:auto;
  margin-top:10px;
  margin-bottom:5px;
  padding-top:7px;
  padding-bottom:13px;
  background-color:#142342;
  border-left:5px solid #0393da;
  border-right:5px solid #0393da;
}
.imgcat{
  position:relative;
  top:1px;
  width:100px;
  height:100px;
  margin-left:5px;
  border:1px solid #0393da;
}
.titrecat h2{
  position:relative;
  z-index:2;
  color:#142342;
  font-size:25px;
  font-family: Impact;
  font-weight:normal;
  letter-spacing:2px;
  font-style:italic;
  text-shadow:0px 0px 5px #0393da;
  text-transform:uppercase;
  text-align:center;
}
.barrecat{
  z-index;1;
  position:relative;
  bottom:25px;
  width:850px;
  height:10px;
  margin:-15px auto -15px auto;
  background-color:#0393da;
  border-radius: 100% 100%;
  box-shadow:0px 0px 2px #0393da;
}
.titrefrm{
  position:relative;
  top:5px;
  font-size:18px;
  font-family: Impact;
  text-align:center;
  text-transform:uppercase;
  font-style:italic;
  font-weight:normal;
}
.titrefrm a{
  color:#0393da; /*Couleur du texte du forum*/
  text-decoration:none;
  letter-spacing:0px;
  -webkit-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}
.titrefrm a:hover{
  color:#FFFFFF; /*Couleur du texte du forum au survol*/
  letter-spacing:5px;
  text-decoration:none !important;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
.descricat{
  position:relative;
  bottom:5px;
  left:5px;
  width:500px;
  height:80px;
  border:1px solid #0393da;
}
.descricat img{
  width:500px;
  height:80px;
}
.descricat .texte{
  position:absolute;
  top:0px;
  width:480px;
  height:59px;
  margin:5px;
  padding:5px;
  background-color:#FFFFFF;
  border:1px solid #0393da;
  overflow:auto;
  text-align:justify;
  font-family: 'Raleway', sans-serif;
  font-size:12px;
  color:#304f8c;
  opacity:0;
  -webkit-transition:all 0.4s ease-out;
  transition:all 0.4s ease-out;
}
.descricat .texte:hover{
  opacity:1;
  -webkit-transition:all 0.4s ease-in;
  transition:all 0.4s ease-in;
}
.sousforum{
  position:relative;
  bottom:5px;
  left:5px;
  width:502px;
  min-height:18px;
  padding-top:2px;
  background-color:#0393da;
  border-bottom-left-radius:50% 75%;
  border-bottom-right-radius:50% 75%;
  text-align:center;
  font-size:0px;
}
.sousforum a{
  padding-right:10px;
  font-size:11px;
  color:#FFFFFF; /*Couleur des liens des sous-forum*/
  font-family: 'Montserrat', sans-serif;
  -webkit-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}
.sousforum a:hover{
  color:#304f8c; /*Couleur des liens du sous-forum au survol*/
  text-decoration:none !important;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
.derniermessage{
  width:140px;
  height:80px;
  margin-top:1px;
  margin-left:5px;
  padding:10px;
  background-color:#FFFFFF;
  border:1px solid #0393da;
  text-align:center;
  font-family:'Raleway', sans-serif;
  font-size:11px;
  color:#304f8c;
  line-height:20px;
}
.topics{
  padding-right:30px;
  font-size:30px;
  font-family: Impact;
  color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
  text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
}
.messages{
  padding-left:5px;
  font-size:25px;
  font-family: Impact;
  color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
  text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
}
.derniermessage a{
  text-decoration:none;
  -webkit-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}
.derniermessage a:hover{
  color:#727bc4; /*COuleur du liens du sujet au survol*/
  text-decoration:none !important;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
.avatardernierposter{
  width:63px;
  height:100px;
  margin-top:1px;
  margin-left:4px;
  margin-right:5px;
  border:1px solid #0393da;
  background-color:#FFFFFF;
  overflow:hidden;
  visibility:visible;
}
.avatardernierposter img{ /*Redimenssion de l'avatar du dernier posteur*/
  margin-top:-5px;
  width:63px;
}
/*Fin Catégories par Cheshire Cat*/


Vous n'avez pas besoin de poster à la suite de ce message pour voir les codes, mais un petit "Merci" fait toujours plaisir ! Very Happy

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

Navigation remplacer "Déconnexion [ Pseudo ]" par un autre texte (CSS) - Ven 20 Mai 2016 - 11:42



Navigation - Remplacer "Déconnexion [ Pseudo ]" par un autre texte


Hello,

Si dans votre barre de navigation vous affichez les textes, la présence du pseudo peut parfois vous gêner / prendre trop de place ! Voici comment le remplacer rapidement en CSS pour mettre le texte de votre choix.

Information : Testé sur phpbb2

Exemple



Avant "Déconnexion [ Pseudo ]"
Tag phpbb2 sur Never Utopia - graphisme, codage et game design MM4jEse

Après "Déconnexion [ Pseudo ]" devient "Quitter"
Tag phpbb2 sur Never Utopia - graphisme, codage et game design 44ph4hZ

Code CSS


Le code est à placer ici :
PA > Affichage > Gestion des images & couleurs > Couleurs > Feuille de style CSS

Code:
/* Remplacer le lien déconnexion */
#logout {
  font-size: 0!important; /* on cache le lien */
  letter-spacing: normal!important; /* on enlève un eventuel letter spacing présent */
}

/* Lien déconnexion faux texte */
#logout::after {
  content: "Quitter"; /* nouveau texte*/
  font-size: 12px; /* taille du texte */
  /* style supplémentaire à mettre ici */
}
/* Fin remplacer le lien déconnexion */


La partie à modifier est celle-ci :
Code:
#logout::after {
  content: "Quitter"; /* nouveau texte*/
  font-size: 12px; /* taille du texte */
  /* style supplémentaire à mettre ici */
}

Le !important est seulement là pour éviter qu'une personnalisation de la navigation ne passe pas "au dessus" de notre code CSS Wink

Vous pouvez remplacer "Quitter" par un autre texte
Le 12px doit être remplacé par la même taille de police que le reste de votre barre de navigation :)

BONUS:



En cas de soucis, merci d'aller dans "Problème avec mon code" ou "Personnalisation"


N'oubliez pas de mettre sur votre forum un remerciement pour Never Utopia :hug:

Onyx

Changement automatique du rang selon le groupe - Lun 18 Avr 2016 - 2:12



Changement automatique du rang selon le groupe


Salut !

Pour certains administrateurs, il y a beaucoup de changements de groupes et de rangs. Déjà que changer le groupe de 15 personnes par jour prend du temps, devoir en plus changer leur rang à chaque fois ne rend pas les choses très faciles.

Du coup, j'ai créé une petite astuce pour tricher et lier les rangs au groupe de la personne à la demande de Darkius.

Plus précisément, cette astuce remplace le rang et l'image de rang par un "faux titre de rang" et une "fausse image de rang" et un javascript va "regarder la couleur du pseudo de la personne", trouvera le rang et l'image de rang associés à ce groupe (à cette couleur) et le mettra dans l'espace du "faux titre de rang" et de la "fausse image de rang".

Attention :
- Si une personne fait partie de plusieurs groupes, le groupe qui apparaîtra sera celui dont elle a la couleur, pas les autres.
- Cela agit seulement dans les messages, pas pour le rang dans les profils. Je recommande de tout simplement supprimer les rangs pour qu'ils ne s'affichent nul part. Comme ça, les seuls rangs qui s'afficheront seront les faux.


Ce LS est en trois parties.
  • Tout d'abord, nous allons créer l'espace pour les faux rangs dans le template des messages.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • Enfin, nous allons voir comment mettre vos propres rangs et groupes dans le javascript.


- La version du forum est PhpBB2.
- Il est possible (mais pas toujours) que l'astuce ne fonctionne pas si votre template a déjà été modifié. Si c'est le cas, vous pouvez aller dans "personnalisations" ou "problème avec mon code" pour recevoir de l'aide

Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^




1. Ajouter l'espace des "faux rangs" (Template Viewtopic_Body)



Nous allons commencer par aller dans les templates, plus précisément dans le template "viewtopic_body".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Puis, on chercher cette variable :
Code:
{postrow.displayed.POSTER_RANK}


Qu'on va remplacer par ceci :
Code:
<span class="rangtitre"></span>



Et on va trouver cette variable :
Code:
{postrow.displayed.RANK_IMAGE}


Qu'on va remplacer par ceci :
Code:
<span class="rangimg"></span>





2. Ajouter le javascript



Maintenant que les rangs normaux ont été remplacés par les faux rangs, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de faux rangs".
On choisit le placement "Sur les sujets" (c'est super important).

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)",
  "rgb(162, 176, 102)",
  "rgb(133, 199, 194)",
  "rgb(67, 145, 181)",
  "rgb(10, 163, 97)",
  ];

  var group1 = [
  "Élèves",
  "Professeurs",
  "Personnel",
  "Habitants",
  "PNJ",
  ];

  var group2 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png",
  "https://2img.net/i/fa/subsilver/icon_pm.gif",
  "https://2img.net/i/fa/subsilver/icon_email.gif",
  "https://illiweb.com/fa/subsilver/icon_www.gif",
  "https://2img.net/i/fa/subsilver/icon_online_fr.gif",
  ];

  var nbgroup = groupcouleur.length;
  $('tr.post > td span.name > strong > a > span > strong').each(function () {
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');
    var uncolor = $(this).css('color');
    for (i=0; i < nbgroup; i++) {
      if (uncolor == groupcouleur[i]) {
        $(rang1).html(group1[i]);
        $(rang1).css('color', groupcouleur[i]);
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});





3. Adapter le javascript à vos propres groupes et rangs



Voici le fonctionnement du javascript :
Il va aller "regarder la couleur du pseudo". Ensuite, il consulte une liste des couleurs des groupes (que vous allez devoir mettre vous-même) pour savoir le groupe auquel la couleur du nom correspond. Puis, il regarde la liste de rang (que vous devrez faire vous-même) et il ajoute le titre du rang et l'image du rang qui correspond au groupe.

On va décortiquer le javascript pour savoir où on doit modifier quoi Wink





Partie des couleurs des groupes qui ont des rangs

Si on décortique le javascript, la première partie, "groupcouleur", comporte la couleur de chacun des groupes en mode "rgb":
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)", /*Couleur du 1er groupe*/
  "rgb(162, 176, 102)", /*Couleur du 2e groupe*/
  "rgb(133, 199, 194)", /*Couleur du 3e groupe*/
  "rgb(67, 145, 181)", /*Couleur du 4e groupe*/
  "rgb(10, 163, 97)", /*Couleur du 5e groupe*/
  ];


Vous devez aller dans chacun de vos groupes et copier/coller exactement la couleur qui appartient à chaque groupe. Vous verrez que la couleur est en mode "hex", soit quelque chose comme "#AD8H46". Or, le javascript utilise uniquement les codes en mode "rgb", tel que "rgb(173, 8, 70)", ce qui donne la même couleur.

Pour transférer vos codes de couleur "hex" en codes de couleur "rgb", vous pouvez utiliser ce site : http://www.javascripter.net/faq/hextorgb.htm . Bref, une fois que vous avez la couleur en "rgb", vous la mettez dans la partie "groupcouleur" pour chacun de vos groupes.





Partie des "faux titres de rang"

Ensuite, la deuxième partie, "group1", sert à mettre le titre de chacun des rangs : :
Code:
 var group1 = [
  "Élèves", /*Titre du 1er groupe*/
  "Professeurs", /*Titre du 2e groupe*/
  "Personnel", /*Titre du 3e groupe*/
  "Habitants", /*Titre du 4e groupe*/
  "PNJ", /*Titre du 5e groupe*/
  ];


À noter que le premier rang doit correspondre à la couleur du premier groupe que vous avez mis dans la section précédente et ainsi de suite.

D'ailleurs, si vous voulez personnaliser chacun des rangs, vous pouvez facilement mettre quelque chose comme :
Code:
 var group1 = [
  "<span style='color: red;'>Élèves</span>",
  "<span style='color: blue;'>Professeurs</span>",
  "<span style='color: orange;'>Personnel</span>",
  "<span style='color: purple;'>Habitants</span>",
  "<span style='color: green;'>PNJ</span>",
  ];


Ou encore :
Code:
 var group1 = [
  "<span class='nom_de_class1'>Élèves</span>",
  "<span class='nom_de_class2'>Professeurs</span>",
  "<span class='nom_de_class3'>Personnel</span>",
  "<span class='nom_de_class4'>Habitants</span>",
  "<span class='nom_de_class5'>PNJ</span>",
  ];






Partie des "fausses images de rang"

La troisième partie, "group2", sert à mettre l'url des images de rang pour chacun des groupes :
Code:
 var group2 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png", /*Image du 1er groupe*/
  "https://2img.net/i/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "https://2img.net/i/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "https://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "https://2img.net/i/fa/subsilver/icon_online_fr.gif", /*Image du 5e groupe*/
  ];


À noter que la première url d'image doit correspondre au premier titre du rang de la section précédente et à la couleur du premier groupe que tu as mis dans la section d'avant et ainsi de suite.





La partie où le javascript fait actuellement quelque chose

La dernière partie du javascript, soit le reste, sert à repérer la couleur du nom de l'utilisateur, de la comparer avec le groupcouleur et d'appliquer le titre de rang et l'image de rang qui correspond :
Code:
 /*On calcule le nombre de couleurs au total*/
  var nbgroup = groupcouleur.length;

  /*On va chercher chaque nom pour chaque message posté pour appliquer le reste du javascript. On répète le processus à chaque fois qu'on trouve un nom*/
  $('tr.post > td span.name > strong > a > span > strong').each(function ()

    /*On sélectionne le l'espance du "faux titre de rang" dans le template*/
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');

    /*On sélectionne l'espace de "fausse image de rang" dans le template*/
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');

    /*On prend la couleur du pseudo*/
    var uncolor = $(this).css('color');

    /*On va aller comparer la couleur de pseudo à chaque couleur de groupe*/
    for (i=0; i < nbgroup; i++) {

      /*Si la couleur du pseudo = la couleur du groupe, on va faire les modifications*/
      if (uncolor == groupcouleur[i]) {

        /*On ajoute le titre de rang qui correspond à la couleur du groupe dans l'espace du "faux titre de rang"*/
        $(rang1).html(group1[i]);

        /*On donne la même couleur au titre de rang que la couleur du groupe*/
        $(rang1).css('color', groupcouleur[i]);

        /*On ajoute l'image de rang qui correspond à la couleur du groupe dans l'espace de la "fausse image de rang"*/
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});


Ce bout n'a absolument pas à être modifié pour fonctionner. Sérieux, pas touche, à moins d'être sûr de savoir ce que vous faites, ok?





Personnaliser le titre de rang et l'image de rang

On a déjà vu précédemment qu'on pouvait entourer d'un span avec une classe différente chaque titre de rang, donc vous pouvez vous servir de ces classes pour personnaliser chaque rang.

Pour personnaliser tous les titres de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Titres des rangs*/
.rangtitre {
  propriété: valeur;
}


Pour personnaliser tous les images de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Images des rangs*/
.rangimg img {
  propriété: valeur;
}


Quant à personnaliser les images de rang individuellement, vous pouvez mettre ceci dans votre CSS et remplacer le URL par le lien de l'image de rang à modifier :
Code:
.rangimg img[src="URL"] {
  propriété: valeur;
}






Partie des rangs dans le reste du forum

À ma connaissance, les rangs apparaîssent à un seul autre endroit dans le forum, soit le profil.

Le hic, c'est que puisque le profil (à moins que vous ayez la version simplifié du profil) ne peut pas être modifié entièrement dans un template, on peut difficilement remplacer le rang par le faux rang.

Donc, si la personne change de groupe, le rang se changera automatiquement dans les messages (grace aux "faux rang"), mais restera pareil dans le profil. Alors si quelqu'un va voir, il sera genre "WTF?". Pas trop joyeux ><

Ce que je vous conseille, une fois que vous avez installé le javascript comme il faut et vérifié qu'il fonctionne bien, c'est d'aller carrément supprimer les rangs qui ne sont plus nécessaire (dans le panneau d'administrateur, dans les utilisateurs, dans les rangs, vous les supprimez tous).

Comme ça, les rangs ne seront simplement pas affichés sur le profil (ce qui n'est vraiment pas un drame, on s'entend) et ne contraseront donc plus avec le faux rang des messages. Perfect!





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Cheshire Cat

Affichage des messages sobre - Mar 29 Mar 2016 - 17:52



Bonjour à tous !  :bwaha:
Aujourd'hui, on est là pour dur lourd, car je vous propose un affichage complet de vos messages ! Si c'est pas beau tout ça ? :star:
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

Pour commencer à installer ce nouvel affichage pour vos sujets, nous allons faire cette manœuvre
Panneau d'administration > Affichage > Templates > Général > viewtopic_body
Maintenant on va remplacer le template de base par celui qui va suivre.
Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
   
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<link href='https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web|Yanone+Kaffeesatz|Roboto' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left" valign="middle">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>   
          </tr>
          <tr>
      <td class="nav" valign="middle" width="100%">
      </td>
   </tr>
</table>

<table class="affichagesujet" width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
             <td colspan="3">
                     <h1 class="sujettitre">
                          {TOPIC_TITLE}<br />
           <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                      <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                      {NAV_CAT_DESC_SECOND}
                    </span>
                     </h1>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
             <td colspan="2" align="right" valign="top">
                     <div class="paginationsujet">{PAGINATION}</div>
             </td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
          <td valign="top">
            <div class="profilmodif">
              <h1 class="pseudo">{postrow.displayed.POSTER_NAME}</h1>
              <div class="profavatar">
                <div class="infos">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
              </div>
              <div class="rang">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            </td>
                <td valign="top" colspan="2">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr class="heureedit">
                                     <td class="heureedit">
                                          <div class="on">{postrow.displayed.ONLINE_IMG}</div>
                                          <div class="heure">{postrow.displayed.POST_DATE}</div>
                                     </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="affichmess">
                                                  <div class="imagesedit">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
                    <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                  </div>
                                  </td>
                          </tr>
                  </table>
          </td>
        </tr>
        <!-- BEGIN switch_signature -->
     <tr>
          <td colspan="3">
            <div class="signmss">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
     </tr>
        <!-- END switch_signature -->
   <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="paginationsujet" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="paginationsujet" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="paginationsujet" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" align="center">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- 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 -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>


Ensuite, nous allons ajouter le CSS pour donner forme à notre code.
Code:
/*Affichage des sujets par Cheshire Cat*/
/*Message du posteur*/
.affichagesujet{
  margin:10px 0;
  background-color:#BAC49C;
}
.sujettitre{
  margin:0 0 10px;
  padding:5px;
  background-color:#E2DFED;
  color:#8665AB;
  font-family: 'Amaranth', sans-serif;
  font-size:24px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
}
.sujettitre .nav{
  font-size:0;
}
.sujettitre .nav a{
  color:#8665AB!important;
  font-size:12px;
  font-weight:normal;
}
.sujettitre .nav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.paginationsujet{
  font-size:12px;
  padding:0 10px;
  color:#504254;
}
.paginationsujet a{
  color:#504254!important;
}
.paginationsujet img{
  height:10px;
  opacity:0.8;
}
.heureedit{
  height:20px;
  padding:10px 10px 0 0;
}
.on{
  float:left;
}
.heure{
  float:right;
  font-family: 'Titillium Web', sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#794F82;
  text-transform:uppercase;
}
.imagesedit{
  text-align:right;
}
.imagesedit img{
  height:20px;
  opacity:0.8;
  margin:0 3px;
}
.affichmess{
  width:480px;
  min-height:357px;
  margin:10px;
  padding:10px;
  background-color:#929a79;
  font-size:12px;
  color:#504254;
  text-align:justify;
  font-family:Roboto;
  line-height:18px;
}
.signmss{
  min-height:100px;
  max-height:200px;
  margin:0 10px 10px;
  padding:10px;
  color:#504254;
  background-color:#E2DFED;
  overflow:auto;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
}
.signmss br:first-of-type,
.signmss br:nth-of-type(2){
  display:none;
}
/*Profil du posteur*/
.profilmodif{
  z-index:1;
  width:200px;
  background-color:#E2DFED;
  margin:0 0 10px 10px;
}
.pseudo{
  margin:0;
  padding:7px 0 5px;
  text-align:center;
  font-family:Yanone Kaffeesatz;
  font-size:23px;
}
.pseudo strong{
  font-weight:normal;
}
.pseudo a{
  text-decoration:none !important;
}
.pseudo a:hover{
  text-decoration:none !important;
}
.profavatar{
  position:relative;
  width:200px;
  height:320px;
  overflow:hidden;
}
.profil_avatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transition: all 600ms;
}
.profavatar:hover .profil_avatar img {
  -webkit-transform:translatex(-200px);
  transform:translatex(-200px);
}
.infos{
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  height:310px;
  overflow:auto;
  padding:5px;
  text-align:left;
  letter-spacing:0px;
  color:#504254;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  background-color:#f4ecea;
}
.rang{
  overflow:hidden;
  color:#504254;
  text-align:center;
  font-size:20px;
  letter-spacing:-2px;
  font-family: 'Titillium Web', sans-serif;
}
.rang img{
  height:20px;
  opacity:0.8;
  margin:0 2px;
}

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


N'oubliez pas de bien valider vos templates et votre CSS, et tout est bon ! Very Happy

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Cheshire Cat

Catégories en tableaux couleur pêche - Dim 6 Mar 2016 - 13:17



Bonjour à vous ! 

Voici mon second LS sur Never Utopia, on applaudit o/

Ceci est donc un libre service de catégorie réalisé à la demande d'Amacky qui a fait le schéma et proposé la palette de couleurs.

Un petit aperçu ici WWW

> Afin d'avoir la bonne structure pour vos catégories
PA > Affichage > Page d'accueil > Structure et hiérarchie > Conserver les catégories sur l'index > Moyen

> La largeur des catégories est de 800px

> Les dimensions des images new / old / lock sont de 57*100

> Vous devez activer l'affichage des sous-forums si ce n'est pas déjà fait.
PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs ("oui" ou alors "avec image" -vous avez un exemple sur NU)

> Pour régler le dernier message affiché:
PA > Affichage > Page d'accueil > Structure et hiérarchie
Vous devez cocher Oui pour Afficher le titre du sujet du dernier message d'un forum sur l'index
La longueur du titre du sujet affiché doit être de 16.

> Pour afficher l'avatar du dernier posteur :
PA > Affichage > Page d'accueil > Structure et hiérarchie > Afficher les avatars dans la colonne "derniers messages" > Oui

1. Ajouter les polices personnalisées. Il va falloir faire PA > Accueil > Affichage > Templates > Général > overall_header 
Cette ligne, on va l'ajouter après la 3e ligne !
Code:
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Voltaire|Handlee'rel='stylesheet' type='text/css'>


On enregistre et on oublie pas d'activer la template !

2. Puis on va aller dans index_box
Pas besoin d'explications compliquées. On supprime le template de base et on le remplace par ce code là
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
                  <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<div class="modifcat">
<!-- BEGIN catrow --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN cathead -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td colspan="{catrow.cathead.INC_SPAN}" width="100%">
 <div class="cattitre">{catrow.cathead.CAT_TITLE}</div>
 </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <!-- BEGIN inc -->
 <td width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td>
                  <div class="imgmess">
                    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  </div>
           </td>
                  <h1 class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </h1>
           <td>
 <div class="liensfrm">
                          {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        </div>
           </td>
         <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
                  <div class="descfrm">{catrow.forumrow.FORUM_DESC}</div>
         </td>
                   <td class="row3 over" align="center" valign="middle">
                     <div class="avatarfrm">
                     <!-- BEGIN avatar -->
                       {catrow.forumrow.avatar.LAST_POST_AVATAR}
                  <!-- END avatar -->
                     </div>
                   </td>
           <td class="row3" align="center" valign="middle">
                  <div class="derniermess">
                    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets<br />
                    {catrow.forumrow.LAST_POST}
                  </div>
           </td>
   </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
  </table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Puis on enregistre et on valide !

3. Maintenant, place au CSS ! On va faire Affichage > Couleurs > Feuille de style CSS et on ajoute le code qui suit et on valide notre CSS.

Code:
/*Catégories par Cheshire Cat*/
.modifcat{
  margin-top:10px;
  background-color:#f4f0e5;
}
.forumline{
  width:800px;
  margin:auto;
}
.cattitre{
  width:746px;
  text-align:center;
  margin-top:20px;
  margin-bottom:10px;
  margin-left:25px;
  margin-right:25px;
  padding-top:5px;
  font-size:35px;
  min-height:50px;
  color:#ffffff !important;
  background-color:#d9b698;
  font-family: 'Handlee', cursive;
}
.forumlink{
  letter-spacing:7px;
  font-size:20px;
  text-decoration:none;
  text-align:center;
  color:#c36e6e !important;
  font-family: 'Voltaire', sans-serif;
  transition:all ease 0.7s;
  -webkit-transition:all ease 0.7s;
}
.forumlink:hover{
  transition:all ease 0.7s;
  -webkit-transition:all ease 0.7s;
  text-decoration:none !important;
  color:#3D2617 !important;
}
.imgmess{
  position:relative;
  width:57px;
  height:100px !important;
  background-color:#d9b698;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:25px;
  padding:5px;
}
.imgmess img{
  height:100px;
}
.liensfrm{
  overflow:auto;
  font-size:0px;
  width:130px;
  height:110px;
  background-color:#d9b698;
  bottom:-50px;
  margin-right:5px;
  margin-bottom:15px;
}
.liensfrm a{
  letter-spacing:2px;
  font-family: 'Voltaire', sans-serif;
  display:block;
  font-size:13px;
  max-width:130px;
  color:#c36e6e;
  background-color:#ffffff;
  border-bottom:3px solid #794a2f;
  text-align:center;
  text-decoration:none;
  transition:all ease 0.7s;
  -webkit-transition:all ease 0.7s;
}
.liensfrm a:hover{
  color:#ffffff !important;
  background-color:#c36e6e;
  text-decoration:none !important;
  transition:all ease 0.7s;
  -webkit-transition:all ease 0.7s;
}
.descfrm{
  position:absolute;
  margin:auto;
  width:310px;
  height:90px;
  font-size:11px;
  background-color:#d9b698;
  overflow:auto;
  margin-bottom:15px;
  margin-left:2px;
  text-align:justify;
  padding:10px;
  color:#000000;
  font-family: 'Open Sans', sans-serif;
}
.avatarfrm{
  overflow:hidden;
  width:57px;
  height:100px;
  background-color:#d9b698;
  padding:5px;
  margin-bottom:15px;
}
.avatarfrm img{
  height:100px;
}
.derniermess{
  position:relative;
  width:96px;
  height:100px;
  font-size:10px;
  background-color:#d9b698;
  margin-left:5px;
  margin-bottom:15px;
  margin-right:25px;
  padding-left:5px;
  padding-right:5px;
  padding-top:10px;
  color:#000000;
  font-family: 'Open Sans', sans-serif;
}
.derniermess a{
  color:#c36e6e;
  text-decoration:none;
  transition:all ease 0.7s;
  -webkit-transition:all ease 0.7s;
}
.derniermess a:hover{
  color:#3D2617;
  transition:all ease 0.7s;
  -webkit-transition:all ease 0.7s;
  text-decoration:none !important;
}
/*Fin des catégories*/


Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Bloc de connexion rapide verte avec une image - Dim 6 Mar 2016 - 12:29



Bloc de connexion rapide verte



Ce LS remplace le bloc de connexion rapide présent sur l'index du forum.

  • Incompatible avec la connexion rapide par Facebook (Facebook Connect)
  • Modification du template index_body (il faut donc être fondateur du forum)
  • Testé sur phphbb2


Il s'agit du bloc de connexion. La partie image à gauche est un lien version l'inscription.
Tag phpbb2 sur Never Utopia - graphisme, codage et game design UAOOHiJ

L'image fait 80px par 80px, vous pouvez mettre plus grand, mais gardez une image carrée :)

Template


Pensez à activer la connexion rapide sur le panneau d'admin :
PA > Affichage > Page d'accueil > Généralités > Affichage de la connexion rapide



Le template à modifier est index_body
PA > Affichage > Templates > Général >  index_body

Le code de connexion rapide est présent 2 fois dans le template, pour la connexion rapide en haut et celle en bas.
En fonction de ce que vous avez choisi (en haut / en bas), il faudra la remplacer au bon endroit.


Connexion rapide en haut


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->



Connexion rapide en bas


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->



Le HTML


Code:
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<div class="cnxl-bloc">
    <form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <!-- Bloc gauche - INSCRIPTION-->
       <a class="cnxl-inscription" href="/register" title="S'inscrire !">
           <img src="http://image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
       </a>

         <!-- Bloc milieu - LES CHAMPS A REMPLIR-->
        <div class="cnxl-input-bloc">
            <input type="text" name="username" placeholder="Pseudo" />
            <input type="password" name="password" placeholder="Mot de passe" />
        </div>

         <!-- Bloc droit - BOUTON CONNEXION-->
         <div class="cnxl-submit-bloc">
            <input type="submit" name="login" value="Connexion" />
        </div>

        <!-- En bas-->
        <div>
            <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
            <label for="autologin">Connexion automatique</label>
        </div>
    </form>
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->


Si vous avez choisi de l'afficher en haut et en bas :
Spoiler:


CSS


PA > Affichage > Images & Couleurs > Couleurs > Onglet "Feuille de style"

Code:
/*
 * Libre service bloc de connexion rapide verte
 * NEVER UTOPIA
 */

 /* Bloc qui entoure tout */
 .cnxl-bloc {
     margin: 20px auto;

     font-family: 'Playfair Display', serif;
     text-align: center;
     font-size: 15px;
     color: #484848;
 }

 /* Aligner les 3 blocs */
 .cnxl-submit-bloc,
 .cnxl-inscription,
 .cnxl-input-bloc {
     display: inline-block;
     vertical-align: middle;
 }

 /* Style commun pour tous les champs */
 .cnxl-form input {
     padding: 10px;
     border: none;
     font-family: inherit;
     font-size: 15px;
     outline: none;
 }

 /*
  * Décoration à gauche
  * Inscription
  */

 .cnxl-inscription {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 2px solid #E5DB84;
     padding: 8px;
 }

 .cnxl-inscription img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }


 /*
  * Champs à remplir au centre
  */

 .cnxl-input-bloc {
     margin: 0 20px;
     width: 200px;
     border-radius: 5px;
     box-shadow: 0 0 0 2px #E5DB84;
     overflow: hidden;
     padding: 0 5px; /* espace entre le bord et le trait des input */
     background: #FFFFFF;
 }

 .cnxl-input-bloc input {
     color: black;
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-bottom: 1px solid #E5DB84; /* bordure entre les input */
     box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
 }
 .cnxl-input-bloc input:last-of-type {
     border: none;
 }


 /*
  * Connexion à droite
  */

 /* Bouton de connexion */
 .cnxl-submit-bloc input {
     background: #E5DB84;
     border-radius: 3px;
     cursor: pointer;
     transition: all 300ms ease-out;
 }

 /* Bouton de connexion au survol */
 .cnxl-submit-bloc input:hover {
     background: #ede390;
 }

 /*
  * Zone en bas
  */

 .cnxl-form label {
     cursor: pointer;
 }

 /* Liens (Mot de passe oublié) */
 .cnxl-bloc a {
     font-size: 10px;
     text-decoration: none!important;
     color: #766e6e;
     text-decoration: none;
     transition: all 300ms ease-out;
 }

 /* Liens au survol (Mot de passe oublié) */
 .cnxl-bloc a:hover {
     color: #a79d46;
 }

 /*
  * Fin libre service Connexion rapide verte
  * Never Utopia
  */


En cas de problème, merci de vous rendre dans la section "Problème avec mon code" ou "Personnalisation"  :hudada:


Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  :lovebomb:

Nihil Scar Winspeare

Connexion rapide noire et rouge - Sam 5 Mar 2016 - 18:28



Bloc de connexion rapide



Ce LS remplace le bloc de connexion rapide présent sur l'index du forum.

  • Incompatible avec la connexion rapide par Facebook (Facebook Connect)
  • Modification du template index_body (il faut donc être fondateur du forum)
  • Testé sur phphbb2


Il s'agit du bloc noir
Tag phpbb2 sur Never Utopia - graphisme, codage et game design Sa1qZNR

Template


Pensez à activer la connexion rapide sur le panneau d'admin :
PA > Affichage > Page d'accueil > Généralités > Affichage de la connexion rapide



Le template à modifier est index_body
PA > Affichage > Templates > Général >  index_body

Le code de connexion rapide est présent 2 fois dans le template, pour la connexion rapide en haut et celle en bas.
En fonction de ce que vous avez choisi (en haut / en bas), il faudra la remplacer au bon endroit.


Connexion rapide en haut


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->



Connexion rapide en bas


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->



Le HTML


Code:
<!-- DEBUT LS CONNEXION RAPIDE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Arapey' rel='stylesheet' type='text/css' />

<div class="connexion-bloc">
    <form class="connexion-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <div><input type="text" name="username" placeholder="Nom d'utilisateur"/></div>
        <div><input type="password" name="password" placeholder="Mot de passe"/></div>
        <div>
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
        </div>
        <input type="submit" name="login" value="Connexion" />
    </form><!-- fermeture du bloc du formulaire -->
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE NEVER UTOPIA -->


Si vous avez choisi de l'afficher en haut et en bas :

Spoiler:


CSS


PA > Affichage > Images & Couleurs > Couleurs > Onglet "Feuille de style"

Code:
/*
 * Libre service bloc de connexion rapide
 * NEVER UTOPIA
 */

/* Bloc qui entoure tout */
.connexion-bloc {
    margin: 20px auto;
    padding: 20px 0;

    background: #040004;

    font-family: 'Arapey', serif;
    color: #ffffff;
    text-align: center;

    font-size: 15px;
}

/* Formulaire */
.connexion-form {
    width: 50%;
    min-width: 190px;

    margin: auto;
    margin-bottom: 30px;

    padding: 20px;
    padding-top: 30px;

    position: relative;
    border: 2px solid #FA023C;
}

/* Les champs */
.connexion-form input {
    padding: 10px 20px;
    margin-bottom: 15px;

    background: #ffffff;
    border: none;

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.connexion-form label {
    cursor: pointer;
}

/* Bouton de connexion */
.connexion-form input[type="submit"] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

    background: #FA023C;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 16px;

    padding: 10px 18px;
    margin: 0;

    cursor: pointer;
    transition: all 1000ms;
}

/* Bouton de connexion au survol */
.connexion-form input[type="submit"]:hover {
    color: #FA023C;
    background: #262323;
}

/* Liens (Mot de passe oublié) */
.connexion-bloc a {
    text-decoration: none!important;
    color: #766e6e;
    text-decoration: none;
    transition: all 300ms ease-out;
}

/* Liens au survol (Mot de passe oublié) */
.connexion-bloc a:hover {
    color: #FA023C;
}
/*
 * Fin libre service Connexion rapide
 * Never Utopia
 */


En cas de problème, merci de vous rendre dans la section "[url=/f177-probleme-avec-mon-code]Problème avec mon code[/url]" ou "[url=/f75-personnalisations]Personnalisation[/url]"  :hudada:


Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  :lovebomb:

Rajouter une Google Font sur les chatbox en iframe - Dim 2 Aoû 2015 - 16:14



Rajouter une Google Font sur les chatbox en iframe - phpbb2



On ne peut pour l'instant pas ajouter du javascript sur la page de la chatbox, vous n'aurez donc pas la modificaton sur cette page là.


Ce code ne fonctionne que sur une page où la chatbox est en iframe Wink

La première étape est de vous munir du code fourni par Google Fonts, par exemple pour la police Quicksand :
Code:
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css' />


Ensuite, on ajoute un nouveau javascript
Panneau d'administration >> Modules >> Html & JavaScript >> Gestion des codes JavaScript >> Créer un nouveau javascript

On coche "sur l'index" si la CB est seulement sur l'index, sinon "sur toutes les pages" si elle est présente sur toutes les pages (merci Captain Obvious).

Le code Javascript :
Code:
$(function(){
    /* on attends que l'iframe de la CB soit chargée */
    $("iframe[src*='/chatbox']").load(function(){
        $(this).contents().find("head").append("<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>");
    });
});


Vous pouvez ensuite utiliser la police en question normalement, comme aux autres endroits de votre forum. Wink

Si vous rencontrez des problèmes, n'hésitez pas à poster dans le forum Problème avec mon code ou Personnalisations.

Invité

ChatBox en coin avec URL vers la grande CB - Lun 20 Juil 2015 - 15:23

{#}html{/#} {#}css{/#} {#}chatbox{/#} {#}effet_hover{/#} {#}auteur_Shaneliae{/#} {#}phpBB2{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 6:42