Profil réduit avec rool box + info bulle pour feuille de personnage.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Sam 25 Fév 2012 - 23:57

Re, re, re (a)
Voilà, je trouve que mon profil est un peux trop "entassé", trop volumineux, j'aimerais donc mettre un "roll box" pour réduire cet espace histoire de faire plus propre, voici ce que j'ai actuellement Smile J'aimerais aussi mettre une info-bulle pour ma feuille de personnage sachant que j'ai déjà installé le "découvrir/masquez".. Wink

Spoiler:


Merci (a)

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Lun 27 Fév 2012 - 13:52

up Smile

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par o-flo-o le Mar 28 Fév 2012 - 8:15

Bonjour ! Puis-je avoir l'adresse de votre forum ( par message ou ici , comme vous voulez ).

o-flo-o
****

Masculin
Messages : 396
Inscrit(e) le : 07/09/2011

http://rihannathequeen.forumgratuit.be
o-flo-o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Mar 28 Fév 2012 - 11:24


Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Mer 29 Fév 2012 - 22:34

S'il vous plaît...

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Matriochka le Sam 3 Mar 2012 - 23:27

Bonsoir,

On va procéder par étape : d’abord la scrollbar, et ensuite l’infobulle. Mais avant, serait-il possible que tu nous livres le template concerné ? Sans cela, on ne sera pas vraiment habilité à te venir en aide. ^^

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Dim 4 Mar 2012 - 20:23


Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Matriochka le Dim 4 Mar 2012 - 20:53

Mais de rien ^^

Alors, on va s’occuper donc de ces variables : {postrow.displayed.profile_field.LABEL}, {postrow.displayed.profile_field.CONTENT} et {postrow.displayed.profile_field.SEPARATOR}, donc celles qui génèrent les champs / valeurs des profils. Je vois que tu as déjà mis une div, donc on va se baser sur elle pour metre ta scrollbar, tu verras, c’est tout bête.

Tu vas remplacer cet élément, donc :
Code:
<div style="line-height:8px;">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div>

Par ceci :
Code:
<div style="line-height:8px; overflow:auto; height:110px;">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div>

Tu vois, j’ai rajouté overflow:auto; et height:110px; (que tu pourras modifié). Avec ça, si tout va bien, tu devrais avoir une scrollbar. Si tu veux que ce soit plus lisible, je t’invite à mettre une petite marge interne au tout, comme ceci :
Code:
<div style="line-height:8px; overflow:auto; height:110px; padding:3px;">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div>

Mais ça, c’est toit qui voit ^^

Dis-moi si c’est bon jusque là Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Dim 4 Mar 2012 - 22:54


Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Matriochka le Dim 4 Mar 2012 - 23:36

OUPS…
Grosse erreur de ma part, j’avais oublié de prendre en compte un petit truc, huhu… Il faut mettre la div avant <!-- BEGIN profile_field --> et après <!-- END profile_field -->… Vraiment désolée, j’avais vraisemblablement la tête ailleurs !

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Lun 5 Mar 2012 - 13:40


Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Mer 7 Mar 2012 - 13:44

Trulu, upiiiiinouuuuu ♥

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Sam 10 Mar 2012 - 12:25

UPINOUUUUUU !

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Dim 11 Mar 2012 - 20:18

Encore un up.. :/

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Dr. Karlos le Dim 11 Mar 2012 - 21:32

Bonsoir,

Trouvez cette partie dans votre template donnée par Matriochka:
Code:
<div style="line-height:8px; overflow:auto; height:110px; padding:3px;">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div>

Et remplacez height:110px; max-height:90px;. La valeur est diminuée pour voir si le code fonctionne, elle est bien sûr modifiable par la suite. Wink

Pour l'info-bulle, remplacez cette partie dans votre template:
Code:
              <span class="profil"><center>More ?</center><span><span class="postdetails poster-profile">{postrow.displayed.POSTER_RPG}</span></span></span>
Par celle-ci:
Code:
  <span class="infobulle"><center>More?</center><span>{postrow.displayed.POSTER_RPG}</span></span>

Insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS) afin de faire afficher l'info-bulle:
Code:
.infobulle{position: relative;z-index: 0;}
 
