News Accueil

Terrible

Libre-service de codages pour vos forums


Commande de Sidebar

par Touriste v.2 le le Mer 11 Avr - 17:34
Huh ?!  Coucou, c'est encore moi ! A croire que tu t'en auras jamais fini avec nous...

Je viens te proposer une petite (ou pas, hélas pour toi) commande de sidebar, pour mon forum !
Il est actuellement en construction, je n'ose pas l'ouvrir en avance vu que tout n'est pas terminé, mais si tu tiens à vérifier que les messages de base y soient je te l'ouvre ! (nous avons actuellement 66 messages, dont 6 annexes et 4 sujets de contexte), et je n'ai pas fini de m'occuper du flood 8D), bref, j'te passe l'adresse, mais dis moi si tu souhaite y faire un tour !

On pense ouvrir bientôt ^^

Commande de codage



Élément à coder : une sidebar à gauche du forum
Adresse du forum : http://the-holiday-scam.foroactivo.com/
Version du forum : phpBB2 (parce que askip c'est mieux, et comme ça on a pris ta liste de membres  OMG )

J'aime beaucoup la sidebar que tu proposes dans tes LS, cependant, je voudrais savoir si c'est possible d'en faire une détachée du haut du forum, et plus petite : niveau hauteur comme niveau largeur, et que, bien que l'on puisse la réduire (comme la tienne, je crois, si non, pas grave je veux pas t'embêter avec une demande impossible), elle reste ancrée sur le même endroit de la page (elle descendrait quand on descend, remonterait quand on remonte, mais de manière...immobile...je sais pas comment expliquer : elle ne se barrerait pas au niveau de la navbar du haut, quoi). Au niveau de ce qu'elle contiendrait, j'ai mis des cadres sur le schéma, mais c'est pas la peine d'en mettre aussi, j'aime bien l'apparence de la tienne, avec le contexte, notamment. Ou alors un cadre intérieur pour les annonces...si tu peux tenter avec, je veux bien ^^

Un 1er bloc comprendrait le contexte, dans le style de ce que tu as fait sur ta sidebar (la petite croix tu peux la mettre où tu veux c'est pas important, voir pas la mettre du tout xD), un second 2 images pour le staff /ou/ les liens importants comme sur la tienne, j'avoue être partagée... un 3e bloc comprendrait 4 images pour voter sur les top-sites, et, ENFIN, un 4e bloc comprendrait les annonces en cours (demandes de rp, etc). Si le contexte et les annonces pouvaient avoir une scrollbar ce serait chouette aussi !

Schéma :
Schéma:
Taille des éléments : La largeur doit être comprise entre la marge gauche et le bloc du forum, qui fait 900px, ça devrait donc faire un élément d'entre 150 et 200 px ? Je n'ai aucune idée de la largueur totale du forum, je suppose que c'est 1200... Idem pour la hauteur, je dirais entre 500 et 520 de hauteur ? Histoire que l'intégralité soit visible sans avoir à descendre ^^

Pour les dimensions que j'ai prise pour le schéma, j'ai fait à la louche, en tirant des traits un peu partout, ça n'a pas valeur de taille !
Ressources :
Images pour les top-sites : https://www.zupimages.net/up/18/15/n8wp.png, https://www.zupimages.net/up/18/15/hz9g.png, https://www.zupimages.net/up/18/15/1y61.png et https://www.zupimages.net/up/18/15/kyhm.png.
Je les ai mises en 100x100 pour que ce soit plus facile pour toi, mais sur le schéma elles sont en 40x40. Si tu trouves qu'une taille encore inférieure est plus harmonieuse, fais-toi plaisir.

Couleurs : j'pense modifier quand je pourrais voir ça avec ma co-fonda, mais soit tu y vas en freestyle, soit tu peux utiliser cette couleur : #FFD39B (255,211,155) pour le fond de la sidebar (+ si tu fais un cadre aux "annonces" : #FFBB77
255,187,119
), et du blanc (#FFF9FA - 255,249,250) pour les titres, mais je ne garanti pas qu'elle va y rester, donc si tu compte faire un LS de cette commande tu peux appliquer la couleur que tu souhaites ^^

Polices : est-il possible que le texte intérieur du contexte et des annonces soit en raleway (https://fonts.google.com/specimen/Raleway), et les titres en covered by your grace (https://fonts.google.com/specimen/Covered+By+Your+Grace) pour rester dans le thème du forum ? Si tu veux pas prendre le temps de les piocher et tout, pas de souci, je m'en occuperai, ça c'est dans mes cordes !

Autres précisions :Est-il possible que lorsqu'on passe sa souris sur l'image du staff, le pseudo s'affiche avec un lien vers le profil du membre en question, floutant ainsi, par exemple, l'image ?
Acceptez-vous que votre commande aille dans le LS ? : Of course, chuis la 1ère à me servir.


Omg en écrivant tout ça je me suis dit : mince, c'est bcp trop abusé, là, j'espère que tu accepteras ma commande, qu'elle est compréhensible, et si tu trouves ça vachement trop pourrave ou compliqué, ben dis-le moi, j'irai pleurer dans un coin...  Tears

Merci d'avance si tu passe lire ça, et encore désolée de t'embêter xDD

PS : quand je veux insérer un lien dans un bout de texte ça efface la partie du message à l'intérieur de la balise...
par Awful le le Jeu 12 Avr - 17:19
Bonjour !

PS : quand je veux insérer un lien dans un bout de texte ça efface la partie du message à l'intérieur de la balise...
Je ne comprends pas ce que tu veux dire... Mais si tu parles de la prévisualisation, c'est normal, c'est comme ça sur tous les forums.

j'espère que tu accepteras ma commande
par principe, j'accepte toutes les commandes à condition qu'elles respectent le formulaire et que je sois capable de le coder. Donc no stress !

Bref, voilà où j'en suis :
http://terrible-commandes.forumactif.com/

- J'ai mis la largeur à 230px car 200px c'est vraiment minuscule... La hauteur est de 500px

- Du fait de la petite largeur de cette sidebar, j'ai mis le bouton sur le côté, pour qu'il reste visible quand la barre se replie.

- J'ai ajouté deux blocs staff... Je ne sais pas si c'est ce que tu voulais.

- Tu me dis de mettre les titres en blanc, mais en l'occurrence, je n'en vois qu'un seul sur ton schéma "contexte"... Donc dis moi si c'est ce que tu voulais également.

Bref, je te laisse voir ça et m'indiquer les modifs à faire !
par Touriste v.2 le le Jeu 12 Avr - 19:08
Hola !

D'accord pour la prévisualisation, je ne savais pas :x
Héhé merci d'avoir accepté, du coup, je suis tellement une newbie en code que le moindre truc me semble infaisable, mais je me soigne et j'essaie d'apprendre xD

-  Pour la largeur c'est nickel, tu as raison, et c'est bien en fait, collé comme ça au bord de la page ! Et du coup le petit bouton pour la croix est super, ça fait un p'tit machin discret j'aime bien ^^

- Parfait aussi pour les blocs staff !

- Ah zut, pour "les titres", j'ai oublié : tu penses qu'en mettre un du style "petites annonces" ou juste "annonces" passerait avec la taille de la sidebar ? (Si il faut grignoter un petit bout du contexte c'est pas grave, voir y ajouter aussi une scrollbar)

Pour la position, c'est normal qu'elle commence presque au milieu de la page ? Ou c'est parce que t'es en plein chantier dessus ?  T'as déjà presque tout fait en vrai, il reste 2/3 détails, j'ai rien à redire !

Sinon t'es trop fort c'est tellement parfait, en plus t'as réussi à faire ça avec mon schéma bidouillé vite fait OMG

Merci pour tout ce que tu as déjà fait o/
par Awful le le Mar 17 Avr - 10:00
Hey bonjour !
J'ai fait les modifs, je te laisse voir : http://terrible-commandes.forumactif.com/
Ça te va ? c:
par Touriste V.2 le le Mar 17 Avr - 12:30
Hola~

C'est super, merci, mais si je peux encore user de tes capacités, je souhaiterais que tu ajoutes quelques détails : premièrement, est-ce possible que la scrollbar soit du même style que sur ton code rp "I like the night" ou "mini" ? De même, est-il possible que les "petites annonces" soient dotées également d'une scrollbar ?

Le reste est nickel, les proportions sont parfaites, j'aime beaucoup, merci !

J'ai une question, aussi, absolument pas en rapport avec la commande. J'ai utilisé ton code pour les sujets, le hic c'est que je souhaiterais pouvoir ajouter un "bouton" en bas du post, avec les mp/profil/email/lien > j'ai essayé par moi-même, mais cela duplique totalement le reste des boutons, dans un joli truc bien wtf (genre 2 boutons "Prez" et 3 "Liens" par exemple), aussi j'ai remis tout en place sans rien toucher ! (Si tu préfères que je poste dans la partie "problèmes" dis-le moi D:)

Merci de ce que tu fais et de ta patience  Cry forever
par Awful le le Mar 17 Avr - 14:13
premièrement, est-ce possible que la scrollbar soit du même style que sur ton code rp "I like the night" ou "mini" ?
Pas de souci, c'est fait !

De même, est-il possible que les "petites annonces" soient dotées également d'une scrollbar ?
Elle en ont déjà une, c'est juste qu'il n'y a pas assez de texte pour que la barre de défilement apparaisse.

J'ai une question, aussi, absolument pas en rapport avec la commande. J'ai utilisé ton code pour les sujets, le hic c'est que je souhaiterais pouvoir ajouter un "bouton" en bas du post, avec les mp/profil/email/lien > j'ai essayé par moi-même, mais cela duplique totalement le reste des boutons, dans un joli truc bien wtf (genre 2 boutons "Prez" et 3 "Liens" par exemple), aussi j'ai remis tout en place sans rien toucher ! (Si tu préfères que je poste dans la partie "problèmes" dis-le moi D:)
Tu pourrais m'expliquer plus en détail ? Parce que je ne comprends pas trop le souci >.<
par Touriste V.2 le le Mar 17 Avr - 14:31
C'est parfait, je pleure tant c'est bô, vraiment  OMG
Oh je vois !

MERCI BEAUCOUP !

Pour mon petit souci, excuse-moi oui, c'était pas très clair xD
Voici un screen du "problème" : https://www.zupimages.net/up/18/16/yq4e.png

A la place du 2e "fiche" il faudrait que quelque chose du genre "liens" apparaisse (j'ai créé le champ de contact dans le profil), j'ai essayé de rajouter des trucs dans le template et le css, mais étant une newbie, je n'ai fait qu'empirer les choses (là j'ai tout remis bien comme il faut), saurais-tu comment je peux faire ?
par Awful le le Mar 17 Avr - 16:02
Oh, okay !
On va faire ça par étapes xD

Déjà, les codes :



Dans ton PA > Affichage > Templates > Général > overall_header, juste après l'ouverture de la balise head, colle le code suivant :
Code:
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway" rel="stylesheet">

Descend un peu plus bas, trouve la ligne suivant :
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, colle le code suivant :
Code:
<div id="sidebar">
      <div id="sidebar-trigger"><div>+</div></div>
      <h2>Contexte</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="sidebar-staff">
        <div><img src="http://via.placeholder.com/90x40" /><div><b>Pseudo</b><a href="">Profil</a></div></div>
        <div><img src="http://via.placeholder.com/90x40" /><div><b>Pseudo</b><a href="">Profil</a></div></div>
      </div>
      <div class="sidebar-top">
        <a href="" target="_blank"><img src="https://www.zupimages.net/up/18/15/n8wp.png" /></a>
        <a href="" target="_blank"><img src="https://www.zupimages.net/up/18/15/hz9g.png" /></a>
        <a href="" target="_blank"><img src="https://www.zupimages.net/up/18/15/1y61.png" /></a>
        <a href="" target="_blank"><img src="https://www.zupimages.net/up/18/15/kyhm.png" /></a>
      </div>
          <h2>Petites annonces</h2>
      <div class="sidebar-annonces">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut l
      </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <script>
    $(document).ready(function(){
var sidebar_class = $.cookie('sidebar_class');
    if(sidebar_class) {
        $('#sidebar').attr('class', sidebar_class);
    }
    $("#sidebar-trigger").click(function() {
        $("#sidebar").toggleClass("inactive");
        $.cookie('sidebar_class', $('#sidebar').attr('class'));
    });
    });
  </script>

Enregistre et publie le template.
Toujours dans ton PA > Affichage > Couleurs > Feuille de style CSS, colle le code suivant :
Code:
/*Corps de la sidebar*/
 #sidebar {
     width: 230px;
     height: 500px;
     position: fixed;
     left: 0px;
     top: calc(50% - 250px);
     background: #FFD39B;
     font-family: 'Raleway', sans-serif;
     box-sizing: border-box;
     padding: 20px;
     transition: left 0.3s;
}
 #sidebar.inactive {
     left: -230px;
}
/*Bouton de la sidebar*/
 #sidebar-trigger {
     position: absolute;
     right: -25px;
     font-size: 45px;
     height: 25px;
     width: 25px;
     text-align: center;
     line-height: 25px;
     cursor: pointer;
     top: 0;
     background: #ffd39b;
}
 #sidebar-trigger div {
     transform: rotate(45deg);
}
 #sidebar.inactive #sidebar-trigger div {
     transform: rotate(0deg);
     transition: transform 0.3s;
}
 #sidebar a, #sidebar a:hover, #sidebar a:active {
     text-decoration: none!important;
}
/*Titres*/
 #sidebar h2 {
     margin: 0;
     font-size: 25px;
     color: #FFF9FA;
     font-family: 'Covered By Your Grace', cursive;
     font-weight: normal;
}
/*Bloc contexte*/
 #sidebar p {
     font-size: 11px;
     text-align: justify;
     margin: 0px 0px 15px;
     max-height: 150px;
     overflow: auto;
     padding-right: 8px;
}
/*Staff*/
 .sidebar-staff {
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
}
 .sidebar-staff > div {
     position: relative;
     overflow: hidden;
}
 .sidebar-staff > div > img {
     filter: blur(0px);
     transition: filter 0.3s;
}
 .sidebar-staff > div:hover > img {
     filter: blur(5px);
}
 .sidebar-staff > div > div {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 40px;
     background: rgba(255,255,255,0.5);
     font-size: 10px;
     text-align: center;
     transition: all 0.3s 0.2s;
}
 .sidebar-staff > div:hover > div {
     top: 0px;
}
 .sidebar-staff > div > div b {
     display: block;
     margin-top: 7px;
}
/*Top sites*/
 .sidebar-top {
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
}
 .sidebar-top a, .sidebar-top a img {
     height: 40px;
     width: 40px;
}
/*Bloc annonces*/
 .sidebar-annonces {
     font-size: 11px;
     padding: 8px;
     text-align: justify;
     background: #FFBB77;
     overflow: auto;
     height: 105px;
}
/*Scrollbars (seulement sous chrome) */
 #sidebar p::-webkit-scrollbar, .sidebar-annonces::-webkit-scrollbar {
     width: 2px;
}
 #sidebar p::-webkit-scrollbar-track, .sidebar-annonces::-webkit-scrollbar-track {
     background-color: #fdead1;
}
 #sidebar p::-webkit-scrollbar-thumb, .sidebar-annonces::-webkit-scrollbar-thumb {
     background:#e2a05f;
}

