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.


200 résultats trouvés pour html

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

Un seul compte, plusieurs personnages : Choix déroulant




Alors, le multicompte !

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

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

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


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

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

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

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


Version 1


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


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

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

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


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

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


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

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


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

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


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

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


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


Version 2


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

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

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


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

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


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

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


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

4. Apparence avec 2 profils


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

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


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


Donc en gros


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

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

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


Je peux mettre quoi comme champ personnalisé exactement?

N'importe quoi. Littéralement.

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


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

Et un petit CSS pour faire fonctionner l'infobulle.

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

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


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

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

Enjoy \o/

Littleelda

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

Fondu Avatar dans la Liste de Membres




Ce LS est pour forum en PHPBB2.


Bonjour,

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


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

Aperçus : Normal et Ouvert

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

et changer le tout pour celui-ci :

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

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

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





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

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

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

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

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


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

        }

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

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

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

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

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

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

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

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

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


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


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

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

Modifier les textes et nombres des variables du QEEL




Bonjour,

Le code suivant fait suite à une demande d'un membre qui pourra sans doute servir à d'autres. :)
Aperçu:
Tag html sur Never Utopia - graphisme, codage et game design Qeel10

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

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

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

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


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

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


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

Onyx

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




Boîte de réception originale


Salut !

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

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


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


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



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


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

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

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




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


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

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




3. Affichage du message privé (Template Privmsgs_Read_Body)


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

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

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

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




4. Mise en forme (CSS)


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

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

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

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

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

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

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

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



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

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

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

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


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

À plus !


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

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

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




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

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

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

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

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



D'autres exemples pour montrer des idées :
Spoiler:
Exemple en rajoutant une petite couronne ♔ devant les rouges (les meilleurs /zbaf/) :
Tag html sur Never Utopia - graphisme, codage et game design HsJwceM

Avec une barre de couleur à gauche :
Tag html sur Never Utopia - graphisme, codage et game design XFRhG0V



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

Explications


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

Prérequis CSS


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

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

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

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


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

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


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

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



Le HTML


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

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

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


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


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

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

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




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

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


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

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

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

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

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

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

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


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

Personnaliser


Ajouter plusieurs groupes


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

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


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


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

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

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

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

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

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

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

Maintenant vous n'avez plus qu'à personnaliser !

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

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

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




Bonjour à tous !

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

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

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

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

Code:
.Cache_Texte{

}


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

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

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

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


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


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

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

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


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


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


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

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

}


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


Code:
 .Cache_Texte{

}

.Cache_Texte :hover{

}


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

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


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

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

</div>

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

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

</div>


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


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

</style>


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



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



Ezeÿel Sköell

Loup de la meute

Petit-fils de l’ancien ulfric

Autre texte ici blablabla



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


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



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

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

Ayael

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



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

Capture d'écran / Capture au survol


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


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

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


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

}

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


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

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

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

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

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

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

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



Le html

Code:
<div class="proposition_avatar">   

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

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


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


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

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


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

}

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


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

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

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


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




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

Cheshire Cat

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



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

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

Aperçu en image:
Tag html sur Never Utopia - graphisme, codage et game design 500fa782ba Tag html sur Never Utopia - graphisme, codage et game design 26905a9a17


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://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


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


Une fois cela fait, enregistrez et validez votre template.

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


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

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

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


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

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

Cheshire Cat

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



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

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

Rendu en image:
Tag html sur Never Utopia - graphisme, codage et game design Eaf63d4e4b


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://illiweb.com/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:
Tag html sur Never Utopia - graphisme, codage et game design 1b8e922c7a


Optimisé pour tous les navigateurs - Version PHPBB2

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

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


Une fois cela fait, enregistrez et validez votre template.

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

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


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

Cheshire Cat

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



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

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

Rendu en image:
Tag html sur Never Utopia - graphisme, codage et game design 7eeaa977d8


Optimisé pour tous les navigateurs - Toutes versions

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


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


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

IceCreamMaster

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



Fiche de RP beige



C'est ma toute première fiche :3

Le code est en hide. Aperçu :3

Marie

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


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


Bonjour/ Bonsoir!

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

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



Template memberlist_body:

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




Le CSS:

Code:

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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


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


Voilà!

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

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

Littleelda

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



Fiche de RP cerisier



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

Deux trois choses à savoir avant :

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

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

Aperçu photo:

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


Aperçu tel quel:







Titre de votre rp


Feat. Pseudos des participants




Et confisus cum clientes miser sis aetatem dederis amicitiam esses summittendo ut postridie si miser nec esses esses ubi ut cum si ut unde venias ubi tandem vel ambigente hesterno cum paria stipite tot te haerebis tot numerando te ambigente tot et ad confisus incognitus eadem interrogatus per nec salutandi diutius adsiduitati illo stipite confisus indiscretus tot tempus summittendo si ubi adscitus incognitus vero amicitiam dederis repentinus interrogatus vero adscitus ut adfabilitate haerebis in reverteris discesseris ambigente ubi haerebis et dederis in paria salutandi quo interrogatus tandem discesseris sis quo tot clientes incognitus agnitus haerebis conteres triennio vero dierum tandem.Et confisus cum clientes miser sis aetatem dederis amicitiam esses summittendo ut postridie si miser nec esses esses ubi ut cum si ut unde venias ubi tandem vel ambigente hesterno cum paria stipite tot te haerebis tot numerando te ambigente tot et ad confisus incognitus eadem interrogatus per nec salutandi diutius adsiduitati illo stipite confisus indiscretus tot tempus summittendo si ubi adscitus incognitus vero amicitiam dederis repentinus interrogatus vero adscitus ut adfabilitate haerebis in reverteris discesseris ambigente ubi haerebis et dederis in paria salutandi quo interrogatus tandem discesseris sis quo tot clientes incognitus agnitus haerebis conteres triennio vero dierum tandem.



©Codage by Littleelda from Never Utopia






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

Créer un coin sympathique pour converser (chatbox en page html) - Jeu 2 Fév 2017 - 12:15


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


Bien le bonjour à toutes et à tous.

Aujourd'hui, je viens vous proposer de coder une page HTML de votre forum pour y créer un coin sympathique pour votre CB. Pourquoi est-ce que je préfère passer par une page indépendante au lieu de mettre la CB directement sur mon forum ? Tout simplement par ce que les CB ne s'intègre pas forcément à la structure et au design réalisé.

Toutes versions ▬ CSS, HTML & Templates ▬ Aperçu (screen)

Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.


Le code de la page HTML :


Pour commencer, il faut débuter une nouvelle page HTML :

Panneau d'administration (en avancée) => Modules => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancé.

Donnez un titre à votre page. J'ai fait au plus simple avec "tchatbox".

