Comment mettre les top sites sur le côté ?
2 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
Comment mettre les top sites sur le côté ?
- Bonjour bonjour !
Bon, après avoir bien regarder pendant 5 minutes, il ne me semble pas que cette question a été posé. Je voulais savoir comment on pouvait mettre les top sites sur le côté, comme on fait pour la chatbox. J'aurais bien aimé faire pareil, mais j'y arrive pas, et comme j'ai peur de faire une énorme bêtises, j'aimerais savoir si quelqu'un parmi vous saurait comme faire ça.
Merci d'avance à qui pourra m'aider, au revouar ! :3
Re: Comment mettre les top sites sur le côté ?
Bonjour et bienvenue à toi,
Va dans Panneau d’administration > Affichage > Templates > Général, et ouvre celui qui s’intitule overall_header.
Trouve cette ligne :
Juste après celle-ci, ajoute une div, à laquelle tu donnes un nom. Dans celle-ci, tu mettras tes top-sites :
Ce qui donne au final :
Une fois que c’est fait et que tu as mis le contenu désiré dans la div que l’on vient de créer, enregistre puis publie ton template afin que la modification soit prise en compte.
Maintenant, rends-toi dans Panneau d’administration > Affichage > Couleurs > Feuille de styles CSS, et c’est ici que l’on va mettre en forme la div créée.
Ajoute ceci :
Tout est expliqué avec une ligne de commentaire. Là, c’est un code de base, donc tu auras juste un cadre qui apparaît sur le côté. Si tu veux le faire coulisser au passage de la souris, il faudra plutôt mettre ceci :
N’hésite pas si tu as des questions
Va dans Panneau d’administration > Affichage > Templates > Général, et ouvre celui qui s’intitule overall_header.
Trouve cette ligne :
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Juste après celle-ci, ajoute une div, à laquelle tu donnes un nom. Dans celle-ci, tu mettras tes top-sites :
- Code:
<div id="top_sites">BOUTONS DE VOTE ICI</div>
Ce qui donne au final :
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div id="top_sites">BOUTONS DE VOTE ICI</div>
Une fois que c’est fait et que tu as mis le contenu désiré dans la div que l’on vient de créer, enregistre puis publie ton template afin que la modification soit prise en compte.
Maintenant, rends-toi dans Panneau d’administration > Affichage > Couleurs > Feuille de styles CSS, et c’est ici que l’on va mettre en forme la div créée.
Ajoute ceci :
- Code:
#top_sites {
background:#FFFFFF; /* couleur de fond */
border:2px solid #000000; /* couleur de la bordure */
position:absolute; /* élément flottant */
left:0px; /* position par rapport à la gauche */
top:50px; /* position par rapport au haut */
height:100px; /* hauteur du cadre */
width:100px; /* largeur du cadre */}
Tout est expliqué avec une ligne de commentaire. Là, c’est un code de base, donc tu auras juste un cadre qui apparaît sur le côté. Si tu veux le faire coulisser au passage de la souris, il faudra plutôt mettre ceci :
- Code:
#top_sites {
background:#FFFFFF; /* couleur de fond */
border:2px solid #000000; /* couleur de la bordure */
position:absolute; /* élément flottant */
left:-90px; /* position par rapport à la gauche */
top:50px; /* position par rapport au haut */
height:100px; /* hauteur du cadre */
width:100px; /* largeur du cadre */
}
#top_sites:hover {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
left:0px; /* position par rapport à la gauche */}
N’hésite pas si tu as des questions
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Merci pour tout, mais c'est normal que ça ne marche pas ? Et comment je peux faire pour qu'il défile en même temps que la page et aussi qu'il soit à droite au lieu d'être à gauche ? (je sais, je suis chiante, mais tout ça c'est pas mon truc quoi..)
Re: Comment mettre les top sites sur le côté ?
Ça doit fonctionner, j’ai testé sur mon forum de tests. As-tu bien validé les changements ?
Si tu veux qu’ils soient à droite, il faut à ce moment modifier left dans le CSS par right.
Si tu veux qu’ils soient à droite, il faut à ce moment modifier left dans le CSS par right.
Pour ça par contre, je n’ai pas compris ce que tu voulais dire… Tu veux qu’ils restent fixés au même endroit quand tu fais défiler la page ?Et comment je peux faire pour qu'il défile en même temps que la page
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Je vais tout recommencer dans ce cas, j'ai dû faire une erreur quelque part.
Oui c'est ça. ^^
Oui c'est ça. ^^
Re: Comment mettre les top sites sur le côté ?
Bien, tiens-moi au courant
Pour le défilement, remplace position:absolute; par position:fixed;
Pour le défilement, remplace position:absolute; par position:fixed;
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Voilà, mais j'ai un autre soucis. Pourquoi ils sont tous les 4 l'un au dessus de l'autre ? ><
Edit : Et puis je voulais mettre cette image : https://2img.net/r/hpimg15/pics/770486Sanstitre1.png pour que les images que j'ai choisi soit en dessous, que ça fasse deux par lignes, comme y'en a quatre, ça aurait mis le nom, deux pandas en dessous, et encore deux autres en dessous, mais j'y arrive pas du tout !
Edit : Et puis je voulais mettre cette image : https://2img.net/r/hpimg15/pics/770486Sanstitre1.png pour que les images que j'ai choisi soit en dessous, que ça fasse deux par lignes, comme y'en a quatre, ça aurait mis le nom, deux pandas en dessous, et encore deux autres en dessous, mais j'y arrive pas du tout !
Re: Comment mettre les top sites sur le côté ?
Il faut modifier la hauteur et la largeur ici :
Après, pour mettre ton image dans le contenu du cadre et tes deux images sur deux lignes tu mets ceci :
Donc là tu as, sur une première ligne :
- ton image "top-site"
sur une seconde ligne :
- tes deux premiers boutons de vote
et sur la troisième ligne :
- tes deux derniers boutons de vote
Sachant que <br /> est la balise utilisée en html pour créer un saut de ligne
- Code:
height:100px; /* hauteur du cadre */
width:100px; /* largeur du cadre */
Après, pour mettre ton image dans le contenu du cadre et tes deux images sur deux lignes tu mets ceci :
- Code:
<img src="url_de_ton_image" /><br />
<a href="http://top1"><img src="url_de_ton_image" /></a> <a href="http://top1"><img src="url_de_ton_image" /></a><br />
<a href="http://top1"><img src="url_de_ton_image" /></a> <a href="http://top1"><img src="url_de_ton_image" /></a>
Donc là tu as, sur une première ligne :
- ton image "top-site"
sur une seconde ligne :
- tes deux premiers boutons de vote
et sur la troisième ligne :
- tes deux derniers boutons de vote
Sachant que <br /> est la balise utilisée en html pour créer un saut de ligne
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Tout ça c'est dans la feuille de CSS?
Re: Comment mettre les top sites sur le côté ?
Le premier c’est dans la feuille CSS, oui, mais l’autre code c’est dans ton template, ici :
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div id="top_sites">BOUTONS DE VOTE ICI</div>
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Ça marche toujours pas. Ça me fait de la grosse merde et là c'est en train de m'énerver mais quelque chose de bien. Merci quand même, c'était gentil de ta part de vouloir m'aider..
Re: Comment mettre les top sites sur le côté ?
C’est pas la peine de s’énerver, on a tout notre temps, non ?
Envoie-moi ici les codes que tu as mis, s’il te plaît.
Envoie-moi ici les codes que tu as mis, s’il te plaît.
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Sauf que je suis pas patiente ! x)
Déjà, j'ai ça pour les templates :
Et là refais la feuille de CSS.
Déjà, j'ai ça pour les templates :
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div id="top_sites"><img src="http://img15.hostingpics.net/pics/770486Sanstitre1.png" /><br />
<a href="http://www.root-top.com/topsite/miya/in.php?ID=1591"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/serpentgy/in.php?ID=8766"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a><br />
<a href="http://www.root-top.com/topsite/yami/in.php?ID=5074"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/horsevalleys/in.php?ID=1395"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a></div>
Et là refais la feuille de CSS.
Re: Comment mettre les top sites sur le côté ?
Si tu veux gérer un forum et le personnaliser, il va alors falloir apprendre à l’être au moins un peu plus
Remplace cette partie :
Par :
Remplace cette partie :
- Code:
<div id="top_sites">BOUTONS DE VOTE ICI</div>
<img src="http://img15.hostingpics.net/pics/770486Sanstitre1.png" /><br />
<a href="http://www.root-top.com/topsite/miya/in.php?ID=1591"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/serpentgy/in.php?ID=8766"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a><br />
<a href="http://www.root-top.com/topsite/yami/in.php?ID=5074"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/horsevalleys/in.php?ID=1395"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a>
Par :
- Code:
<div id="top_sites"> <img src="http://img15.hostingpics.net/pics/770486Sanstitre1.png" /><br />
<a href="http://www.root-top.com/topsite/miya/in.php?ID=1591"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/serpentgy/in.php?ID=8766"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a><br />
<a href="http://www.root-top.com/topsite/yami/in.php?ID=5074"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/horsevalleys/in.php?ID=1395"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a></div>
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Oui, je sais. x)
C'est ce que j'ai fait, je me suis juste trompée en faisant le copier coller. Bref, voilà la feuille de CSS :
C'est ce que j'ai fait, je me suis juste trompée en faisant le copier coller. Bref, voilà la feuille de CSS :
- Code:
#top_sites {
background-image: url(http://www.pixenli.com/images/1358/1358005584099749200.png);
position:fixed;
right:10px;
top:350px;
height:190px;
width:312px;}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
AH ENFIN ! *^*
Merci beaaaaucoup ! Mais j'ai encore une question >__<
Là, ça fait ça en gros :
[___________________] <-- L'image.
[__] [__] <-- Top site.
[__] [__] <-- Top site.
Comment je peux faire pour centrer mes icones ? ><
Merci beaaaaucoup ! Mais j'ai encore une question >__<
Là, ça fait ça en gros :
[___________________] <-- L'image.
[__] [__] <-- Top site.
[__] [__] <-- Top site.
Comment je peux faire pour centrer mes icones ? ><
Re: Comment mettre les top sites sur le côté ?
En utilisant la balise center :
- Code:
<div id="top_sites"> <img src="http://img15.hostingpics.net/pics/770486Sanstitre1.png" /><br />
<center><a href="http://www.root-top.com/topsite/miya/in.php?ID=1591"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/serpentgy/in.php?ID=8766"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a><br />
<a href="http://www.root-top.com/topsite/yami/in.php?ID=5074"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a> <a href="http://en.root-top.com/toplist/horsevalleys/in.php?ID=1395"><img src="http://ishi.hirokache.com/px/animals/wild/pandabamboo.gif" /></a></center></div>
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Comment mettre les top sites sur le côté ?
Oh oui, j'ai enfin fini ! Merci pour tout, vraiment ! ♥
Sujets similaires
» Comment mettre les deux Widgets cote a cote
» Comment mettre des sous catégories côte à côte ?
» Comment mettre 2 liens côte à côte
» Comment mettre chat box à côté?
» Comment mettre un bouton "ouvrir la chatbox" sur le coté du forum?
» Comment mettre des sous catégories côte à côte ?
» Comment mettre 2 liens côte à côte
» Comment mettre chat box à côté?
» Comment mettre un bouton "ouvrir la chatbox" sur le coté du forum?
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