Et normalement tout devrait bien fonctionner. Je te laisse mettre le code en place et me dire si tout va bien.


Maintenant, concernant ton problème :



La solution la plus simple serait de tout simplement supprimer le pseudo-element pour que l'image de base s'affiche en ajoutant ce code :
Code:
.btn-link a img {
    display: initial;
}
Et en modifiant ça :
Code:
.post-bottom .btn-link a:after {
     content: "click";
}
En ça :
Code:
.post-bottom .btn-link a::after {
    display: none;
}

La seconde solution consiste à cibler le lien en question pour lui attribuer le bon texte comme ceci :
Code:
.post-bottom .btn-link a::after {
   margin-right: 10px;
}
/*va cibler le premier lien*/
.post-bottom .btn-link a:nth-of-type(1)::after {
   content: "Fiche";
}
/*va cibler le deuxième lien*/
.post-bottom .btn-link a:nth-of-type(2)::after {
   content: "Liens";
}

Ça semble être une bonne solution MAIS :
- Si tes membres remplissent le deuxième champ (par exemple, "liens") et pas le premier (par exemple, "fiche") ... Dans le message, seul le champ "liens" s'affichera... Et il deviendra par conséquent le premier lien ! Du coup, il aura l'intitulé "Fiche".
- De même, si tu affiches seulement certains de tes liens à la vue des invités, le même problème peut arriver.

Cette solution ne fonctionnera donc que si tes membres remplissent correctement tous les champs.

Enfin, troisième solution : un peu de js.
Alors je t'explique rapidement comment moi je m'y prendrais (ce n'est pas forcément la solution idéale, hein)
- J'attribue une icône différente à chaque champ
- Via le js, je cible les icônes pour appliquer une class différente à mes liens
- Via le CSS, je peux personnaliser l'intitulé du lien

En pratique, ça marche comme ça :
Dans ton PA > Utilisateurs & Groupes > Profils > Champs contact, tu vas créer (ou éditer) ton champ. Attribue lui une icône (dans le champ icône). Cette icône n'a pas d'importance, elle n'apparaîtra pas. Assure-toi qu'elle soit différente pour chaque champ. Dans "type d'affichage", sélectionne "icône".

Dans ton PA > Modules > Gestion des codes Javascript, crée un nouveau code (assure-toi d'avoir coché "oui" à "activer la gestion des codes javascript). Coche "sur les sujets" seulement, puisqu'on cible les messages. Colle le code suivant :
Code:
$(document).ready(function(){
 // On va cibler les liens en bas des messages
$('.post .post-bottom .btn-link a').each(function(){
 // Selon l'URL de l'icône, on attribue une class
 $(this).find('img[src="URL DE TON ICONE"]').parent().addClass("ta-class");
});
});

Enfin, dans ton CSS, tu peux personnaliser l'intitulé :
Code:
.post-bottom .btn-link a.ta-class::after {
    content: "liens";
}

J'espère que tu vas t'en sortir avec ce que je t'ai dit !
par Touriste V.2 le le Mar 17 Avr - 16:40
Haha merci de t'y prendre avec autant de clarté x)

Pour la sidebar : tout est nickel, mais elle passe derrière les images des forums de la page d'accueil (https://www.zupimages.net/up/18/16/7y2w.png), ensuite je pense être en mesure pour la décaler un peu plus vers le bas (au pire je reviens crier au secours ici), donc il n'y a que le petit souci par rapport aux images :3

Pour l'autre bouton : à ce niveau-là, le nouveau bouton affiche affiche bien "liens" et redirige vers le bon endroit, néanmoins les boutons "fiche" et "liens" sont toujours collés l'un à l'autre (comme sur le screen précédent, en fait), est-ce parce qu'il y a celui "mail" qui est affiché (ce qui signifie que les boutons se décolleront lorsque ce sera un membre normal/modo qui postera je suppose) ou est-ce juste qu'il faut ajouter un truc pour éloigner les deux boutons dans le css ?

Merci de ta patience xD
par Awful le le Mar 17 Avr - 17:09
J'essaye d'être le plus clair possible, donc content de voir que j'y arrive xD

Pour la sidebar
Ajoute ce code :
Code:
#sidebar {
z-index: 100;
}

Pour l'autre bouton
Ajoute simplement ce code
Code:
.post-bottom .btn-link a::after {
  margin-right: 10px;
}

Et là tout devrait être bon !
par Touriste v.2 le le Mar 17 Avr - 17:44
Omg ça fonctionne OMG

Merci infiniment pour tout ce que tu as fait c'est merveilleux et vraiment généreux de ta part Cry forever

Mais...je peux te poser une énième question ?

Bon je la pose mais t'es pas obligé de m'accorder la réponse : est-il possible de mettre la bannière du forum sur la totalité de la largeur de celui-ci ? Mon forum fait 900px, la bannière aussi (enfin elle en fait environ 1200px de base), mais il y a une marge de 10px à droite et à gauche que je souhaite conserver ; or, impossible de passer ma bannière en 920px sans pour autant ajouter encore de la largeur au corps du forum...je sais pas si je suis claire, tu me suis ? x)

Si je t'embête trop hésite pas à me le dire hein >.<
par Awful le le Mer 18 Avr - 15:49
Hello !

Oui, en fait il y a un padding (marge intérieure) de base qui s'applique sur le corps du forum. Mais si tu l'enlèves, il disparaîtra partout (par exemple, les catégories seront collées aux bords du forum) et ce n'est probablement pas ce que tu veux. :v

Est-ce que je pourrais voir ton template overall_header ?
par Touriste V.2 le le Mer 18 Avr - 18:10
Hola~

C'est exactement ça, les catégories et tout le reste du forum rendent vraiment trop mal sans la bordure x)

Pas de souci, le voilà :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet">
<link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Cabin+Sketch|Roboto' rel='stylesheet' type='text/css' />
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Bad+Script|Cedarville+Cursive|Grand+Hotel|Kaushan+Script|Lovers+Quarrel|Megrim|Raleway|Raleway+Dots|Satisfy" rel="stylesheet">
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <!-- BEGIN switch_compat_meta -->
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    <!-- END switch_compat_meta -->
    <!-- BEGIN switch_canonical_url -->
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    <!-- END switch_canonical_url -->
    {META_FAVICO}
    {META}
    {META_FB_LIKE}
    <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
    {T_HEAD_STYLESHEET}
    {CSS}
    <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
    <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
    <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
    <!-- END switch_fb_login -->

    <!-- BEGIN switch_ticker -->
    <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker_new -->
    <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
        /* Definir le sens de direction en fonction du panneau admin */
        var tickerDirParam = "{switch_ticker.DIRECTION}";
        var slid_vert = false;
        var auto_dir = 'next';
        var h_perso = parseInt({switch_ticker.HEIGHT});

        switch( tickerDirParam ) {
            case 'top' :
                slid_vert = true;
                break;
            case 'left':
                break;
            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;
            case 'right':
                auto_dir = 'prev';
                break;
            default:
                slid_vert = true;
        }

        $(document).ready(function() {
            var w_cont = $('#fa_ticker_container').width();

            if (w_cont > 0) {
                $('#fa_ticker_container').width(w_cont);

                /* Affichage de la liste */
                $('#fa_ticker_content').css('display','block');

                /* Calcul des dimensions du conteneur et des elements */
                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});
                var height_max = h_perso;

                /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                    if ($(this).height() > height_max) {
                        height_max = $(this).height();
                    }
                } );

                /* Redimensionnement des elements et des images trop larges */
                $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
                    if ($(this).width() > width_item) {
                        var ratio = $(this).width() / width_item;
                        var new_height = Math.round($(this).height() / ratio);
                        $(this).height(new_height).width(width_item);
                    }
                });

                /* Redimensionnement et centrage du conteneur en mode vertical */
                if (slid_vert) {
                    $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                }

                /* Initialisation du caroussel */
                $('#fa_ticker_content').jcarousel({
                    vertical: slid_vert,
                    wrap: 'circular',
                    auto: {switch_ticker.STOP_TIME},
                    auto_direction: auto_dir,
                    scroll: 1,
                    size: {switch_ticker.SIZE},
                    height_max: height_max,
                    animation: {switch_ticker.SPEED}
                });
            } else {
                $('ul#fa_ticker_content li:not(:first)').css('display','none');
                $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
            }
        });
    //]]>
    </script>
    <!-- END switch_ticker_new -->

    <script type="text/javascript">//<![CDATA[
    $(document).ready(function(){
        <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
        <!-- END switch_enable_pm_popup -->
        <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
        <!-- END switch_report_popup -->
        <!-- BEGIN switch_ticker -->
        $(document).ready(function() {              
            Ticker.start({
                height : {switch_ticker.HEIGHT},
                spacing : {switch_ticker.SPACING},
                speed : {switch_ticker.SPEED},
                direction : '{switch_ticker.DIRECTION}',
                pause : {switch_ticker.STOP_TIME}
            });
        });
        <!-- END switch_ticker -->
    });

    <!-- BEGIN switch_login_popup -->
        var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
    <!-- END switch_login_popup -->

    <!-- BEGIN switch_login_popup -->
    $(document).ready( function() {
        $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
        });
    });
    <!-- END switch_login_popup -->
    //]]>
    </script>
    {GREETING_POPUP}
    <!-- BEGIN switch_ticker_new -->
    <style>
    .jcarousel-skin-tango .jcarousel-item {
        text-align:center;
        width: 10px;
    }

    .jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-right: {switch_ticker.SPACING}px;
    }

    .jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: {switch_ticker.SPACING}px;
    }
    </style>
    <!-- END switch_ticker_new -->
    {HOSTING_JS}
    <!-- BEGIN google_analytics_code -->
    <script type="text/javascript">
    //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

    <!-- BEGIN google_analytics_code_bis -->
    _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
    _gaq.push(['b._trackPageview']);
    <!-- END google_analytics_code_bis -->

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    //]]>
    </script>
    <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <div id="sidebar">
      <div id="sidebar-trigger"><div>+</div></div>
      <h2>Contexte</h2>
    <p>C'est l'histoire d'une arnaque dans laquelle des pigeons tombent : des vacances paradisiaques sur une île dans le triangle des Bermudes à bord d'un bateau de croisière, avec pour seul personnel le Capitaine Crook (aussi conchita, serveur et gogo danseur).<br/><br/>Mais sur l'île d'Egún, leur escale, de l'autre côté des montagnes, vit un peuple oublié de la civilisation...<br/><br/> Voyageurs et Natifs forment ainsi les deux groupe de ce petit monde, sans pour autant pouvoir se cottoyer pour le moment.</p>
      <div class="sidebar-staff">
        <div><img src="http://i.imgur.com/zM3YoFP.png" /><div><b>Lenorian</b><a href="http://the-holiday-scam.forumactif.com/u3">Profil</a></div></div>
        <div><img src="http://i.imgur.com/oboKxCR.png" /><div><b>Aiden</b><a href="http://the-holiday-scam.forumactif.com/u4">Profil</a></div></div>
      </div>
      <div class="sidebar-top">
        <a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=1200" target="_blank"><img src="https://www.zupimages.net/up/18/15/n8wp.png" /></a>
        <a href="http://www.root-top.com/topsite/callista/in.php?ID=1358" target="_blank"><img src="https://www.zupimages.net/up/18/15/hz9g.png" /></a>
        <a href="http://www.root-top.com/topsite/jeuparforum/in.php?ID=821" target="_blank"><img src="https://www.zupimages.net/up/18/15/1y61.png" /></a>
        <a href="http://www.root-top.com/topsite/virtu4ldreaiviz/in.php?ID=5280" target="_blank"><img src="https://www.zupimages.net/up/18/15/kyhm.png" /></a>
      </div>
          <h2>Petites annonces</h2>
      <div class="sidebar-annonces">
        Tu recherches un rp mais tu as peur ne ne pas être assez visible ? Ne t'en fais pas, mon cachalot, tu seras affiché ici.
      </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <script>
    $(document).ready(function(){
var sidebar_class = $.cookie('sidebar_class');
    if(sidebar_class) {
        $('#sidebar').attr('class', sidebar_class);
    }
    $("#sidebar-trigger").click(function() {
        $("#sidebar").toggleClass("inactive");
        $.cookie('sidebar_class', $('#sidebar').attr('class'));
    });
    });
  </script>
  <div style="width:200px;padding:5px;position:fixed;height:380px;right:5px;top:120px;z-index:100;"><iframe src="https://www2.cbox.ws/box/?boxid=2394117&boxtag=UC6KZx" width="200" height="350" allowtransparency="yes" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe></div>
  <div class="hautbas"><a href="#top"><img src="http://i.imgur.com/AG7Ss6z.png" alt="Revenir en haut"></img></a> <a href="#bottom"><img src="http://i.imgur.com/OmGqQCT.png" alt="Aller en bas"></img></a></div>
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
        <h1><img src="https://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
        <div class="content">
            <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
            </p>
        </div>
    </div>
    <!-- END hitskin_preview -->

    <!-- BEGIN switch_login_popup -->
    <div id="login_popup" style="z-index: 10000 !important;">
        <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
            <tr height="25">
                <td class="catLeft">
                    <span class="genmed module-title">{SITENAME}</span>
                </td>
            </tr>
            <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
                <td class="row1" align="left" valign="top">
                    <div id="login_popup_buttons">
                        <form action="{S_LOGIN_ACTION}" method="get">
                            <input type="submit" class="mainoption" value="{L_LOGIN}" />
                            <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                            <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                        </form>
                    </div>
                    <span class="genmed">{LOGIN_POPUP_MSG}</span>
                </td>
            </tr>
        </table>
    </div>
    <!-- END switch_login_popup -->

    <a name="top"></a>
    {JAVASCRIPT}

    <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
        <tr>
            <td class="bodyline">
                <table width="900px" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="920px" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><br/><br/><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="10" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle"><br />{MAIN_SITENAME}</div>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>


<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" id="navSIT">
<tr><td><!-- BEGIN switch_user_logged_in --><div class="avaSIT"></div><div class="welcSIT"></div><!-- END switch_user_logged_in --></td></tr>
<script type="text/javascript">$(function(){$('.avaSIT').html(_userdata.avatar);{$('.welcSIT').html( _userdata.username);}});</script>
<tr><td class="navSIT" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td></tr>
</table>

                <!-- BEGIN switch_ticker_new -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                        <tr>
                            <td align="left" class="row1">
                                <div id="fa_ticker_container">
                                    <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                                        <!-- BEGIN ticker_row -->
                                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                        <!-- END ticker_row -->
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                        <tr>
                            <td align="left" class="row1">
                                <div id="fa_ticker_container">
                                    <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                        <div class="fa_ticker_content">
                                            <!-- BEGIN ticker_row -->
                                            <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                            <!-- END ticker_row -->
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker -->

                <div id="page-body">
                    <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                        <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                            <tbody>
                                <tr>
                                    <td valign="top" width="{C1SIZE}">
                                        <div id="{ID_LEFT}">
                                            <!-- BEGIN giefmod_index1 -->
                                            {giefmod_index1.MODVAR}
                                                <!-- BEGIN saut -->
                                                <div style="height:{SPACE_ROW}px"></div>
                                                <!-- END saut -->
                                            <!-- END giefmod_index1 -->
                                        </div>
                                    </td>
                                    <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
<!-- END html_validation -->

Je t'ai tout mis c'était peut-être pas ce que tu voulais ? xDD

Au pire si c'est pas grave je ferai sans :c
par Awful le le Jeu 19 Avr - 10:05
Non, c'est parfait.

Repère ce morceau de code :
Code:
<table width="900px" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="920px" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><br/><br/><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="10" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle"><br />{MAIN_SITENAME}</div>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

Remplace-le par :
Code:

<div id="i_logo">
<a href="{U_INDEX}"><img src="{LOGO}" border="0" alt="{L_INDEX}" vspace="1" /></a>
<div class="maintitle">{MAIN_SITENAME}</div>
</div>

Et dans ton CSS remplace :
Code:
#i_logo {
    width: 100%;
    height: auto;
}
Par :
Code:
#i_logo {
    margin: -10px -10px 0;
    text-align: center;
}
#i_logo img {
    width: 100%;
}


Et là tout devrait être bon !
par Touriste V.2 le le Jeu 19 Avr - 10:36
OMG OMG

Ouii~ ça fonctionne, merci beaucoup !
C'est vraiment gentil de nous avoir aidé comme ça Cry forever

Notre forum est ouvert, tu penses que je peux passer te demander un partenariat ? :3

MERCI POUR TOUT Tears
par Awful le le Jeu 19 Avr - 10:55
De rien, ravi d'avoir aidé !
OMG

Et bien sûr, les demandes de partenariat son toujours ouvertes !
Yes
par Contenu sponsorisé le