Maintenant insérez le code entier :

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titre de votre page.</title>
  <style type="text/css">
    body {
      margin: 0px;
      background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
    }

    .reglement_CB {
      height: 610px;
      width: 470px;
      padding: 10px;
      text-align: justify;
      color: black;
      font-size: 14px;
    }

    .cb_page {
      box-shadow: 0px 0px 2px black;
      margin-top: 5px;
      margin-left: 5px;
      width: 850px;
      height: 630px;
    }

    .cb_page,
    .reglement_CB {
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0"></iframe>
  <div class="reglement_CB">
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
</body>
</html>


Détail du code :


Code:
<style type="text/css">
  body {
    margin: 0px;
    background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
  }

  .reglement_CB {
    height: 610px;
    width: 470px;
    padding: 10px;
    text-align: justify;
    color: black;
    font-size: 14px;
  }

  .cb_page {
    box-shadow: 0px 0px 2px black;
    margin-top: 5px;
    margin-left: 5px;
    width: 850px;
    height: 630px;
  }

  .cb_page,
  .reglement_CB {
    display: inline-block;
    vertical-align: top;
  }
</style>

Ceci est le CSS de votre page HTML, il doit être impérativement entre les balises :
Code:
<style type="text/css"></style>

Si vous souhaitez personnaliser votre CB avec du CSS, vous devez passer par la feuille de CSS de votre forum et non dans la page HTML, sinon ça ne prendra pas en compte vos modifications.


Code:
<iframe src="/chatbox/index.forum" class="cb_page" frameborder="0" ></iframe>

Ceci est votre CB mise en iframe pour l'intégrer à la page. Elle a la classe "cb_page", donc dans le CSS vous pouvez lui donner les propriétés que vous souhaitez, notamment sa hauteur (height) et sa largeur (width). La hauteur et la largeur sont impératives sinon votre CB sera toute petite.


Code:
<div class="reglement_CB"><div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>

J'ai mis en place cette partie pour incorporer le règlement de la CB. Vous pouvez y mettre ce qui vous chante, comme une image, des liens menant à divers sujets de votre forum, etc.


Faire venir les membres sur la page.


Votre salon privé est opérationnel, mais il faut faire venir les membres maintenant.

Il n'y aura rien de plus simple dans la pratique. Il suffit d'insérer le lien de votre page HTML où vous le souhaitez :

Spoiler:
Tag html sur Never Utopia - graphisme, codage et game design 388363screenCB2TutoNU


Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"

Code:
<div style="text-align: center;"><a href="Lien de votre page HTML" target="_blank"><img src="Lien de l'image de présentation" alt="Visiter la chatbox" /></a></div>


A vous de voir comment vous voulez rendre visible cette invitation à la papote.


Merci d'avoir suivi ce petit LS. N'oubliez pas de créditer Never-Utopia si vous l'utilisez.

Solaris

Soft Ice - Contexte - Mer 1 Fév 2017 - 20:45



Soft Ice - Contexte



Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.


Bien le bonjour à vous ! C'est caché là, pour proposeeeeeeer ! >< Bref.

Voici mon premier libre service. Je compte faire un pack contenant plusieurs élément regroupés sous le nom "Soft Ice". En voici un aperçu. Le fond bleu pâle autour du cadre n'est pas fourni. Very Happy Le code est compatible avec la dernière version de Firefox, Edge et Chrome... le reste n'a pas été testé.

Pour rappel, il est interdit d'enlever la signature de la fiche. Merci de votre compréhension


Voici le HTML :

Code:
<div class="soft-ice-container"><img class="soft-ice-image" src="http://orig10.deviantart.net/feb1/f/2011/163/8/a/ice_city_by_molybdenumgp03-d3ipf49.jpg" alt="Illustration du contexte" /><section class="soft-ice-content-container"><div class="soft-ice-title soft-ice-title-big">À l'aube d'un Lorem Ipsum</div>
<div class="soft-ice-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
<div class="soft-ice-title">Chapitre 1</div>
<div class="soft-ice-text"><img class="soft-ice-image-round left" src="http://i.imgur.com/BQtRmzZ.png" alt="Ice cube" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.<div class="soft-ice-clear"></div></div>
<div class="soft-ice-title">Chapitre 2</div>
<div class="soft-ice-text"><img class="soft-ice-image-round right" src="http://i.imgur.com/BQtRmzZ.png" alt="Ice cube" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<div class="soft-ice-clear"></div></div>
<div class="soft-ice-title">Chapitre 3</div>
<img class="soft-ice-image soft-ice-image-secondary" src="http://orig10.deviantart.net/feb1/f/2011/163/8/a/ice_city_by_molybdenumgp03-d3ipf49.jpg" alt="Illustration contexte 2" /><div class="soft-ice-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
<small>Codage © Solaris @ Never-Utopia</small></section></div>


Ainsi que le code CSS :

Code:
.soft-ice-container {
   background-color: #fff;
   border-style: solid;
   border-width: 2px 1px;
   border-color: #a6beee;
   border-radius: 1em 1em 1em 1em / 3em 3em 3em 3em;
   color: #414245;
   overflow: hidden;
   box-shadow: 0 0 3px 0 #a6beee;
   text-shadow: 3px 4px 3px #a6beee;
}

.soft-ice-image {
   width: 100%;
   border-radius: 0 0 50% 50% / 0 0 15px 15px;
   border-bottom: 2px solid #a6beee;
   height: auto;
}

.soft-ice-image-secondary {
   margin: 0 5%;
   width: 90%;
}

.soft-ice-content-container {
   padding: 0.5em 1em 1em;
}

.soft-ice-title {
   border-bottom: 2px solid #a6beee;
   border-left: 1px solid #a6beee;
   border-radius: 1em 0 0 1em;
   font-size: 20px;
   padding: 0.25em 1em;
   margin-right: 0.75em;
   position: relative;
}

.soft-ice-title::after {
   content: "";
   position: absolute;
   width: 0.5em;
   height: 1em;
   right: -0.5em;
   bottom: -2px;
   border-style: solid;
   border-width: 1px 2px 2px 0;
   border-color: #a6beee #a6beee #a6beee transparent;
   border-radius: 0 0.5em 0.5em 0;
}

.soft-ice-title::before {
   content: "";
   position: absolute;
   width: 0.25em;
   height: 0.5em;
   right: 0;
   bottom: 1em;
   border-style: solid;
   border-width: 0 0 1px 1px;
   border-color: transparent transparent #a6beee #a6beee;
   border-radius: 0.25em 0 0 0.25em;
}

.soft-ice-title-big {
   font-size: 30px;
   margin-bottom: 0.25em;
}

.soft-ice-text {
   position: relative;
   margin: 0 1em;
   padding: 5px 5px 7px;
   border-bottom: 1px solid #a6beee;
}

.soft-ice-text::before {
   content: "";
   position: absolute;
   left: -0.5em;
   bottom: -1px;
   height: 1em;
   width: 0.5em;
   border-bottom: 1px solid #a6beee;
   border-left: 1px solid #a6beee;
   border-radius: 1em 0 0 1em;
}

.soft-ice-text::after {
   content: "";
   position: absolute;
   right: -0.5em;
   bottom: -1px;
   height: 1em;
   width: 0.5em;
   border-bottom: 1px solid #a6beee;
   border-right: 1px solid #a6beee;
   border-radius: 0 1em 1em 0;
}

.soft-ice-image-round {
   width: 150px;
   height: auto;
   border: 1px solid #a6beee;
   border-radius: 50%;
}

.soft-ice-image-round.left {
   float: left;
   margin-right: 1em;
}

.soft-ice-image-round.right {
   float: right;
   margin-left: 1em;
}

.soft-ice-clear {
   clear: both;
}


Le code CSS est à ajouter dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS
Il est recommandé de mettre un retour chariot (un appui sur la touche entrée) après le titre principal, ainsi qu'autour des titres secondaires, à des fins esthétiques, mais aussi de clarté.


Voici comment utiliser au mieux ce template de contexte


Tout ce qui suit est à placer dans la section .soft-ice-content-container, avant la balise small.

.soft-ice-title : Pour tous les titres
.soft-ice-title-big : Pour les titres principaux

.soft-ice-text : Bloc de texte
.soft-ice-image-round : Dans un bloc de texte, sert à placer une image ronde
.left ou .right : Couplé avec .soft-ice-image-round, permet de placer l'image à gauche ou à droite respectivement. L'une des deux est obligatoire
.soft-ice-clear : Juste avant la fermeture de la div .soft-ice-text, mais seulement s'il y a une image en .left ou .right

.soft-ice-image : Une image large, avec une bordure en dessous.
.soft-ice-image-secondary : Classe pour les images secondaires du message, mais pas les rondes.


Liens vers les autres modèles :
Rien pour le moment

Invité

Fiche de présentation "luxe" - Jeu 29 Déc 2016 - 16:39

{#}html{/#} {#}css{/#} {#}présentation{/#} {#}auteur_Shaneliae{/#}

Fiche de présentation "luxe"



Bonjour à tous !

Voici une petit fiche de présentation que j'ai faite il y a quelques temps pour un de mes personnages. Je vous la laisse donc ici et à vous d'en faire ce que vous voulez ♥

- Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

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://illiweb.com/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 "http://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 !

Kanae

Présentation simple et bleutée - Ven 16 Déc 2016 - 7:55



Présentation Simple et Bleutée



Coucou ! Cette fiche vous est proposée suite à la demande de Vani qui voulait une fiche toute simple et qui s'intégrait bien à son forum à dominante bleue.

Petit aperçu :
Cliquez ici


Le code vous est offert directement et sans balise < hide > mais un petit mot gentil fait toujours plaisir et une critique constructive permet toujours de s'améliorer.
N'hésitez donc pas à me faire part de vos impressions !


Intégrer la police au Templace Overall_header



Rendez-vous dans PA > Affichage > Templates > Overall_header et copier/coller le code suivant juste après la balise "head" :

Code:
<link href="https://fonts.googleapis.com/css?family=Italianno" rel="stylesheet">


N'oubliez pas de valider votre Template ou la police n'apparaîtra pas !

La police sera utilisable sur l'ensemble de votre forum.



Code du message



Voici le code à intégrer directement par le membre dans son message :

Code:
<div class="fond_presa"><div class="titre_presa">Prénom Nom</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div><table style="margin: 40px 20px 0 20px;"><tr><td><div class="text_info_1"><b>IDENTITE</b>

<b>Nom :</b> Indiquez
<b>Prénom :</b> Indiquez
<b>Surnom :</b> Indiquez
<b>Âge :</b> Indiquez

<b>Archipel d'origine :</b> Indiquez

<b>Profession :</b> Indiquez
<b>Groupe :</b> Indiquez

<b>Autre :</b> Indiquez</div></td><td><img src="url de l'image" class="image_presa"></td></tr></table>

<div class="titre_presa">Descriptions</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div><div class="text_info_2"><b>DESCRIPTION DU DRAGON</b>

Commencez la description</div><table style="margin: 40px 20px 0 20px;"><tr><td><div class="text_info_3"><b>DESCRIPTION PHYSIQUE</b>

Décrivez votre personnage</div></td><td><div class="text_info_4"><b>DESCRIPTION MENTALE</b>

Décrivez votre personnage</div></td></tr></table>

<div class="titre_presa">Histoire</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div>

<div class="text_info_5"><b>VOTRE PASSE</b>

Histoire de votre personnage</div>
<div class="titre_presa">Et vous ?</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div>

<div class="text_info_6"><b>Derrière l'écran</b>

<b>Prénom :</b> Indiquez
<b>Pseudo :</b> Indiquez
<b>Âge :</b> Indiquez

<b>Comment avez-vous connu le forum ?</b> Indiquez
<b>Quelque chose à ajouter ?</b> Indiquez</div>

<div class="credit_presa"> <a style="color: #F3F7F8;" href="http://www.never-utopia.com">© Never-Utopia</a><br /><span style="color: #C6D3DD;">Kanae</span></div>
</div>



Code du CSS du forum



Et voici le code à intégrer au CSS :

Code:
/******* FICHE DE PRESENTATION *******/
.fond_presa {
  background-image:url(http://img11.hostingpics.net/pics/522854fondimage.png);
  width: 600px;
  margin: auto;
  padding: 20px;
  }
.titre_presa {
  font-family: 'Italianno', cursive;
  text-align: center;
  font-size: 80px;
  margin-top: 60px;
  color: #FFFFFF;
  }
.text_info_1 {
  background-color: #F3F7F8;
  width: 260px;
  height: 270px;
  padding: 25px;
  color: #6F91A8;
  }
.text_info_2 {
  margin: 40px 20px 0 20px;
  background-color: #F3F7F8;
  width: 510px;
  height: 100px;
  padding: 25px;
  overflow: auto;
  color: #6F91A8;
  }
.text_info_3 {
  background-color: #F3F7F8;
  width: 206px;
  height: 263px;
  padding: 25px;
  color: #6F91A8;
  overflow: auto;
  }
.text_info_4 {
  background-color: #F3F7F8;
  width: 206px;
  height: 263px;
  padding: 25px;
  margin-left: 40px;
  color: #6F91A8;
  overflow: auto
  }
.text_info_5 {
  background-color: #F3F7F8;
  margin: 0 20px 0 20px;
  width: 510px;
  height: 270px;
  padding: 25px;
  color: #6F91A8;
  overflow: auto;
  }
.text_info_6 {
  background-color: #F3F7F8;
  margin: 0 20px 0 20px;
  width: 510px;
  height: 150px;
  padding: 25px;
  color: #6F91A8;
  overflow: auto;
  }
.image_presa {
  margin-left: 40px;
  width: 200px;
  height: 320px;
  border: 1px #E6EEF0;
  }
.credit_presa {
  text-align: center;
  margin: -30px 20px -30px 0;
  font-size: 10px;
  line-height: 12px;
  }
/******* FIN FICHE DE PRESENTATION *******/


Et voilà, le tour est joué !

Lazulijune

Fiche de réponse rp rouge et rose - Sam 10 Déc 2016 - 18:51



Bonsoir ! Je poste encore un codage en libre-service ici. Je suis ouverte à toute question/critique ! En espérant que cela vous plaira. :yay:



« Titre du rp »
Avec nom des participants

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Satisfy" rel="stylesheet" /> <div style="width:500px; margin:auto; border-right: 6px solid #D04545; border-left: 1px solid #D04545; border-top: 1px solid #D04545; border-bottom: 1px solid #D04545; background-color:#F39999"><img src="http://zupimages.net/up/16/49/6plf.gif" style="width: 500px; border-bottom: 2px solid #D04545;" /><br />
<div style="font-family: Satisfy; font-size: 35px; color: #A60000; text-align: center;">« Titre du rp »</div><div style="width:auto; margin: auto; margin-top:0px; font-family: Yanone Kaffeesatz; font-size:13px; color: #DB1C1C; text-align:center;">Avec nom des participants</div>
<div style="width:470px; height:400px; overflow:auto; background-color: #FEBDBD; margin:auto; border-left: 2px dashed #D04545; border-right: 2px dashed #D04545; padding: 3px; color: darkred; font-size:12px; text-align: justify;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="font-size:9px; font-style: italic; text-align: right; padding: 5px"><a href="http://www.never-utopia.com/" style="color:black;">©️ Lazulijune</a></div></div>

Lazulijune

Fiche de réponse rp violette - Mar 6 Déc 2016 - 18:59



Bonjour !
Je poste mon deuxième codage, qui est à nouveau une réponse de rp, cette fois-ci de couleur violette. Évidemment, vous êtes libre de modifier les couleurs selon votre bon vouloir. L'important est que le crédit ne soit pas enlevé.




« Titre du rp »
Nom des participants

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Dosis" rel="stylesheet" />
<div style="width:500px; margin:auto; background-color: #D5C7DC; border: 2px solid #A485B3; border-bottom: 2px dashed #A485B3;">
<div style="margin-top: 5px; margin: auto; border: 3px double #8B6C9B; width:450px;"><img src="http://zupimages.net/up/16/49/bhgr.gif" style="width:450px;" /></div>
<div style="font-family:Dancing Script; font-size:40px; text-align: center; color:#7B329F; padding-top:5px; font-weight: bold;">« Titre du rp »</div><div style="font-family:Dosis; font-size: 11px; color: #9973AC; text-align: center;">Nom des participants</div>
<div style="width: 450px; height: 400px; overflow:auto; background-color: #DED4E3; margin: auto; border-left: 2px solid #AC92B9; border-right: 2px solid #AC92B9; padding: 3px; font-size: 12px;  text-align: justify; font-family:Dosis; color: black;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="font-size:9px; font-style: italic; text-align: right; padding: 5px"><a href="http://www.never-utopia.com/" style="color:black;">©️ Lazulijune</a></div></div>


En espérant que cela vous plaise :yay:

Edit : Étant donné que je ne peux pas répondre, je tiens quand même à remercier Shoki pour sa correction, ses conseils m'ont été très utile et je les ai appliqué à ce code.

Lazulijune

Fiche de réponse rp bleue-verte - Mar 6 Déc 2016 - 18:52



Bonjour à tous. Ceci est mon premier codage en libre-service ; c'est une réponse de rp aux couleurs bleues et vertes, qui n'est rien qu'en html. Les couleurs sont bien entendu modifiables !



Titre du rp
Nom des participants


Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Advent+Pro|Yesteryear" rel="stylesheet" />
<div style="width:500px; margin:auto; background-color:#C0D9D6; border-left: 2px solid #017162; border-right: 2px solid #017162;"><br /><div style="font-family:Yesteryear; font-size:35px; color:#017162; text-align:center;">Titre du rp</div><div style="font-family:Advent Pro; font-size: 12px; color:steelgrey; text-align: center; letter-spacing: 2px;">Nom des participants</div><div style="width:450px; margin: auto; border: 2px dashed #4B8E85;"></div>

<div style="width: 450px; height: 400px; margin: auto; padding: 5px; background-color: #A6C8C4; overflow:auto; font-size:12px; text-align: justify; color: black; border: 1px solid #4B8E85;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="text-align: right; font-size: 9px; color: black; font-style: italic; padding: 5px;"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a>
</div></div>


Le crédit est bien entendu ineffaçable ! En espérant que cela vous plaise.

Edit : Encore une fois, j'ai appliqué les conseils de Shoki ! Et pour répondre à ceci :
@Shoki a écrit:Si tu le souhaites, tu peux les réunir en une seule. Dans ce cas, tu copie-colle les valeurs de la seconde balise (en gros, ce qu'il y a dans style=""), tu les met dans la première en veillant à transformer le border en border-bottom, et tu joue ensuite avec les marges intérieures (padding-bottom ici) pour éloigner ou rapprocher le trait o/

A vrai dire je savais déjà cela, et j'aurai sans doute pu le faire avant (ça ne m'avait pas trop traversé l'esprit sur le coup) mais je préfère le rendu tel qu'il est, la bordure ayant un effet meilleur avec le "border" qu'avec le "border-bottom". Merci de tes conseils en tout cas, c'est très gentil de ta part de pointer mes erreurs !

Offrande

RPG - 3 Cadres avec Overflow Brow - Lun 21 Nov 2016 - 1:10



:heart: Re Bonsoir tout le monde :heart:

Cette petite fiche peut servir à beaucoup, beaucoup de chose et je me permet de la poster pour enrichir un peut ce forum qui m'as beaucoup aider! Cette petite fiche vas avec celle-ci : WWW (ne pas oublier de changer le lien quand le LS sera disponible) merci :heart: Si vous souhaitez installer les polices qui sont sur cette fiches pour avoir les même un tutoriel est conter en bas de page.

Image via une imprime écran de mon forum :
Tag html sur Never Utopia - graphisme, codage et game design Fiche211

En ce qui concerne l'image : Vous pouvez la changer contre n'importe qu'elle image faisant une taille de : 260px de largeur sur 400px de hauteur.

Voila le code de la fiche placer sous HIDE contre un petit message de remerciement :heart:

Code:
<link href='http://fonts.googleapis.com/css?family=Pacifico|UnifrakturMaguntia' rel='stylesheet' type='text/css' /><!--DATE ARTICLE--><div style="text-align: center; font-size: 20px;text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;"> Date : .. / .. / .. </div><br/><br/><!--INTRO ARTICLE--><div style="font-size: 30px; color: #000; text-shadow: 3px 3px 3px #fff; font-family: UnifrakturMaguntia;margin-bottom: -10px; text-align: center; margin-left: -250px;"> Introduction</div><!--FICHE ARTICLE--> <table style="margin: auto;"><tr><td><div style="width: 220px; height: 357px; overflow: auto; background-color: #89725B; border: 1 px solid #000; padding: 20px; text-align: justify;"><!--CONTENU ARTICLE--><span style="color: white;">
REMPLACER LA TOTALITÉ DE CE TEXTE PAR VOTRE INTRODUCTION Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur.
</span></div></td><td><!--IMAGE 260 LARGEUR SUR 400 HAUTEUR--><img src="https://i37.servimg.com/u/f37/19/54/37/96/articl10.png" /></td></tr></table><!--CADRE ARTICLE--><div style="margin: auto; width: 527px; height: 400px; overflow: auto; border: 1px solid #000; background-color:#89725B;"><br/><br/><!--TITRE ARTICLE--><div style="font-size: 30px; color: #000; text-shadow: 3px 3px 3px #fff; font-family: UnifrakturMaguntia;margin-bottom: -10px; text-align: center;"> Titre Article </div>
<!--CONTENU ARTICLE--> <div style="text-align: justify; padding: 20px; color: white;">
REMPLACER LA TOTALITÉ DE CE TEXTE PAR VOTRE ARTICLE Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur.Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur.Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.</div>
</div>



Pour ce qui concerne les Polices utiliser ce sont les Police :
- UnifrakturMaguntia (en noir)
- Pacifico (en blanc)

Offrande

RPG - 5 Cadre avec Overflow Brown - Lun 21 Nov 2016 - 1:03



Bonjour tout le monde :heart:

Cela fait un certain temps que je me suis inscrite sur ce forum et comme je me suis amélioré en CSS je vous propose l'une de mes créations qui, je pense pourrait servir a pas mal de chose :heart: Cette petite créations peut servir surtout pour les RPG mais vous pouvez bien sur l'utiliser pour autre chose. Cette fiche comporte une grande CSS mais n'est pas a ajouter dans la feuille de style, tout ce trouve dans le sujet lui-même. Pour ce qui est des polices, si vous souhaitez utiliser les même que celle présenter sur la fiche, une explications est conter en bas du sujet pour installer celle-ci.

Aperçus Normal :
Tag html sur Never Utopia - graphisme, codage et game design Fiche110

En ce qui concerne l'image : Vous pouvez la remplacer par n'importe qu'elle image de 500px de largeur sur 200px de hauteur.

Le Code de la Fiche :heart:
Code:
<link href='http://fonts.googleapis.com/css?family=Pacifico|UnifrakturMaguntia' rel='stylesheet' type='text/css' /><!--------------------------------------CADRE GENERALE--------------------------->
<div style="margin: auto; min-height: 1300px; max-height: 1300px; width: 500px; background-color: #89725B; box-shadow: 10px 10px 10px #000; border-radius: 0px 0px 40px 0px;"><!--IMAGE--><div style="width: 500px"><!--IMAGE 500 PX DE LARGEUR SUR 200 PX DE HAUTEUR--><img src="https://i37.servimg.com/u/f37/19/54/37/96/blog_h10.png" /> </div><!--NOM--><span style="color: #000; font-size: 35px; margin-left: 150px; font-family: Pacifico; text-shadow: 3px 3px 3px #ffffff;"> Le Nom du Blog </span><!--CITATION-->
<span style="color: #ffffff; font-size: 11px; text-transform; uppercase; margin-left: 180px;"> Je suis une petite Citation ... </span><br/><br/><!--TITRE STATISTIQUE--><div style="font-size: 20px; margin-bottom: -5px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Statistique</div><!--STATISTIQUE CADRE--><div style="height: 100px; overflow: auto; border: 1px solid #ffffff; width: 400px; padding: 10px; margin-left: 50px; border-radius: 20px 0px 20px 0px;box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU DES STATISTIQUE--><span style="color: #000!important;">✽ Blog de :
✽ Date de Création :
✽ Tags :
✽ Mes Trophées:
</span></div><!--FIN CADRE STATISTIQUE--><br/><br/><!--TITRE DESCRIPTION--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Description</div>
<!--CADRE DESCRIPTION--><div style="height: 200px; width: 400px; overflow: auto; margin-left: 50px; border: 1px solid #ffffff; padding: 10px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU DESCRIPTION--><span style="color: #000;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse</span></div><!--FIN CADRE DESCRIPTION--><br/><br/><!--TITRE ARTICLE ET AMI--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Mes Ami(e)s .... & Mes Articles :</div><br/><br/><!--DEBUT CADRE AMI et ARTICLE--><div style="margin-left: 50px;"><table><tr><td width="200px" valign="top"><!--DEBUT DIV A GAUCHE--><div style="height: 200px; overflow: auto; margin-left:5px; border: 1px solid #ffffff; padding: 0px 2px 2px 5px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><span style="color: #000;">[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
</span><br /></div><!--FIN DIV A GAUCHE--></td><td width="200px" valign="top"><!--DEBUT DIV A DROITE--><div style="height: 200px;overflow: auto;border: 1px solid #ffffff;padding: 0px 2px 2px 5px;border-radius: 20px 0px 20px 0px;box-shadow: 5px 5px 5px #000;background-color: #89725B; "><span style="color: #000;">[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le : </span><br />
</div><!--FIN DIV A DROITE--></td></tr></table></div><!--FIN CADRE AMIS ET ARTICLE--><br /><br/><!--TITRE COMMENTAIRE--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Commentaires</div><br/><!--CADRE COMMENTAIRE--><div style="height: 200px; width: 400px; overflow: auto; margin-left: 50px; border: 1px solid #ffffff; padding: 10px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU COMMENTAIRE--><span style="color: #000;">Contenus du Cadre ici. Contenus du Cadre ici</span></div>

</div>
<!------------------------------------FIN CADRE GENERALE------------------------->


Pour ce qui concerne les Polices utiliser ce sont les Police :
- UnifrakturMaguntia (en noir)
- Pacifico (en blanc)

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.


Revenir en haut

La date/heure actuelle est Dim 19 Jan 2020 - 5:49