Avatar en accordéon
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Avatar en accordéon
Bonjour- bonsoir,
Je me suis baladé sur un forum et j'ai vue quelque chose qui m'a assez plus sur celui-ci.
La personne a son avatar en position ordinaire et lorsqu'on clique dessus celui glisse et celui-ci montre ses informations de profil.
J'aurais voulu savoir si c'était possible de faire la même chose SAUF qu'à la place des infos de profil, moi je voudrais mettre un autre avatar et garder les info à l'endroit d'origine. Est-ce faisable svp ?
forum en question
J'ai tenté de contacter la fondatrice mais en vain puisque j'ai jamais obtenu de réponse de sa part pour m'orienter :S
Merci d'avance
Je me suis baladé sur un forum et j'ai vue quelque chose qui m'a assez plus sur celui-ci.
La personne a son avatar en position ordinaire et lorsqu'on clique dessus celui glisse et celui-ci montre ses informations de profil.
J'aurais voulu savoir si c'était possible de faire la même chose SAUF qu'à la place des infos de profil, moi je voudrais mettre un autre avatar et garder les info à l'endroit d'origine. Est-ce faisable svp ?
forum en question
J'ai tenté de contacter la fondatrice mais en vain puisque j'ai jamais obtenu de réponse de sa part pour m'orienter :S
Merci d'avance
Dernière édition par UsagiloveMamoru le Jeu 12 Juil 2012, 10:22, édité 1 fois
UsagiloveMamoru- ***
-
Messages : 127
Inscrit(e) le : 07/04/2008
Re: Avatar en accordéon
Bonjour
La personne a utilisé la propriété transition en css mais seul les navigateurs récents tel que (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) sont capables de lire celle-ci.
Vous pouvez très bien le faire avec du Javascript au moins la tout les navigateur pourrons voir cet effet.
La personne a utilisé la propriété transition en css mais seul les navigateurs récents tel que (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) sont capables de lire celle-ci.
Vous pouvez très bien le faire avec du Javascript au moins la tout les navigateur pourrons voir cet effet.
Re: Avatar en accordéon
Bonjour,
d'accord je vais essayer de faire ça. Je dois modifier un template en particulier ?
d'accord je vais essayer de faire ça. Je dois modifier un template en particulier ?
UsagiloveMamoru- ***
-
Messages : 127
Inscrit(e) le : 07/04/2008
Re: Avatar en accordéon
Coucou, j'avais déjà essayé ce genre de profil en trouvant un tuto sur Never utopia je crois. Donc je te montre ce que j'avais fait.
Le template a modifier déjà est viewtopic_body. Il y aura aussi du css bien sur dont les transitions comme a dit Tupac.
Commençons par le template !
Allez dans Affichage > Templates > Général > viewtopic_body (affichage d'un sujet)
Repérez à la ligne 90 cette partie là :
Ceci correspond à toute la case de profil, à droite du message.
Remplacez par :
N'oubliez pas de valider votre template.
Allons ensuite ajouter le CSS :
Allez dans Affichage > Couleurs > Feuille css et copiez ce code :
Vous pouvez ensuite adapter les couleurs de cadre, fond ou ombre portée, la police, etc..
J'ai défini une taille fixe à vos avatars 200*320, d'après le forum en question
J'espère vous avoir aidé, cordialement.
Le template a modifier déjà est viewtopic_body. Il y aura aussi du css bien sur dont les transitions comme a dit Tupac.
Commençons par le template !
Allez dans Affichage > Templates > Général > viewtopic_body (affichage d'un sujet)
Repérez à la ligne 90 cette partie là :
- 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}"></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>
Ceci correspond à toute la case de profil, à droite du message.
Remplacez par :
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
<span class="avatar_mess"><span class="profil_mess"><!-- 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>
{postrow.displayed.POSTER_AVATAR}</span>
<span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span>
</td>
N'oubliez pas de valider votre template.
Allons ensuite ajouter le CSS :
Allez dans Affichage > Couleurs > Feuille css et copiez ce code :
- Code:
.avatar_mess
{
display: block;
width: 200px;
height: 320px;
margin-left: -10px;
margin-right: 10px;
overflow: hidden;
background: #272726;
border: 5px solid #3e1d19;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-htm-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
box-shadow: 0px 0px 6px #000000;
-moz-box-shadow: 0px 0px 6px #000000;
-o-box-shadow: 0px 0px 6px #000000;
-htm-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
margin-left: 5px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-htm-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
position: absolute;
display: block;
width: 190px;
height: 310px;
margin: auto;
padding: 5px;
overflow: auto;
background: #6b664e;
color: #c5bea0;
font-size: 11px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
display: block;
position: relative;
z-index: 2;
width: 190px;
margin-top: -15px;
margin-left: 10px;
text-align: center;
font-size: 18px;
font-family: courier;
font-weight: bold;
text-shadow: 0px 0px 3px #c5bea0;
background: #94855c;
padding-top: 5px;
border-left: 3px solid #371e1a;
border-right: 3px solid #371e1a;
border-top: 1px solid #371e1a;
border-bottom: 1px solid #371e1a;
box-shadow: 0px 0px 3px #000000;
-moz-box-shadow: 0px 0px 3px #000000;
-o-box-shadow: 0px 0px 3px #000000;
-htm-box-shadow: 0px 0px 3px #000000;
-webkit-box-shadow: 0px 0px 3px #000000;
}
Vous pouvez ensuite adapter les couleurs de cadre, fond ou ombre portée, la police, etc..
J'ai défini une taille fixe à vos avatars 200*320, d'après le forum en question
J'espère vous avoir aidé, cordialement.
Xibition- ****
-
Messages : 457
Inscrit(e) le : 23/05/2011
Re: Avatar en accordéon
Ahhhh super merci beaucoup ça va bien m'aider !!
J'ai installé le code et tout marche correctement j'ai plus qu'à faire mes modifs merci
J'ai installé le code et tout marche correctement j'ai plus qu'à faire mes modifs merci
UsagiloveMamoru- ***
-
Messages : 127
Inscrit(e) le : 07/04/2008
Re: Avatar en accordéon
Ce n'est rien :welcome:
Xibition- ****
-
Messages : 457
Inscrit(e) le : 23/05/2011
Sujets similaires
» Forcer la taille de l'avatar avec "l'avatar-en-accordeon"
» centrer l'avatar accordeon
» Impossible de mettre un avatar en rond avec effet accordéon
» Image sous avatar (contour avatar)
» Nouveauté "Avatar du dernier posteur dans les derniers messages''.. réduire la grosseur de l'avatar...
» centrer l'avatar accordeon
» Impossible de mettre un avatar en rond avec effet accordéon
» Image sous avatar (contour avatar)
» Nouveauté "Avatar du dernier posteur dans les derniers messages''.. réduire la grosseur de l'avatar...
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum