Profil réduit avec rool box + info bulle pour feuille de personnage.
4 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
Profil réduit avec rool box + info bulle pour feuille de personnage.
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 J'aimerais aussi mettre une info-bulle pour ma feuille de personnage sachant que j'ai déjà installé le "découvrir/masquez"..
Merci (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 J'aimerais aussi mettre une info-bulle pour ma feuille de personnage sachant que j'ai déjà installé le "découvrir/masquez"..
- Spoiler:
Merci (a)
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Bonjour ! Puis-je avoir l'adresse de votre forum ( par message ou ici , comme vous voulez ).
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
S'il vous plaît...
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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. ^^
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- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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 :
Par ceci :
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 :
Mais ça, c’est toit qui voit ^^
Dis-moi si c’est bon jusque là
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à
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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 !
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- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Trulu, upiiiiinouuuuu ♥
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Bonsoir,
Trouvez cette partie dans votre template donnée par Matriochka:
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.
Pour l'info-bulle, remplacez cette partie dans votre template:
Insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS) afin de faire afficher l'info-bulle:
La partie à modifier est celle-ci:
Cordialement.
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.
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>
- 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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Merci à vous, ça fonctionne à merveille *o* Je fais des modifications dans le CSS actuellement, merci de votre réponse rapide
Voilà les images pour les "online" et "offline" sur le coter que j'aimerais rajoutée (Image réalisée par moi même )
Voilà les images pour les "online" et "offline" sur le coter que j'aimerais rajoutée (Image réalisée par moi même )
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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.
Cordialement.
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.
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
J'aimerais le mettre sur la gauche.. Template :
Comme ici
Comme ici
- Spoiler:
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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é:
Insérez ensuite ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
Cordialement.
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>
- 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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Re,
J'ai fait une erreur dans le code. J'ai édité mon précédant message.
Utilisez plutôt celui-ci:
Cordialement.
J'ai fait une erreur dans le code. 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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Template validé i touut, mais quand je clique sur "valider", page blanche.. Je fais retour en arrière, je publie mais rien =/
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Bonsoir,
J'ai aussi ce problème sous Chrome. 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.
J'ai aussi ce problème sous Chrome. 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- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
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? (:
EDIT : je n'ai rien dis :S Comment faire pour déplacer la bulle? (:
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Re,
En modifiant ces deux valeurs dans le code:
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.
Cordialement.
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.
Cordialement.
Dr. Karlos- Membre actif
-
Messages : 2623
Inscrit(e) le : 03/01/2012
Re: Profil réduit avec rool box + info bulle pour feuille de personnage.
Merci, ça fonctionne très bien♥
Je vous remercie !
Je vous remercie !
Ocarina- ****
-
Messages : 278
Inscrit(e) le : 28/10/2011
Sujets similaires
» feuille personnage en bulle-info : soucis
» info bulle pour définition d'un mot
» Problème Info-bulle (Profil)
» Le profil et la feuille de personnage...
» Titre de la feuille de personnage & Profil
» info bulle pour définition d'un mot
» Problème Info-bulle (Profil)
» Le profil et la feuille de personnage...
» Titre de la feuille de personnage & Profil
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