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

4 participants

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 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)
avatar

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 Lun 27 Fév 2012 - 13:52

up Smile
avatar

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

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 Mar 28 Fév 2012 - 11:24

avatar

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 Mer 29 Fév 2012 - 22:34

S'il vous plaît...
avatar

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

Matriochka
Membre actif

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 Dim 4 Mar 2012 - 20:23

avatar

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

Matriochka
Membre actif

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 Dim 4 Mar 2012 - 22:54

avatar

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 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 !
avatar

Matriochka
Membre actif

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 Lun 5 Mar 2012 - 13:40

avatar

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 Mer 7 Mar 2012 - 13:44

Trulu, upiiiiinouuuuu ♥
avatar

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 Sam 10 Mar 2012 - 12:25

UPINOUUUUUU !
avatar

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 Dim 11 Mar 2012 - 20:18

Encore un up.. :/
avatar

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

Dr. Karlos
Membre actif

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

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 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)
Profil réduit avec rool box + info bulle pour feuille de personnage. 133923341
Profil réduit avec rool box + info bulle pour feuille de personnage. 960364672
avatar

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 Mar 13 Mar 2012 - 21:51

Upionuuu Very Happy
avatar

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

Dr. Karlos
Membre actif

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

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 Mer 14 Mar 2012 - 13:57

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

Comme ici Smile
Spoiler:
avatar

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

Dr. Karlos
Membre actif

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

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 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...)
avatar

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

Dr. Karlos
Membre actif

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

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 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 =/
avatar

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

Dr. Karlos
Membre actif

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

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 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? (:
avatar

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

Dr. Karlos
Membre actif

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

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 Mar 20 Mar 2012 - 22:47

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

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

- Sujets similaires

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