Comment mettre les top sites sur le côté ?

2 participants

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

Résolu Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 9:53

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

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 13:20

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 :
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 Wink
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 13:42

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..)
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 13:44

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

Et comment je peux faire pour qu'il défile en même temps que la page
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 ?
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 13:49

Je vais tout recommencer dans ce cas, j'ai dû faire une erreur quelque part.

Oui c'est ça. ^^
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 13:51

Bien, tiens-moi au courant Smile

Pour le défilement, remplace position:absolute; par position:fixed;
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 14:02

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 !
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 14:34

Il faut modifier la hauteur et la largeur ici :
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 Wink
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 15:08

Tout ça c'est dans la feuille de CSS?
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 15:12

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>
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 15:29

Ç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..
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 15:31

C’est pas la peine de s’énerver, on a tout notre temps, non ? Smile

Envoie-moi ici les codes que tu as mis, s’il te plaît.
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 15:44

Sauf que je suis pas patiente ! x)

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.
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 15:46

Si tu veux gérer un forum et le personnaliser, il va alors falloir apprendre à l’être au moins un peu plus Razz

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>
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 15:50

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 :

Code:
#top_sites {
        background-image: url(http://www.pixenli.com/images/1358/1358005584099749200.png);
        position:fixed;
        right:10px;
        top:350px;
        height:190px;
        width:312px;}
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 15:53

Ton image ici est trop haute :
https://2img.net/r/hpimg15/pics/770486Sanstitre1.png

Réduis-la un peu.
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 15:59

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 ? ><
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre les top sites sur le côté ?

Message par Matriochka Dim 13 Jan 2013 - 16:00

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>
Wink
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: Comment mettre les top sites sur le côté ?

Message par Yuuki-Chaan Dim 13 Jan 2013 - 16:02

Oh oui, j'ai enfin fini ! Merci pour tout, vraiment ! ♥
Yuuki-Chaan

Yuuki-Chaan
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 13/01/2013

http://ryusei-rocket.jdrforum.com/
Yuuki-Chaan 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