AccueilRechercherS'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.


12 résultats trouvés pour auteur_Nihil_Scar_Winspeare

Message spécial au dessus du formulaire MP en fonction du destinataire - Mer 8 Fév 2017 - 23:31


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


Hello <3

Parfois un (ou plusieurs) membres de votre staff sont absents, mais les membres leur envoient quand même des MP plein de détresse.
Les mises en garde en gras et rouge "Je suis absente, je vous conseille de vous adresser à un autre membre du staff" dans la signature ne suffisent pas toujours pour stopper les membres. (:face:)

Pour rajouter encore une petite couche, voici un système ajoutant un petit message au-dessus du formulaire, si l'un des destinataire est dans une liste d'absents que vous avez défini.

Exemple avec un petit message en bleu en haut
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design EsiE7c4
(on notera le message d'avertissement bien pourri. S'il vous plait, écrivez un joli message pour vos membres)

Le code est fait pour fonctionner quand le pseudo du destinataire est déjà écrit, pas quand le membre l'écrit lui-même. Cela peut se modifier, mais il s'agit là d'une version plus légère.


Vous pouvez bien entendu adapter ce code pour écrire un autre message que pour les absents, à vous de voir :)
De même, le code n'est pas figé. Il pourrait être personnalisé et aller chercher la liste des absents dans un sujet par exemple (ainsi plus de gens pourraient éditer la liste des absents)


Le code à rajouter



Pour apprendre comment gérer les codes Javascript sur forumactif : Gestion des codes Javascript

Panneau d'administration > Modules > HTML & Javascript > Gestion des codes javascript
Ajoutez un nouveau JS en cochant "Sur toutes les pages"
Code:
/*
 * Message prévenant de l'absence d'un membre lors de l'envoie d'un MP
 * version 1 (fevrier 2017)
 * Never Utopia
 */
$(function(){
    if (document.location.pathname !== "/privmsg") return;

    // phrase à modifier
    var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";

    // Pseudos des absents, séparés par un point virgule, exemple "Pseudo;Pseuuudo"
    var pseudos = "Pseudo";

    /* NE PAS MODIFIER EN DESSOUS */
    var arrPseudo = pseudos.toLowerCase().split(";");
    // On regarde s'il y a l'un des pseudos des absents dans les destinaires
    if ($('input[name="username[]"]').filter(function() { return arrPseudo.indexOf(this.value.toLowerCase()) > -1 }).length) {
        /* On ajoute le message*/
        $('form[action="/privmsg"]').before('<div class="avertissement-mp">' + message +'</div>');
    }
});


Pour styliser le bloc, il faudra rajouter du CSS.
Voici celui que j'utilise pour ma boite bleue :

Panneau d'administration > Affichage > Couleurs > Onglet "Feuille de Style CSS"
Code:
/* Message prévenant absence si MP */
.avertissement-mp {
  padding: 10px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  background-color: #1b7cad;
  color: white;
  border-radius: 3px;
}


Personnaliser



Pour changer la phrase, il vous faudra modifier cette ligne là :
Code:
var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";


Et le plus important, la liste des membres absents, se modifie ici :
Code:
var pseudos = "Pseudo";


S'il y a plusieurs pseudos, il faut les séparer avec un point virgule, exemple :
Code:
var pseudos = "Pseudo 1;Pseudo 2";

Note : attention à ne pas mettre des espaces en trop :)

Probablement personne ne va utiliser ça, mais j'avais envie de le sortir :siffle:

Vous pouvez demandez de l'aide dans "Personnalisation" pour faire une adaptation de ce code ou bien mettre un message dans "Problème avec mon code" pour recevoir de l'aide

Astuce - Retirer les retours à la ligne en haut des signatures - Dim 24 Juil 2016 - 20:09



Enlever l'espace en haut de la signature



Une petite astuce pour les codeurs qui veulent personnaliser l'affichage des signatures.

Sur forumactif, les signatures ont toujours 2 retours à la ligne (balises br) qui s'ajoutent au début et vont créer un espace non désiré.

C'est à dire que si je veux styliser ma signature en lui mettant une couleur de fond, ou une bordure, ou des marges intérieures, j'aurai toujours un grand truc en haut qui déséquilibre.

Exemple



J'ai voulu mettre un fond bleu à ma signature, et des marges à l'intérieure mais... J'ai un grand espace en haut !
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design Iqfy6eE

Une fois le code ajouté, je n'ai plus le soucis des retours à la ligne en haut :
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design GyiR68D

Code



Pour enlever seulement ces 2 balises br là, il suffit d'ajouter ce petit code CSS :
Code:
/* Enlever espaces en haut de la signature */
.signature_div > br:nth-of-type(-n+2) {
  display: none;
}


La classe "signature_div" que j'utilise est celle présente par défaut autour de la signature dans le template viewtopic_body.
Code:
<div class="signature_div">{postrow.displayed.SIGNATURE}</div>


@Onyx a écrit:
Si je peux me permettre, cette div n'existe pas pour PunBB. À la place, le CSS à utiliser serait celui-ci :
Code:
/* Enlever espaces en haut de la signature */
.sig-content > br:nth-of-type(-n+2) {
  display: none;
}


Pensez à faire un lien de remerciement vers Never Utopia pour la petite astuce Wink

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 ^^

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 auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design MM4jEse

Après "Déconnexion [ Pseudo ]" devient "Quitter"
Tag auteur_nihil_scar_winspeare 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:

Effet au survol


La plupart des effets au survol marcheront encore, néanmoins si vous voulez en faire un spécial, voici ce qu'il faut ajouter :
Code:
/* Lien déconnexion faux texte - HOVER */
#logout::hover:after {
  color: red;
}




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:

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 auteur_nihil_scar_winspeare 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:
Il faudra donc le remplacer 2 fois dans le template !

Attention, il y a un id à remplacer ici :
Code:
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>