.infobulle:hover{background-color: transparent;z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
 
.infobulle span img{
border: 1px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px solid #000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

La partie à modifier est celle-ci:
Code:
.infobulle:hover span{
visibility: visible;
top: 70px;/*position par rapport au haut de l'image*/
left: 35px;/*position par rapport au bord gauche de l'image*/
width: 150px ;/*largeur de la bulle*/
color:#FFFFFF;/*couleur du texte*/
border: 1px solid #000;/*épaisseurs style et couleur des contours*/
-moz-border-radius: 12px;/*arrondis*/
-webkit-border-radius: 12px;/*arrondis*/
border-radius: 12px;/*arrondis*/}


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Dim 11 Mar 2012 - 21:39

Merci à vous, ça fonctionne à merveille *o* Je fais des modifications dans le CSS actuellement, merci de votre réponse rapide Very Happy
Voilà les images pour les "online" et "offline" sur le coter que j'aimerais rajoutée Smile Very Happy (Image réalisée par moi même Razz)


Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Mar 13 Mar 2012 - 21:51

Upionuuu Very Happy

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Dr. Karlos le Mer 14 Mar 2012 - 0:26

Bonsoir,

Pouvez-vous coller l'ensemble de votre template modifié ici? De plus, où exactement désirez-vous afficher l'image? Sur le côté reste bien vague. Wink


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Mer 14 Mar 2012 - 13:57

J'aimerais le mettre sur la gauche.. Template :

Comme ici Smile
Spoiler:

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Dr. Karlos le Jeu 15 Mar 2012 - 4:00

Bonsoir,

Assurez-vous en premier lieu que vous avez bien inséré l'image en ligne dans votre panneau d'administration comme ceci:
> PA | Affichage | Images et couleurs | Gestion des images | Boutons

En ligne : Insérez votre image "en ligne".

Par la suite, trouvez cette partie dans votre template viewtopic_body modifié:
Code:
<div class="profil-fond">
 
            <span class="postdetails poster-profile">
            <div class="avatar-fond"> {postrow.displayed.POSTER_AVATAR} </div>
Et remplacez-la par celle-ci:
Code:
<div class="profil-fond">
 
            <span class="postdetails poster-profile"><span id="imgoffline">{postrow.displayed.ONLINE_IMG}</span>
            <div class="avatar-fond"> {postrow.displayed.POSTER_AVATAR} </div>

Insérez ensuite ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
Code:
#imgoffline {
background: url(IMAGE HORS-LIGNE) no-repeat;
position: absolute;
float: left;
width: LARGEUR IMAGEpx;
height: HAUTEUR IMAGEpx;
margin-left: -110px;
margin-top: -80px;
}


Cordialement.


Dernière édition par Dr. Karlos le Jeu 15 Mar 2012 - 21:48, édité 1 fois

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Jeu 15 Mar 2012 - 19:32

Merci à vous, j'ai ajouter les images,le CSS et le template mais rien =/ J'ai bien régler la largueur et hauteur dans le CSS (250*100...)

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Dr. Karlos le Jeu 15 Mar 2012 - 21:49

Re,

J'ai fait une erreur dans le code. Wink J'ai édité mon précédant message.

Utilisez plutôt celui-ci:
Code:
#imgoffline {
background: url(IMAGE HORS-LIGNE) no-repeat;
position: absolute;
float: left;
width: LARGEUR IMAGEpx;
height: HAUTEUR IMAGEpx;
margin-left: -110px;
margin-top: -80px;
}


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Jeu 15 Mar 2012 - 21:52

Template validé i touut, mais quand je clique sur "valider", page blanche.. Je fais retour en arrière, je publie mais rien =/

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Dr. Karlos le Jeu 15 Mar 2012 - 22:16

Bonsoir,

J'ai aussi ce problème sous Chrome. Wink Changez de navigateur, copiez le template, publiez-le et assurez-vous que le CSS ainsi que l'image "en ligne" est bien en place.


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Jeu 15 Mar 2012 - 22:26

Toujours le même soucis, sous Mozilla =/ J'ai supprimé tout, tout est bon mais rien ne fonctionne.. :S

EDIT : je n'ai rien dis :S Comment faire pour déplacer la bulle? (:

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Dr. Karlos le Ven 16 Mar 2012 - 1:04

Re,

En modifiant ces deux valeurs dans le code:
Code:
margin-left: -110px;
margin-top: -80px;

En augmentant dans le négatif pour margin-left, vous placerez l'image encore plus vers la gauche et en augmentant dans le négatif pour margin-top, vous placerez l'image encore plus vers le haut. Wink


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil réduit avec rool box + info bulle pour feuille de personnage.

Message par Ocarina le Mar 20 Mar 2012 - 22:47

Merci, ça fonctionne très bien♥
Je vous remercie !

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum