Rappel du premier message :
/!\Seconde version du code, plus besoin d'image de rang pour qu'il fonctionne ! /!\
Bonjour ! Alors ce LS vise à faire ceci, en PHPBB2: (cliquez pour agrandir)
Sachant que la deuxième image correspond à quand l'avatar est survolé (au hover, donc)
C'est un profil avec un avatar de 200 x 400 px, et l'image utilisée s'adapte automatiquement au format. Il y a également un lien "envoyer un MP", comme ici sur NU; et la feuille de personnage s'affiche également sous l'avatar, si tant est qu'elle soit activée bien sûr !
♠ Dans gestion des utilisateurs -> gestion des rangs, commencez par définir vos rangs en leur attribuant des images de ce format ( à présent le code fonctionne aussi sans que vous ayez défini d'image de rang)
ou
Si vous changez cette image il vous faudra adapter les marges dans le CSS.
♠Ensuite, dans le template viewtopic_body, cherchez cette partie de code: ( si vous n'avez rien modifié elle doit se trouver vers la ligne 139)
et remplacez-la par ceci:
Fait ? Parfait, n'oubliez pas de valider le template.
♠Ensuite, ajoutez ceci au CSS, puis validez :
Et voilà, ça devrait être bon ! J'aimerais que vous laissiez le crédit s'il vous plaît, il ne prend que peu de place.
Un petit merci pour voir ~
MAJ le 09/11/14 by Halloween sur demande d'Alu' !
/!\Seconde version du code, plus besoin d'image de rang pour qu'il fonctionne ! /!\
♠ Profil avec rotation en hover (Académie Mitsushima)♠
Bonjour ! Alors ce LS vise à faire ceci, en PHPBB2: (cliquez pour agrandir)
Sachant que la deuxième image correspond à quand l'avatar est survolé (au hover, donc)
C'est un profil avec un avatar de 200 x 400 px, et l'image utilisée s'adapte automatiquement au format. Il y a également un lien "envoyer un MP", comme ici sur NU; et la feuille de personnage s'affiche également sous l'avatar, si tant est qu'elle soit activée bien sûr !
♠ Définir les rangs ♠
♠ Dans gestion des utilisateurs -> gestion des rangs, commencez par définir vos rangs en leur attribuant des images de ce format ( à présent le code fonctionne aussi sans que vous ayez défini d'image de rang)
ou
Si vous changez cette image il vous faudra adapter les marges dans le CSS.
♠ Le HTML ♠
♠Ensuite, dans le template viewtopic_body, cherchez cette partie de code: ( si vous n'avez rien modifié elle doit se trouver vers la ligne 139)
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
et remplacez-la par ceci:
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150" style="padding-right:10px;">
<div style="position:relative;">
<div id="profilmembre">
<div class="avatars">{postrow.displayed.POSTER_AVATAR}</div>
<div class="infoprofil">
<!-- 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 class="label" style="color:#3F2941;">Groupe:</span> {postrow.displayed.POSTER_RANK}<br />
<span class="label"><a href="/privmsg?mode=post&u=1">Envoyer un MP</a></span>
</div>
</div><br />
<div class="postdetails poster-profile rang">{postrow.displayed.RANK_IMAGE}</div>
<span class="name pseudo"><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 />
</div>
</td>
Fait ? Parfait, n'oubliez pas de valider le template.
♠ Le CSS ♠
♠Ensuite, ajoutez ceci au CSS, puis validez :
- Code:
/*Profil avec rotation par
Alumine pour Never-Utopia*/
#profilmembre {
position:relative;
height: 400px;/*hauteur de l'avatar*/
width: 200px;/*largeur de l'avatar*/
margin: 10px auto;
}
.avatars {
position: absolute;
top: 0;
left: 0;
background:grey;
width: 100%;
height: 100%;
z-index:3;
-webkit-transform: rotate(-3deg);
-webkit-transform-origin:100% 50%;
-moz-transform: rotate(-3deg);
-moz-transform-origin:50% 100%;
-ms-transform: rotate(-3deg);
-ms-transform-origin:50% 100%;
transform: rotate (-3deg);
transform-origin:50% 100%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
-moz-box-shadow: 2px 2px 5px -2px #595959;
-webkit-box-shadow: 2px 2px 5px -2px #595959;
-o-box-shadow: 2px 2px 5px -2px #595959;
box-shadow: 2px 2px 5px -2px #595959;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}
.avatar img: {width:100%; height: 100%;}
.infoprofil {
position: absolute;
top: 0;
left: 0;
padding:15px;
width: 170px;/* hauteur de l'avatar moins 2x 15px de padding*/
height: 370px;/*idem largeur*/
z-index:0;
background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);/*image de fond des infos du profil*/
color: grey;
font-size: 13px;
overflow: auto;
-webkit-transform: rotate(-3deg);
-webkit-transform-origin:100% 50%;
-moz-transform: rotate(-3deg);
-moz-transform-origin:50% 100%;
-ms-transform: rotate(-3deg);
-ms-transform-origin:50% 100%;
transform: rotate (-3deg);
transform-origin:50% 100%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
-moz-box-shadow: 2px 2px 5px -2px #595959;
-webkit-box-shadow: 2px 2px 5px -2px #595959;
-o-box-shadow: 2px 2px 5px -2px #595959;
box-shadow: 2px 2px 5px -2px #595959;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}
.infoprofil a {color: #3F2941;}/* couleur de "envoyer un mp"*/
#profilmembre:hover > .avatars {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
z-index:1;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 100% 50%;
transform: rotate (0deg);
transform-origin: 100% 50%;
}
#profilmembre:hover > .infoprofil {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 100% 50%;
transform: rotate (0deg);
transform-origin: 100% 50%;
}
.pseudo{
display: block;
height: 1em;
width: 150px;
padding:10px;
margin: auto;
margin-top: -10px;
font-size: 20px;/*taille du pseudo*/
font-family: Georgia, cursive;
border: 3px double grey;
text-align:center;
z-index: 2;
position:absolute;
top:420px; left:10px;
background: lightgrey;
background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
box-shadow: 2px 2px 5px -2px #595959;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
}
.rang {
position:relative;
margin:-75px auto 0px;/* marges de l'image de rang (haut côtés bas)*/
z-index:3;
text-align:center;
}
Et voilà, ça devrait être bon ! J'aimerais que vous laissiez le crédit s'il vous plaît, il ne prend que peu de place.
Un petit merci pour voir ~
MAJ le 09/11/14 by Halloween sur demande d'Alu' !
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^