Un id est forcément unique. Dans le code pour la connexion rapide en bas du forum, remplacez ces 2 lignes par ceci :
Code:
<input class="radio" type="checkbox" name="autologin" id="autologinbottom" {AUTOLOGIN_CHECKED} />
<label for="autologinbottom">Connexion automatique</label>



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 auteur_nihil_scar_winspeare 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:
Il faudra donc le remplacer 2 fois dans le template !

Attention, il y a un id à remplacer ici :
Code:
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>

Un id est forcément unique. Dans le code pour la connexion rapide en bas du forum, remplacez ces 2 lignes par ceci :
Code:
<input class="radio" type="checkbox" name="autologin" id="autologinbottom" {AUTOLOGIN_CHECKED} />
<label for="autologinbottom">Connexion automatique</label>



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:

NyoTheNeko

Les margin et les padding - Sam 2 Jan 2016 - 14:03



Margin & Padding


Bonjour à vous les loulous! :hug:
Aujourd'hui, je vous propose un petit tuto tout simple pour vous expliquer un petit concept qui, pour les débutants, peut parfois être difficile à comprendre: les margin et les padding. En soi, une fois qu'on a compris de quoi il en retourne, il est facile de manier les blocs sans trop de problème avec les tailles.

À quoi ça correspond?


Bon, je vous lance des termes, comme ça, en pleine figure: mais à quoi est-ce que ça correspond exactement? Alors tout simplement, le "margin" représente la marge, c'est à dire, la distance entre votre bloc et un autre.
Commençons par un petit exemple. Voici deux blocs, un rouge et un noir:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Ce n'est pas le sujet principal mais je vous explique rapidement le code plus haut.
Tout d'abord, je donne à mes deux div un display: inline-block, qui me permettra de les mettre côte à côté. Je fais cela surtout pour qu'il soit plus aisé de voir l'effet qu'ont les marges pour la suite de l'exemple. Le vertical-align: top me permet également de dire, que si je les veux côte à côte, je veux aussi que le haut de chaque bloc soit aligné. J'aurai pu également mettre "middle" ou "bottom", si je voulais que les deux blocks soient centrés en hauteur l'un par rapport à l'autre, ou alors que le bas de chaque bloc soit aligné.
Ensuite, à l'aide de height et width je donne une hauteur puis une largeur à mes blocs.
Enfin background me permet de donner une couleur de fond à mes blocs, respectivement rouge (red) et noir (black).


Vous remarquez donc que ces deux blocs sont collés l'un contre l'autre. À présent, si je rajoute une marge avec l'aide de margin au premier, ils ne le seront plus:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Nous remarquons ici deux choses. Premièrement: margin crée une marge autour de l'ensemble du bloc, ce qui veut dire qu'il y a une marge en bas, mais aussi en haut. Pour que vous puissiez le voir, voici une représentation visuelle de la marge (en jaune):
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452862271-1
Une autre chose que vous aurez remarqué également, c'est que le bloc de droite s'est aligné, non pas avec le haut du bloc, mais le haut du bloc avec sa marge, et donc il ne semble plus que les deux blocs soient alignés.
Dans la prochaine section, je vous expliquerais pourquoi.

Passons à présent au padding. En français, le padding peut au mieux se traduire par du rembourrage, mais en soi, ce mot peut ne pas vous dire grand chose, et c'est normal.
Reprenons nos deux carrés, mais rajoutons cette fois-ci du texte dans le premier:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Le code ici est fondamentalement le même qu'avant, si ce n'est qu'on a rajouté le color: white; qui permet de donner la couleur au texte. Ainsi, tout texte dans le premier carré aura une couleur blanche.


Vu que je n'ai pas de marge, les deux carrés sont collés, mais également le texte à l'intérieur est collé aux bords du carré. À présent, rajoutons un peu de rembourrage avec l'aide de padding:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Là on remarque à nouveau deux choses: le fait que le texte n'est plus collé aux bords du bloc, donc qu'il y a une sorte de "marge intérieure" (ce fameux rembourrage justement). On remarque que le rembourrage fait également tout le tour interne du bloc.
Voici une image pour vous représenter visuellement le padding, ici en violet:
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452862886-2

Vous pouvez voir aussi que le bloc rouge est à présent plus haut (mais aussi plus large bien que ce soit moins marquant) que le noir. Pourtant, les valeurs indiqués dans height et width dont les même, ainsi, ils devraient avoir la même taille, non?
Eh bien je réponds dans la prochaine section! Wink

Notez que j'aurai très bien pu mettre aussi une autre div ou tout autre élément, comme une image par exemple, dans le bloc. J'ai simplement choisi d'utiliser du texte, mais le padding aura un effet sur tout ce qui se trouve à l'intérieur du bloc.


Comment utiliser ces propriétés?


Avant d'aller vous expliquer plus en profondeur les effets exact de margin et padding sur votre bloc, je vais vous expliquer comment utiliser ces propriétés. Avec les codes plus haut, vous avez probablement deviné comment mettre une marge autour de l'ensemble de vote bloc, mais il y a plusieurs façons pour ne mettre des marge qu'à des endroits spécifiques, ou encore, des marges différentes à chaque côté. Il en va bien sûr de même pour le rembourrage.

Dans la suite du texte, je n’écrirais que "marges", mais c'est en réalité pour éviter de mettre à chaque phrase margin/padding, ou marge/rembourrage à chaque fois, vu que les propriétés sont très largement les même.

Notez également que le code de base pour chaque exemple est ceci:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>



Donc comme vous l'avez vu plus haut, pour mettre une marge tout autour d'un élément, il suffit d'utiliser la propriété seule avec une seule et unique valeur. Voici un exemple avec des marges de 10 pixels:
Code:
margin: 10px;
padding: 10px;


En l'utilisant sur le carré rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 10px; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Maintenant, imaginez que je ne veuille des marges qu'à gauche. Il me suffit en réalité de rajouter le suffixe "left" le mot pour gauche en anglais. Voici un exemple avec des marges de 10 pixels:
Code:
margin-left: 10px;
padding-left: 10px;


Voilà ce que cela donne si je mets les marges au carré noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; margin-left: 10px; padding-left: 10px;">Je suis un carré noir</div>


Il en va de même pour chacun des côtés. Il suffit de rajouter le suffixe correspondant. Donc "top" pour le haut, "bottom" pour le bas, et enfin, "right" pour la droite.
Code:
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;


Voici un exemple pour chaque.
Marges à droite pour le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-right: 10px; padding-right: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en haut sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-top: 10px; padding-top: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en bas sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-bottom: 10px; padding-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Visuellement parlant, le dernier ne semble pas faire grand chose, mis à part allonger le bloc rouge. Cependant, on peut voir qu'il y a bien une marge en bas. Preuve en image, avec le padding en violet et le margin en jaune:
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452863970-3


Vous pouvez bien évidemment combiner les quatre côtés pour avoir des marges différentes à chaque côté. Ainsi, prenons cet exemple:
Code:
margin-left: 10px;
margin-right: 5px;
margin-top: 20px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 10px;


Je vais donc appliquer les margin au rouge et appliquer les padding au noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-left: 10px; margin-right: 5px; margin-top: 20px; margin-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding-left: 10px; padding-right: 5px; padding-top: 20px; padding-bottom: 10px;">Je suis un carré noir</div>


Visuellement, avec les padding en violet et les margin en jaune:
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452864228-4Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452864226-5

Vous avez cependant aussi la possibilité, plutôt que d'utiliser chaque propriété de top, bottom, left et right à chaque fois, de tout mettre en une ligne. Pour ceci, c'est très simple: il suffit de mettre les quatre valeurs, l'une après l'autre, en suivant ce sens: top, right, bottom et enfin left (donc haut, droite, bas et gauche). Pour vous en rappeler, vous pouvez imaginer faire un cercle en suivant les aiguilles d'une montre dans votre tête en commençant par en haut.
Ainsi, l'exemple précédent devient:
Code:
margin: 20px 5px 10px 10px;
padding: 20px 5px 10px 10px;


Et si comme plus tôt j'applique les margin au rouge et les padding au noir, on a bien:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 20px 5px 10px 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding: 20px 5px 10px 10px;">Je suis un carré noir</div>


Notez qu'on peut également réduire le nombre de valeurs que l'on met, et ainsi "fusionner" plusieurs valeurs, mais cela suit des règles.

Par exemple, si les marges n'ont que trois valeurs:
Code:
margin: 20px 5px 10px;
padding: 20px 5px 10px;

Ici donc, top aura 20 px, left et right en auront 5px et bottom aura 10px. Ce sont donc les valeurs de droite et gauche qui seront les même.

Si les marges n'ont que deux valeurs:
Code:
margin: 20px 5px;
padding: 20px 5px;

Ici donc, top et bottom auront 20 px; left et right en auront 5px. Ce sont donc les valeurs haut et bas, ainsi que de droite et gauche qui seront les même. La valeur de top & bottom arrive en premier, celle de left & right en second.

Et comme nous l'avons vu tout au début, une seule et unique valeur donne les marge des quatre côtés:
Code:
margin: 20px;
padding: 20px;


Effets de margin et padding


Comme nous avons pu le voir un peu plus tôt, il est temps de voir les effets qu'ont les margin et padding sur les blocs, et leur interaction avec les autres éléments d'une page.

En réalité, le padding et le margin agissent sur la taille d'un élément, et plus particulièrement sur la place que ce dernier prend sur une page. En effet, en temps normal, la taille d'un élément, est pour sa hauteur height + border et pour sa largeur width + border.

Faites tout de même attention, car le border (= la bordure) fait, en général, tout le tour du bloc. Il faut donc compter autant la bordure de gauche que celle de droite en largeur (celle du haut + celle du bas en hauteur) dans votre calcul. Ainsi, si votre bordure est partout de 5 px, vous avez en tout 10 px de bordure en hauteur qui s'ajoute à la hauteur donnée de l'élément, idem pour la largeur.
Cependant, si vous n'avez qu'une bordure en haut de 5 px et nulle part ailleurs, vous n'avez que 5 pixels qui se rajoute à la hauteur de votre élément.


Ainsi, si on prend un bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, on a en tout un bloc de 300 de large et 300 de haut. Donc quelque chose comme ça:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto;"></div>


Hey! C'est quoi ce margin: auto; me direz-vous, et c'est normal parce que j'en n'ai pas parlé. Le margin: auto vous permet en réalité de centrer sur la page ou dans l'élément contenant tout élément à largeur spécifiée et de type bloc. Cela correspond donc à mettre un margin-left: auto; margin-right: auto;. Vous pouvez rajouter des autres marges (de haut et de bas) en les rajoutant à la suite dans le CSS. Si vous les mettez avant, le margin: auto va les "annuler".
Pour savoir pourquoi, je vous conseille le tuto sur l'ordre et l'héritage de Manumanu.


Maintenant, si je venais à ajouter un padding, la taille de l'élément se modifierait en conséquence. Ainsi, au lieu d'avoir le calcul de plus haut, j'ai à présent: pour sa hauteur height + border + padding et pour sa largeur width + border + padding.

Notez que la réflexion sur combien est ajouté est le même que pour le border, vu que le padding fait aussi tout le tour de l'élément, selon les valeurs indiqués.


Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, mais rajoutons un padding de 100px. On a donc en tout un bloc de 500 de large et 500 de haut. En effet, on avait les 300 d'origine (bordure + taille), mais on rajoute encore 200 de padding, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de padding, ce qui font 200 en tout.

Cela donne donc:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto; padding: 100px;"></div>


Voici une image pour vous le représenter:
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452866498-6

Les margin, quant à elles, ne vont pas visuellement agrandir l'élément, mais va influencer la place que va prendre notre bloc sur la page. Par exemple, je vais à présent ajouter deux blocs à mon exemple. Un qui va venir à sa droite, et un qui sera juste en-dessous. N.B. : je vais retirer le margin: auto au bloc et mettre un display: inline-block; vertical-align: top;.


Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


On remarque donc actuellement que la "place" que prend mon élément n'est nulle autre que sa taille, c'est à dire: taille + bordure + padding. Cependant, avec une marge, la place que prendra mon élément sera: taille + bordure + padding + margin.

Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels et padding de 100px. Si on rajoute une marge de 100 px, mon bloc prendra 700 de large et 700 de haut. En effet, on avait les 500 d'origine (bordure + taille + padding), mais on rajoute encore 200 de marge, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de margin, ce qui font 200 en tout.

Dans notre exemple, cela donne ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


Le carré rouge est passé sous notre bloc principal!

En effet, parce que la place que prend le grand bloc est trop "grande", le petit bloc rouge n'a plus la place de se mettre à côté de lui, et de ce fait, va passer à la ligne suivant. Ligne suivant, qui se retrouve donc sous la marge du grand bloc. Ainsi, quand vous utilisez les margin et padding, vous devez faire attention à leur valeur, car c'est avec des valeurs trop grandes que les différents éléments passent "à la ligne" car ils n'ont pas la place.

C'est aussi la raison du pourquoi le vertical-align: top ne semblait pas s'aligner avec le bloc correctement, parce que l'alignement se fait en réalité avec toute la place que prend le bloc, margin comprise. Donc si on aurait voulu que les blocs soient alignés en haut, on aurait du rajouter une margin-top au bloc noir comme ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; margin-top: 10px;"></div>


Je ne rajoute qu'un margin-top, car je veux simplement l'aligner avec le début du bloc, et non pas avoir plus de marge.

Pour fini, foici visuellement, voici la place que prend notre bloc:
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452867524-7

On a donc:

Taille d'un élément = taille donnée + border + padding
Place que prend un élément = taille donnée + border + padding + margin


Cependant, on peut encore se poser une question légitime: qu'est-ce que je fais si je ne veux pas faire des maths dans ma tête pour toujours avoir la bonne taille de bloc? Donc:

Est-ce qu'il y a un moyen d'empêcher le changement de taille?


La réponse est oui, mais seulement depuis l'apparition du CSS3, grâce à la propriété box-sizing. Notez cependant que je ne vais pas vous l'expliquer en profondeur: je laisse le soin au cursus de le faire, notamment l'étape "Un peu de CSS3 et ses exigences". Je vais cependant vous donner un exemple et voir superficiellement cette propriété, simplement pour que vous la connaissiez et puisiez l'utiliser si le cœur vous en dit.

Cependant, la propriété box-sizing ne va influencer que la taille et non pas la place que prend l'élément. Donc le margin aura toujours le même effet.

Prenons donc notre élément, puis le même élément avec un padding, comme normalement:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px;">Et moi je suis cette même boîte avec un padding!</div>


On voit donc, comme on l'a appris, que la taille va changer. Mais à présent, rajoutons à la boîte avec padding un box-sizing avec comme valeur border-box, qui va donc dire que la largeur de la boite est le contenu et le padding, et non pas juste le contenu.
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Les boîtes ne sont pas de la même taille?

Effectivement, la seconde est plus petite! Cela vient du fait que le box-sizing va également influencer sur la bordure, et ainsi, au lieu d'avoir taille totale = taille de base + bordure on a simplement taille totale = taille de base, et donc, la bordure et la padding, au lieu de se rajouter, resterons dans la boîte.

Donc pour avoir la même taille, on devrait rajouter 2 px partout au second bloc pour la bordure, comme ceci:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 202px; height: 102px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Donc de toute façon c'est embêtant?

Oui et non, dans le sens où vous êtes alors certain que votre élément fait bien X de large comme vous l'avez indiqué, quelque soit le padding ou la bordure que vous lui avez donné, et n'aurez alors plus qu'à calculer la marge en plus. donc au lieu de faire une somme de quatre chose, on en a plus que deux.  :star:

Quoiqu'il en soit, il vous est recommandé d'utiliser box-sizing: border-box partout si vous le pouvez, parce que ça facilite la vie de tout le monde! ♥

Et sur les éléments inline?


Mais oui, qu'en est-il du padding et margin des éléments inline? Parce que comme on le sait, les éléments inline se fichent pas mal de leur taille.

Par exemple:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="color: blue;">bleu</span> dedans, parce que c'est joli.


Si je rajoute une taille au span, un élément inline, eh bien... ça ne fait rien.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="width: 400px; height: 100px; color: blue;">bleu</span> dedans, parce que c'est joli.


Cependant, quand on rajoute une margin, la margin du haut et du bas n'ont aucune influence, mais les margin de gauche et droite, elle oui.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Donc si je n'avais qu'une margin-top, ça ne ferait rien:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin-top: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Le padding réagit exactement comme le margin:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Cependant, ils se visualisent tout comme pour un bloc:
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452869267-8Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1452869267-9

Seulement, le haut et le bas n'ont aucun effet. Ou vraiment? Car en effet, s'ils ne "poussent" pas les autres lignes pour faire de la place, mais l'élément s'agrandit bien! Et ceci peut se voir avec un background:

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Pour le margin par contre? Toujours rien.

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Et voilà, vous savez à présent tout sur les margin et les padding! Utilisez cette connaissance à bon escient! :hug:

Toolbar > Cacher les liens Connexion et S'enregistrer - Mer 9 Déc 2015 - 15:46



Bonjour !

Un petit code en libre service à la demande de Chlirr ([url=/t58409-toolbar-elements-visibles-apres-la-connexion][TOOLBAR] éléments visibles après la connexion[/url])

Avant (en déconnecté) :
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design Z1tYCZ3

Après (en déconnecté) :
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design D3Vn8Rr

Le code CSS à rajouter sur votre forum :
PA > Affichage > Images et couleurs > Couleurs > Feuille de style CSS.
Code:
/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"] {
    display: none!important;
}

Astuce Forumactif Javascript - Informations membres - Sam 28 Nov 2015 - 23:44



Hello :)

Nous allons parler d'informations sur le membre qui regarde la page mises à disposition par Forumactif.

Vous connaissez peut-être déjà USERNAME et ses copines (vous pouvez voir la liste officielle ici → http://www.never-utopia.com/popup_help.forum?l=miscvars ). On écrit {USERNAME} et ceci est remplacé par le pseudo du membre qui lit (ou bien par "Invité").

Nous pourrons afficher des informations supplémentaires telles que :
  • si la personnes est connectée
  • son avatar
  • son pseudo
  • son nombre de MP
  • le nombre de message sur le forum
  • ses point de réputation
  • d'autres à voir un peu plus bas Wink


Ces informations peuvent être affichées sur le forum directement, par exemple avec l'avatar dans la barre de navigation :
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 7LLjg1y

Mais on peut aussi les utiliser pour élaborer d'autres codes, par exemple afficher certaines choses seulement si le membre est connecté / déconnecté, s'il a plus de X messages, etc ^^
Exemples possibles :
- Si on a un guide du nouveau, il sera mis en avant sur toutes les pages pour ceux qui ont peu de messages.
- Mettre en avant un message seulement pour les invités (message, ou bien le contexte "court"/"résumé", ou d'autres choses comme ça qui "prennent de la place" pour les membres)
- Faire une PA différente pour connecté / non connecté

Les données



Au moment où je commence ce tutoriel, voici les données que je peux récupérer :

  • session_logged_in : si le membre connecté ou non
  • username :  pseudo du membre
  • user_id : identifiant de membre
  • user_level : si je suis membre simple (0) / droit de modération quelque part (2) / admin (3)
  • user_lang :  langue
  • activate_toolbar : si la toolbar est activée (1) ou non (0)
  • fix_toolbar : la toolbar fixée ou non
  • notifications : notifications activées ou non
  • avatar :  html de l'image de l'avatar
  • user_posts :   nombre de messages du membre sur le forum
  • user_nb_privmsg : nombre de MP
  • point_reputation : nombre de points de réputation


Si la toolbar est activée, on peut également récupérer d'autres d'infos, dont le rang de la personne.

Comment trouver ces données ?



Ces données sont dans un objet javascript (ne partez paaaas !), si vous voulez connaitre leur valeur vous pouvez les trouver comme ceci :

- Avec la console du navigateur. Pour en savoir plus, lisez ce topic => Outils de débug par Valtena, surtout la section "la console".
On fait clic droit, inspecter l'élément. On va aller à l'onglet "Console" et écrire dedans _userdata (puis touche entrée ou cliquer sur Executer)
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 3gbDDqK

Cela vous donnera quelque chose comme ça :
Code:
_userdata["session_logged_in"] = 1; // connecté ou non
_userdata["username"] = "Nihil Scar Winspeare"; // mon pseudo
_userdata["user_id"] = 7734; // mon identifiant de membre (pour accéder au profil par exemple)
_userdata["user_level"] = 0; // si je suis membre simple (0) / admin (1) / droit de modération quelque part (2)
_userdata["user_lang"] = "fr"; // ma langue
_userdata["activate_toolbar"] = 1; // si la toolbar est activée (1) ou non (0)
_userdata["fix_toolbar"] = 0; // si j'ai fixée la toolbar ou non
_userdata["notifications"] = 1; // si j'ai les notifications activées
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />'; // le html de l'image de mon avatar
_userdata["user_posts"] = 1986; // le nombre de messages sur le forum
_userdata["user_nb_privmsg"] = 506; // le nombre de MP
_userdata["point_reputation"] = 236; // le nombre de points de réputation


- Sinon, on peut voir tout ça directement dans le code source. On fait un  clic droit, "afficher le code source", et dedans on cherche "_userdata"
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 72sCy0S

Si ces données n'apparaissent pas, il se peut qu'une modification de votre template overall_header soit la cause. Vérifiez que la variable {HOSTING_JS} est bien présente.


Détail & exemples d'utilisation



J'ai essayé de détailler les variables que j'utilise le plus souvent, ou bien où il y a des petites subtilités à connaitre.

Connecté ou non ?


Code:
_userdata["session_logged_in"] = 1;

Si le membre est connecté la valeur sera 1, sinon cela sera 0.
Exemples d'utilisation :
- masquer un élément si le membre est déconnecté / afficher une zone seulement s'il est connecté, etc...
- pour les générateurs de présentation / commandes sur une page HTML, re-diriger ailleurs si le membre est déconnecté

Pseudo


Code:
_userdata["username"] = "Nihil Scar Winspeare";

Connecté : Pseudo du membre.
Déconnecté : Anonymous

Code:
_userdata["user_id"] = 7734;

Connecté : Identifiant de l'utilisateur. L'id (identifiant) permet par exemple d'accéder au profil de l'utilisateur. Je suis 7734, donc le lien est celui ci → http://www.never-utopia.com/u7734
Déconnecté : la valeur est -1

Autorisations


Code:
_userdata["user_level"] = 0;

0 = simple membre ou déconnecté
1 = admin
2 = droits de modération quelque part
/!\ Pour ce point là, on lit tout et son contraire, je vous conseille donc de faire quelques tests pour être absolument sûrs. Surtout qu'il existe d'autres façons de vérifier si une personne est modo / admin ^^

Avatar


Code:
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />';

Dans tous les cas cela sera une balise image html.
Si connecté : avatar du membre
Si connecté et pas d'avatar : avatar par défaut dans le Panneau d'Admin
Si déconnecté : avatar par défaut dans le Panneau d'Admin
Exemple utilisation : - http://www.never-utopia.com/t56172-rajouter-l-avatar-de-l-utilisateur

Réputation


Code:
_userdata["point_reputation"] = 236;

Les points de réputation (Le système de réputation (Evaluation des posts + le bouton Merci))

Rang


/!\ Il faut que la toolbar soit activée
Code:
_lang["rank_title"] = "V.I.P.";

Si connecté : le rang de la personne (Les rangs)
Si déconnecté : vide
Exemple :
- Beaucoup de forum de RP utilisent les rangs pour les groupes. On pourrait par exemple changer le thème (ou juste certains petits éléments), ou encore rajouter un lien rapide vers le quartier général d'un groupe, etc)


Comment les utiliser ?


Certaines variables peuvent s'utiliser telle quelle en mettant leurs valeurs, d'autres permettent de faire des tests afin de faire un code différent en fonction de leur valeur.

Par exemple :
Code:
if (_userdata.session_logged_in == 1) {
    /* code si connecté */
}


Spoiler:
Le code peut se simplifier comme ça car 1 = vrai :
Code:
if (_userdata.session_logged_in) {
    /* code si connecté */
}



Pouvoir les utiliser comme on utilise {USERNAME}



On peut rajouter ce javascript sur toutes les pages :
PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
Code:
$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    });
});


Si je veux afficher seulement les MP, dans mon HTML je peux faire comme ceci par exemple :
Code:
Mes MP : <span class="js-user_nb_privmsg"></span>


Le code va insérer la valeur à l'intérieur de la balise span, pour insérer la bonne valeur :
Code:
Mes MP : <span class="js-user_nb_privmsg">155</span>


Voici un exemple avec plus de html :
Code:
Utilisateur connecté ? <span class="js-session_logged_in"></span><br/>
Pseudo : <span class="js-username"></span><br/>
Id : <span class="js-user_id"></span><br/>
Image de l'avatar : <span class="js-avatar"></span><br/>
Nombre de messages : <span class="js-user_posts"></span><br/>
Nombre de messages privés <span class="js-user_nb_privmsg"></span><br/>
Nombre de points de réputation <span class="js-point_reputation"></span><br/>


Et grâce au javascript, le contenu des span sera changé comme ceci :
Code:
Utilisateur connecté ? <span class="js-session_logged_in">1</span><br>
Pseudo : <span class="js-username">Nihil Scar Winspeare</span><br>
Image de l'avatar : <span class="js-avatar"><img src="http://img15.hostingpics.net/pics/602962nihiloffline.png" alt=""></span><br>
Nombre de messages : <span class="js-user_posts">1991</span><br>
Nombre de messages privés <span class="js-user_nb_privmsg">506</span><br>
Nombre de points de réputation <span class="js-point_reputation">237</span><br>


Un exemple avec toutes les variables :
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design FY6TFIP

Précicison → si vous utilisiez précédemment ce tuto, vous pouvez l'enlever. En effet, le code fourni ici est plus complet. :)

Merci ♥

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.

Rajouter l'avatar de l'utilisateur - Sam 27 Juin 2015 - 15:30



Rajouter sur la page l'avatar du membre connecté



Ce code permet d'ajouter l'avatar du membre où on le souhaite sur une page du forum.
Exemple d'utilisation :
- Ajouter l'avatar du membre à côté de la réponse rapide

Note : il y a des tas de manière de faire, ce tutoriel n'est qu'un exemple Wink
Pour faciliter le tutoriel, j'utilise jQuery qui est mis par défaut sur les forumactifs et qui va nous faciliter le code.

Utilisation



Partout où vous voulez mettre l'avatar de l'utilisateur, il suffit de rajouter la classe ".js-useravatar" à votre conteneur. La balise image avec l'avatar sera rajoutée ensuite en javascript à l'intérieur de votre élément.

Je dois donc par exemple mettre le code :
Code:
<div class="js-useravatar"></div>


Et le contenu de la div sera remplacé par l'image à l'intérieur de ma div.

   
Je peux aussi utiliser une balise span, une balise p, etc... Il faut juste que cela ne soit pas une balise orpheline (une balise auto-fermante, comme par exemple br, img, input etc).


Il est possible de mettre un contenu par défaut, qui sera ensuite remplacé par l'image de l'avatar, ou qui s'affichera si le javascript ne fonctionne pas. Par exemple :
Code:
<div class="js-useravatar">Contenu temporaire</div>


Styliser



Comment styliser l'image de l'avatar ?
Je vous conseille de rajouter une classe supplémentaire à votre balise.
Ainsi par exemple si mon avatar se trouvera dans un panneau coulissant sur le côté, je peux mettre une seconde classe comme ceci :
Code:
<div class="js-useravatar panneau_avatar"></div>


Et ensuite je met mon CSS comme ceci :
Code:
.panneau_avatar {
    /* style du bloc autour de l.image*/
}

.panneau_avatar img {
    /* style de l.image */
}


Pourquoi mettre une seconde classe, et ne pas styliser directement .js-useravatar ?
→ A priori, vous allez peut-être utiliser cet ajout de l'avatar à plusieurs endroits sur le forum. Si vous stylisez directement .js-useravatar, vous risquez de vous retrouver avec le même style à plusieurs endroits.
En rajoutant une seconde classe, vous êtes sûrs de bien séparer d'un côté le style (avec la classe supplémentaire ajoutée) et le javascript qui ajoute l'avatar (avec la classe .js-useravatar).


Javascript



Le JS, on le met dans PA > Modules > Gestion des codes Javascript.
Ensuite, on rajoute un nouveau script qu'on peut appeler par exemple "Ajouter avatar du membre", qu'on active sur les pages où on en a besoin :)

Code :
Code:
/* On attend le chargement */
$(function(){
    /* on récupère les endroits où on doit ajouter l'avatar */
    var $loadAvatar = $('.js-useravatar');
    
    /* s'il y a des endroits où on doit ajouter l'avatar */
    if ($loadAvatar.length > 0) {
        
        /* on remplace le contenu de .js-useravatar en mettant l'avatar */
        $loadAvatar.html(_userdata.avatar);
        
    }
});


Fonctionnement


Avant d'écrire le javascript, on va d'abord se demander "qu'est ce que je veux faire" ? On ne se jette pas d'un coup sur le code sans réfléchir :)

Je veux remplacer l'avatar de l'utilisateur à l'intérieur des éléments avec la classe js-useravatar.


A partir de cela, je vais me poser quelques questions :

- Comment sélectionner les éléments avec la class js-useravatar ?
En jQuery, on va mettre ceci, à l'intérieur de $(' '), je met mon sélecteur, ça fonctionne comme le CSS.
En CSS mon sélecteur est .js-useravatar, je fais donc
Code:
$('.js-useravatar');


- Comment je fais pour obtenir l'avatar de l'utilisateur  ?
Forumactif nous met gentiment à disposition une liste d'informations ♥. Il s'agit d'un objet javascript _userdata, qui contient diverses informations sur l'utilisateur sur le site. A ma connaissance, il n'y a pas de sujet officiel de ForumActif qui les recense. Pour en savoir plus, vous pouvez lire ce sujet
Celle qui nous intéresse est celle de l'avatar. Pour y accéder, il nous suffit d'écrire _userdata.avatar. Elle contient un code HTML avec l'image du membre.

Exemple du HTML qu'elle peut contenir :
Code:
<img src="http://r26.imgfast.net/users/2613/44/65/70/avatars/1-23.jpg" alt="" />


Si l'utilisateur est déconnecté ou bien qu'il n'a pas d'avatar, la valeur par défaut sera :
Code:
<img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" alt="" />


Vous pouvez personnaliser ces avatars par défaut via le panneau d'administration.
PA > Affichage > Avatars > Gestion des avatars > Administration de vos avatars
On peut ainsi définir un avatar par défaut ainsi qu'un avatar pour les invités.

Si le membre est déconnecté et que vous n'avez pas défini d'avatar pour les invités, c'est l'avatar par défaut qui d'affichera. Sinon, cela sera l’avatar pour les invités :)


- Une fois que j'ai ces 2 informations... Comment je fais pour rajouter mon avatar à l'intérieur de .js-useravatar :toto: ?
On va utiliser une petite méthode de jQuery qui permet de remplacer le contenu d'un élément. Par exemple :
Code:
$('.js-useravatar').html("coucou");

Ce code là permet de remplacer le html de .js-useravatar par coucou :)


Code Javascript, un peu plus en détail


On peut voir que tout le contenu de notre code se trouve à l'intérieur de ceci :
Code:
$(function(){
    /* code à l'intérieur */
});

On ne peut pas manipuler de manière sûre une page tant que la page n'est pas "prête". Si vous tentez de sélectionner quelque chose sur une page qui n'est pas chargée, l'élément ne sera pas trouvable, et vous allez vous retrouver avec rien qui ne se passe ou de jolies erreurs :)

Avec ce code, on attend que le DOM (la structure de la page) soit chargé, comme ça on peut faire nos modifications, nos sélections, sans problème.

Précision:
Il s'agit d'un équivalent de ce code là que vous verrez aussi parfois.
Code:
$(document).ready(function() {
    /* code à l'intérieur */
});

Cette version là est juste un peu plus longue.


Code:
var $loadAvatar = $('.js-useravatar');

Cette ligne permet de sélectionner les éléments avec la classe "js-useravatar", et on va les stocker dans une variable nommée $loadAvatar.

Code:
if ($loadAvatar.length > 0) {
    /* code à l'intérieur */
}

Cette partie là n'est pas obligatoire, mais elle permet d'être sûrs qu'on a bien un avatar à ajouter sur la page.
$loadAvatar.length va me donner le nombre d'éléments sélectionnés. Je regarde donc s'il y a plus de 0 (donc au minimum 1) élément sélectionné.
Cela signifie "s'il y a un élément dans $loadAvatar, fait ..."

Et enfin, la dernière ligne :
Code:
$loadAvatar.html(_userdata.avatar);

Elle dit → remplace le html de $loadAvatar par _userdata.avatar
Tout le contenu à l'intérieur de chaque $loadAvatar sera remplacé par notre image de profil.

En cas de problème, n'hésitez pas à poster dans la section Problème avec mon code.

Chatbox - Styliser les messages de connexion / déconnexion (CSS) - Sam 27 Déc 2014 - 19:14



Chatbox
Changer le style des messages de connexion / déconnexion


Voici un petit libre service / tuto expliquant comment changer le style des messages de connexion et déconnexion sur la chatbox. Je fournis directement le code CSS, puis les explications suivent pour les intéressés :toto:

Rendu visuel
(en haut messages normaux, en dessous messages modifiés)

Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design 1419703079-screen-cb-nu
Oui oui, je sais, c'est moche, je donne ici un exemple très simple avec très peu de CSS.

Le code n'est pas sous hide,
mais bien entendu un petit merci est toujours apprécié ♥

Code en libre service


CSS
PA > Affichage > Couleurs > Feuille de style CSS

Code:
/* Message de connexion CB */
.msg span[style*="green"] strong {
    color: #2980b9; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}

/* Message de déconnexion CB */
.msg span[style*="red"] strong {
    color: #8e44ad; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}


Explications


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

Prérequis


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

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

  • Sélectionner une balise.
    Code:
    strong { }


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


  • Sélecteur de descendance.
    Code:
    .msg span { }


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




Le HTML


Voilà à quoi ressemble la structure HTML d'un message de connexion sur la chatbox (il y a juste la classe chatbox_row_1 qui change une ligne sur 2 pour être chatbox_row_2) :
Code:
<p class="chatbox_row_1 clearfix">
    <span title="27 Déc 2014" class="date-and-time">[17:52:55]</span> 
    <span class="msg">
        <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:52</strong></span>
    </span>
</p>


Pour comparer:
En comparaison, voici la structure html de base pour un message tout simple sur la CB (pas de couleur pour le membre, pas de droit de modération, rien de spécial quoi)
Code:
<p class="chatbox_row_2 clearfix">
    <span title="27 Déc 2014" class="date-and-time">[17:49:01]</span> 
    <span class="user-msg">
        <span class="user">
            <a target="_blank" onclick="return copy_user_name('Truc');" href="/u2">Truc</a> : 
        </span>
        <span class="msg">
            <span>Message</span>
        </span>
    </span>
</p>



La partie qui nous intéresse étant celle ci :
Code:
<span class="msg">
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
</span>


  1. Les messages sont dans une span avec la classe "msg".

  2. Ensuite pour les messages de connexion il y a une span avec du CSS directement appliqué : style="color:green" pour un message de connexion et style="color:red" pour un message de déconnexion.

  3. Et enfin, le texte est dans une balise strong qui permet de mettre en gras. C'est celle ci que nous allons tenter de cibler ♥

Le CSS


Il nous suffit de reprendre ce qu'il y a au dessus :


  1. Sélectionner une span avec la classe "msg" :
    Code:
    .msg


  2. Ensuite, on va sélectionner à l'intérieur de la classe "msg" une balise span :
    Code:
    .msg span


    Cette span a du CSS directement appliqué, avec l'attribut style (style="color:green")
    Pour sélectionner une span avec l'attribut style :
    Code:
    span[style]


    Pour sélectionner une span avec l'attribut style qui a une valeur (eh oui, on veut pouvoir sélectionner seulement les couleurs de connexions et de déconnexions !)
    Ici notre HTML est :
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>

    Le sélecteur CSS est donc :
    Code:
    span[style="color:green"]


  3. Et enfin... On veut sélectionner la balise strong à l'intérieur, ce qui donne donc :
    Code:
    .msg span[style="color:green"] strong {
       /* personnaliser ici */
    }




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

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

[style*="green"] signifie "il faut qu'il y ait écrit "green" dans l'attribut style".

[style="color:green"] signifie il faut que l'attribut style ai exactement comme valeur "color:green" .

Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple.


Ensuite pour le message de déconnexion c'est exactement la même chose, il suffit de changer "green" en "red".

Aucun risque d'interférer avec la couleur des messages mises par les membres sur la CB. Pour ces messages là FA met la couleur grâce au code couleur en hexa. Du coup, si quelqu'un met son message en rouge il y a aura #FF0000 et non pas "red".


A partir de la connaissance de ce sélecteur, différents styles peuvent découler, l'un de mes prochains tuto visera à pouvoir "personnaliser" les phrases de connexion (ici j'ai mis 2 exemples aléatoires, le reste du CSS est celui du thème actuel de Never Utopia).

Exemple:

Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design DEGHzqg

Bloc de partenaires décalés, zoom au survol - Mar 23 Déc 2014 - 0:42



Hello hello,

Un petit libre service pour afficher la liste de ses partenaires, créé à la demande de 1charlotte qui a réalisé le schéma.

Informations


Rendu visuel :




  • Largeur du bloc : 791px.

  • Les images de partenaire font 88px * 31px.

  • 7 partenaires par ligne


Vous pouvez personnaliser le crédit vers Never Utopia, mais ne l'enlevez pas


Les codes


Les codes ne sont pas sous hide, vous pouvez les tester directement.
Mais si vous le souhaitez, un merci est toujours accepté, personne ne vous mangera.
Et ça fait toujours plaisir (◕‿◕✿)


HTML :
Vous pouvez le placer où vous souhaitez dans vos templates, une page html, la PA...

Spoiler:
Code:
<!-------------------------------
 * BLOC PARTENAIRES AVEC DECALAGE
 * Libre service - Never Utopia
--------------------------------->
<div class="staggered-partners">
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/1abc9c/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/16a085/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2ecc71/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/27ae60/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/3498db/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2980b9/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/9b59b6/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/8e44ad/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/34495e/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2c3e50/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/95a5a6/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/e74c3c/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/e67e22/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/f1c40f/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/1abc9c/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/16a085/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2ecc71/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/27ae60/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/3498db/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/2980b9/ffffff" alt="Never Utopia" /></a>
    <a href="http://www.never-utopia.com/" title="Never Utopia" class="partner-link" target="_blank"><img src="http://placehold.it/88x31/9b59b6/ffffff" alt="Never Utopia" /></a>

    <div class="credits-partners"><a href="http://www.never-utopia.com/" title="Bloc partenaire venant de Never Utopia">Never Utopia ♥</a></div>
</div>
<!-- FIN BLOC PARTENAIRE -->


Le CSS
PA > Affichage > Couleurs > Feuille de style CSS

Spoiler:
Code:
/*
 * ------------------------------
 * BLOC PARTENAIRES AVEC DECALAGE
 * Libre service - Never Utopia
 * ------------------------------
 */

/* Bloc contenant les partenaires */
.staggered-partners {
  font-size: 0; /* ne pas enlever */
  width: 791px;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Affichage pour un lien partenaire */
.staggered-partners .partner-link {
  display: inline-block;
  width: 88px; /* largeur */
  height: 31px; /* hauteur */
  margin-right: 20px;
}

/* Style image du partenaire */
.staggered-partners .partner-link img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: transform 600ms;
  transition: transform 600ms;
}

/* Effet au survol sur image */
.staggered-partners .partner-link:hover img {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  z-index: 1;
}

/* Decalage a gauche une ligne sur 2 */
.staggered-partners .partner-link:nth-child(14n+8) {
  margin-left: 55px;
}

/* Suppression de la marge à droite une ligne sur 2 */
.staggered-partners .partner-link:nth-child(14n) {
  margin-right: 0;
}

/* Style quand le lien n'a pas d'image */
.staggered-partners .partner-link:empty {
  display: none;
}

/* Crédit */
.credits-partners {
    margin-top: 10px;
    font-size: 12px;
    text-align: right;
    font-family: sans-serif;
    opacity: 0.3;
    transition: all 1s;
    -webkit-transition: all 1s;
}

/* Lien */
.credits-partners a {
    text-decoration: none;
    color: black;
}

/* Apparition du crédit au survol du bloc */
.staggered-partners:hover .credits-partners {
    opacity: 1;
}

/*------------------------------
 * FIN BLOC PARTENAIRES AVEC DECALAGE
 * ------------------------------ */


En cas de problème ou de difficulté à personnaliser, il y a une partie "Un problème en codage" qui est là pour ça.


Placement

Par exemple pour le mettre en dessous du QEEL et de la chatbox du bas, on peut le mettre dans le template index_body après les lignes
Code:
{CHATBOX_BOTTOM}
<br clear="all" />


Ce qui peut donner :
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design GJInaN2




On peut aussi mettre le code dans un message d'accueil (PA > Affichage > Page d'accueil > Généralités)
Tag auteur_nihil_scar_winspeare sur Never Utopia - graphisme, codage et game design N0gIb0e


Revenir en haut

La date/heure actuelle est Ven 17 Jan 2020 - 20:50