AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Personnaliser une barre de recherche

    Partagez
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Lun 2 Oct 2017 - 3:10

    Bonjour,

    J'ai crée un forum sur l'hébergeur xooit.
    Voilà mon forum : http://rencontresentreaspergers.soforums.com/

    J'avais trouvé un barre de recherche, mais, j'aimerai la personnaliser, la rendre plus jolie et plus petite :


    Voilà son code :
    Code:
    <!-- DEBUT RECHERCHER -->
        <div><form action="search.php?mode=results" method="post">
        <input class="post" type="text" name="search_keywords" size="20" onfocus="this.value=''" value="Recherche rapide" />
        <input class="button" name="submit" type="submit" value="Rechercher" />
        </form></div>
    <!-- FIN RECHERCHER -->

    J'aimerai qu'elle fasse cette largeur -->
    Mais en faisant en sorte que les membres puissent taper des mots assez longs.

    J'aimerai que elle soit un peu comme ça --> écriture taille size : 11
    Avec les bords légèrement arrondis et une loupe à la place du coeur.

    Merci d'avance pour votre réponse. :)
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Ven 20 Oct 2017 - 20:27

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
    Attention, l'absence de réponse à ce message entraînera l'archivage du topic d'ici 10 jours.



    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Lun 23 Oct 2017 - 19:19

    Bonjour,

    Merci pour votre réponse.
    Oui, ce topic est toujours d'actualité, je n'ai pas trouvé de solutions pour modifier cette barre de recherche.

    À bientôt
    avatar
    Nihil Scar Winspeare
    Messages : 5028

    le Lun 6 Nov 2017 - 19:29

    Coucou :)

    Si j'ai bien compris souhaites faire ces 2 modifications ?
    1/ Réduire la largeur de l'input (l'endroit où on peut écrire)
    2/ Remplacer le bouton par une loupe

    C'est bien cela ? Est ce que tu as une préférence pour l'image pour la loupe ?



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Jeu 23 Nov 2017 - 3:41

    Bonjour,

    Excusez moi pour ma réponse tardive, j'allais pas bien.Mais ça va mieux Very Happy

    1)Oui, je souhaite réduire la largeure de l'input pour que la barre de recherche soit de la même largeur que ce bouton -->

    2) Et une loupe comme ceci -->

    À bientôt
    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Ven 15 Déc 2017 - 15:59

    Salut,

    HTML:
    Code:
    <!-- DEBUT RECHERCHER -->
       <div class="search_bar">
          <form action="search.php?mode=results" method="post">
             <input class="post" type="text" name="search_keywords" onfocus="this.value=''" value="Recherche rapide" />
             <input class="button" name="submit" type="submit" value="" />
          </form>
       </div>
    <!-- FIN RECHERCHER -->

    CSS:
    Code:
    /* Le conteneur de ta barre de recherche et du bouton */
    .search_bar {
      background-color: #ecab50; // Couleur de fond du conteneur
      width: 190px; // Largeur du conteneur
      padding: 1px 3px; // Marge intérieure du conteneur
    }

    /* La barre de recherche */
    .search_bar .post{
      background-color: #fefefe; // Couleur de fond de la barre de recherche
      border-radius: 5px; // Valeur d'arrondi des angles
      width: 150px; // Largeur de la barre
      height: 18px; // Hauteur de la barre
      margin-right: 3px; // Espacement entre la barre et le bouton
    }

    /* Le bouton */
    .search_bar .button {
      width: 30px; // Largeur du bouton
      //        Couleur   Ton image                           L'image n'est pas dupliqué    Position
      background: #000 url("https://i11.servimg.com/u/f11/17/81/42/50/loupe11.png") no-repeat center center; // Background de ton bouton
    }

    Voilà, tout est expliqué à l'intérieur, y a plus qu'à copier coller et à éditer selon ton besoin :)

    Oublie à mettre en résolu si ça te convient :)
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Ven 15 Déc 2017 - 22:18

    Bonjour,

    J'ai essayé d'installer les codes mais ça avait buggé. Je ne sais pas où mettre le code CSS dans mon template.


    Voilà mon template overhall header :
    Code:
    <div align="right" style="margin-right: 100px; position: right;">
    <a href="#empty" onclick="showSpoiler(this);" style="position: fixed;">
    </a>
    <div class="inner" style="display:none;"><br>
    <table align="center" style="position: fixed;" class="forumline">
    <tr>

    <td width="900" style="background-color: #FFFFFF;" align="center">

              <br />
       
              <script type="text/javascript" xml:space="preserve"><!--
    var e = window.document.forms["exalead_search_form"].elements["q"];if(e.value.length == 0) e.style.background = "white url('http://www.exalead.fr/apogee/logo-small.gif') no-repeat 35px 2px;";//--></script>
            </form></td>

    </tr>
    <tr>

    </tr>
    </table></div></div>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="google-site-verification" content=
    "Wd16375yy2yyZcjNfXyijbyVVFTpokaRJNBc08hgqcw">
    <link rel="alternate" type="application/rss+xml" title="Global"
    href="/rss.php">
    <link rel="alternate" type="application/rss+xml" title=
    "Global, sujets et réponses" href="/rss.php?t=1">
    <meta name="google-site-verification" content=
    "OEwpZA40AkMHcBb7DSSJltmq3i2tW1waWlv1Y8B_-NA">
    <meta name="language" content="fr">
    <meta name="description" lang="fr" content=
    "Ceci n'est pas une association pour l'autisme ou le syndrome d'asperger, c'est un forum autisme pour le syndrome d'asperger ou syndrome asperger. Avec le syndrome d'asperger profitez d'un café rencontre ou divers cafés rencontres pour vous rencontrer.">
    <meta name="keywords" lang="fr" content=
    " forum, autisme, syndrome asperger, d'asperger association rencontre, café rencontre">
    <link rel="search" title="Rencontres entre aspergers" type=
    "application/opensearchdescription+xml" href=
    "/opensearchdescription.php">
    <link rel="top" href="./index.php" title=
    "Rencontres entre aspergers Index du Forum">
    <link rel="search" href="./search.php" title="Rechercher">
    <link rel="help" href="./faq.php" title="FAQ">
    <link rel="author" href="./memberlist.php" title="Membres">
    <title>Rencontres entre aspergers</title>
    <!-- link rel="stylesheet" href="http://img.xooimage.com/files110/3/1/e/bluedim-4fa6158.css" type="text/css" -->

    <style type="text/css">
    #fastNewsInfo{display:none !important}
    <!--
    body {
    background: url(http://img.xooimage.com/files110/2/9/c/background-4fbd89c.gif) #6A0888;
    scrollbar-face-color: #D9D9EB;
    scrollbar-highlight-color: #FCFCF5;
    scrollbar-shadow-color: #D9D9EB;
    scrollbar-3dlight-color: #e6ecf1;
    scrollbar-arrow-color: #336699;
    scrollbar-track-color: #e6ecf1;
    scrollbar-darkshadow-color: #98AAB1;
    }
    option.h0 { background-color: #FFFFFF; color: #006EBB; } option.h0c { background-color: #FFFFFF; color: #006EBB; } option.h0sf { background-color: #FFFFFF; color: #006EBB; } option.h1 { background-color: #FFFFFF; color: #FF6428; } option.h1c { background-color: #FFFFFF; color: #FF6428; } option.h1sf { background-color: #FFFFFF; color: #FF6428; } option.h2 { background-color: #FFFFFF; color: #329600; } option.h2c { background-color: #FFFFFF; color: #329600; } option.h2sf { background-color: #FFFFFF; color: #329600; }
    select.jumpbox { background-color: #FFFFFF; }
    font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
    a:link,a:active,a:visited { color : #336699; }
    a:hover { text-decoration: underline; color : #336699; }
    hr { height: 0px; border: solid #e6ecf1 0px; border-top-width: 1px;}
    .bodyline { background-color: #FCFCF5; border: 1px #98AAB1 solid; }
    .forumline { background-color: #FCFCF5; border: 2px #ABC0D4 solid; }
    td.row1 { background-color: #e6ecf1; }
    td.row2 { background-color: #D9D9EB; }
    td.row3 { background-color: #e6ecf1; }
    td.rowpic {
    background-color: #FCFCF5;
    background-image: url(http://img.xooimage.com/files110/7/0/d/capture-du-2016-0...22-36-39-500e937.png);
    }
    th {
    color: 336699; font-size: 14px; font-weight : bold;
    background-color: #336699; height: 25px;
    background-image: url(http://img.xooimage.com/files110/7/0/d/capture-du-2016-0...22-36-39-500e937.png);
    }
    td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    background-image: url(http://img.xooimage.com/files110/7/0/d/capture-du-2016-0...22-36-39-500e937.png);
    background-color:#e6ecf1; border: #FEFEF7; border-style: solid; height: 28px;
    }
    td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
    }
    th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: #FCFCF5; border-style: solid; height: 28px;
    }
    td.row3Right,td.spaceRow {
    background-color: #e6ecf1; border: #FEFEF7; border-style: solid;
    }
    th.thHead,td.catHead { font-size: 14px; border-width: 1px 1px 0px 1px; }
    th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
    th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
    th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
    th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
    th.thTop { border-width: 1px 0px 0px 0px; }
    th.thCornerL { border-width: 1px 0px 0px 1px; }
    th.thCornerR { border-width: 1px 1px 0px 0px; }
    .maintitle {
    font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; line-height : 120%; color : #000000;
    }
    .gen { font-size : 14px; }
    .genmed { font-size : 14px; }
    .gensmall { font-size : 10px; }
    .gen,.genmed,.gensmall { color : #000000; }
    a.gen,a.genmed,a.gensmall { color: #336699; text-decoration: none; }
    a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #336699; text-decoration: underline; }
    .mainmenu { font-size : 14px; color : #000000 }
    a.mainmenu { text-decoration: none; color : #336699; }
    a.mainmenu:hover{ text-decoration: underline; color : #336699; }
    .cattitle { font-weight: bold; font-size: 14px ; letter-spacing: 1px; color : #336699}
    a.cattitle { text-decoration: none; color : #336699; }
    a.cattitle:hover{ text-decoration: underline; }
    .forumlink { font-weight: bold; font-size: 14px; color : #336699; }
    a.forumlink { text-decoration: none; color : #336699; }
    a.forumlink:hover{ text-decoration: underline; color : #336699; }
    .nav { font-weight: bold; font-size: 14px; color : #000000;}
    a.nav { text-decoration: none; color : #336699; }
    a.nav:hover { text-decoration: underline; }
    .topictitle,h1,h2 { font-weight: bold; font-size: 14px; color : #000000; }
    a.topictitle:link { text-decoration: none; color : #336699; }
    a.topictitle:visited { text-decoration: none; color : #336699; }
    a.topictitle:hover { text-decoration: underline; color : #336699; }
    .name { font-size : 14px; color : #000000;}
    .postdetails { font-size : 10px; color : #000000; }
    .postbody { font-size : 14px; line-height: 18px}
    a.postlink:link { text-decoration: none; color : #336699 }
    a.postlink:visited { text-decoration: none; color : #336699; }
    a.postlink:hover { text-decoration: underline; color : #336699}
    .code {
    font-family: Courier, 'Courier New', sans-serif; font-size: 14px; color: #000000;
    background-color: #FCFCF5; border: #e6ecf1; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }
    .quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; line-height: 125%;
    background-color: #FCFCF5; border: #e6ecf1; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }
    .copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; letter-spacing: -1px;}
    a.copyright { color: #000000; text-decoration: none;}
    a.copyright:hover { color: #000000; text-decoration: underline;}
    input,textarea, select {
    color : #000000;
    font: normal 14px Verdana, Arial, Helvetica, sans-serif;
    border-color : #000000;
    }
    input.post, textarea.post, select {
    background-color : #FCFCF5;
    }
    input { text-indent : 2px; }
    input.button {
    background-color : #e6ecf1;
    color : #000000;
    font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    input.mainoption {
    background-color : #FCFCF5;
    font-weight : bold;
    }
    input.liteoption {
    background-color : #FCFCF5;
    font-weight : normal;
    }
    .name b span ~ a {
    display:none;
    }
    .helpline { background-color: #D9D9EB; border-style: none; }
    @import url("http://img.xooimage.com/files10/f/o/formie-30d7c.css");
    -->
    </style>

    <script language="Javascript" type="text/javascript">
    <!--
    if ( 0 )
    {
    window.open('privmsg.php?mode=newpm', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
    }
    //-->
    </script>
    <link rel="shortcut icon" href=
    "http://img.xooimage.com/files110/a/a/3/c26600810947cc3f5...6d962d72-48640ac.jpg">

    <style type="text/css">
    #vapi_product_image {display: none !important;}
    </style>

    <style type="text/css">
    #mainDivForCloseCIMDIV {
     /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
      position: absolute; left: 0px; top: 0px;
    }
    body > div#mainDivForCloseCIMDIV {
      /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
      position: fixed;
    }
    </style>


    <!-- DEBUT DE CSS ONGLET FACEBOOK http://graphcode.forumactif.org/ et http://epicode.bbactif.com/t10176-css-l-ouverture-d-un-onglet-facebook-prends-trop-de-place#183712  -->

        <style type="text/css">
        /**volet facebook**/
        /******************/
        #volet_1 {
          width: 250px;                        /* Largeur du Volet */
          padding: 3px;                        /* Marge intérieure dans le Volet */
          background:#EFF0FF;                /* Couleur de fond du Volet */
          color: #000;                    /* Couleur texte dans Volet */
          height: 500px;                      /* Hauteur du Volet */
        border-radius:40px;                  /* Arrondir le volet */
        border:2px solid #8FA3AD;
     
        }
        #volet_1 a.ouvrir,
        #volet_1 a.fermer {
       
     
          color: #000;        /* couleur de Infos et de Fermer */
          text-decoration: none;  /* Décoration du texte Infos et de Fermer */
     
        }

        #volet_1 {
          position: absolute;    /* Positionnement du Volet */
          right: -260px;          /* plus le chiffre est bas, plus il va vers ma gauche */

          /* Transition sur le volet */
          -webkit-transition: all .5s ease-in;
          -moz-transition: all .5s ease-in;
          transition: all .5s ease-in;

        }

        #volet_1 a.ouvrir,
        #volet_1 a.fermer {
          position: absolute;  /* Positionnement de Infos et Fermer */
          left: -34px;        /* plus le chiffre est bas, plus ça décale vers ma gauche */
          top: 400px;          /* plus le chiffre est bas plus ça remonte */
        -moz-radius: 0 0 0px 0px;
          border-radius: 0 0 0px 0px;
        }

        #volet_1 a.fermer {
          display: none;    /* Pour que ouvrir passe dessus fermer, lorsque c'est fermé */
        }

        #volet_1:target {
          right: 10px;      /* plus le chiffre est élevé, plus ça fait un espace entre le volet ouvert et le bord de l'écran */
        }

        /* Code pour la fermeture */
        #volet_1:target a.fermer {
          display: block;        /* Pour que fermer apparaisse lorsque ouvrir apparait */
        }

        #volet_1:target a.ouvrir {
          display: none;        /* Pour que ouvrir disparaisse lorsque fermer apparait */
        }

        #voletfermer_1:target #volet_1 {
          right: -258px;          /* concerne la vitesse de fermeture du volet */
        }

        #voletfermer_1 {
          position: fixed;
          top: 120px; right: 0;  /* Si le chiffre est 1, ça remonte */
        }
        /**fin volet facebook**/
        /**********************/

        </style>
    <!-- FIN DE CSS ONGLET FACEBOOK  -->






    <style type='text/css'>
    /* Fond du gadget de la barre de recherche */
    .recherche_p {
    }
    background-color: #D9D9EB;  /* Couleur de fond */
    /* Champ de saisie */
    #searchthis #search {
    }
    border: none;  /* Pas de bordure */
    padding: 1px 3px 1px 3px;  /* Espace entre les bords et le contenu : haut droite bas gauche  */
    width: 70.5%;  /* Permet d'ajuster la largeur du champ de saisie à 100% */
    box-sizing: border-box;  /* Important */
    font-family: Lato;  /* Police du texte */
    font-size: 12px;  /* Taille de la police du texte */
    font-weight: normal;  /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px;  /* Espacement des caractères */
    /* Bouton valider */  #searchthis #search-btn {
    }
    margin: 2px 0 0 0;  /* Espace autour du bouton : haut droite bas gauche  */
    color: #0F056B;  /* Couleur du texte */
    </style>



    <style type="text/css">
    .monLien {
    position: relative;
    float: left;
    left: 80px;
    }
    #imgLien {
    width: 50px;
    margin:10px;
    }
    textarea{
    padding:30px 60px;
    height: 80px;
    }
    </style>
    </head>
        <a name="top"></a>

    <!-- DEBUT DE PARTAGER ... -->
    <div style="display: inline-block; position: absolute;right:10px">
    <a target="_blank" title="Partagez sur Twitter" href="https://twitter.com/intent/tweet?text=Rencontres%20entre%20aspergers%20%3A%3A%20Ceci%20n%27est%20pas%20une%20association%20pour%20l%27autisme%20ou%20le%20syndrome%20d%27asperger%2C%20c%27est%20un%20forum%20autisme%20pour%20le%20syndrome%20d%27asperger%20ou%20syndrome%20asperger.%20Avec%20le%20syndrome%20d%27asperger%20profitez%20d%27un%20caf%C3%A9%20rencontre%20ou%20divers%20caf%C3%A9s%20rencontres%20pour%20vous%20rencontrer.&url="http%3A%2F%2Frencontresentreaspergers.soforums.com%2Findex.php" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="http://img.xooimage.com/files110/9/b/0/oie_24191212q0xlm8ia-5038e39.png" alt="Twitter" /></a>
    <br>
      <a target="_blank" title="Partagez sur Google +" href="https://plus.google.com/share?url=http%3A%2F%2Frencontresentreaspergers.soforums.com%2Findex.php" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="http://img.xooimage.com/files110/6/9/0/google--5038c7f.png" alt="Google Plus" /></a>
    <br>
      <a target="_blank" title="Envoyer par mail" href="mailto:?subject=Ce forum peut t'intéresser&body=Bonjour, j'ai trouvé un forum s'appelant Rencontres entre aspergers
    http://rencontresentreaspergers.soforums.com/index.php " rel="nofollow"><img src="http://img.xooimage.com/files110/c/8/8/oie_jpg-5038e2e.png" alt="email" /></a><br>
    </div>
    <!-- FIN DE PARTAGER  ... -->


    <!-- DEBUT BLOC 4 BOUTONS -->
    <div style="display: inline-block; position: absolute;">
      <a lambdaeverupdated="43" href="http://rencontresentreaspergers.soforums.com/index.php" title="Accueil du forum"><img src="http://img.xooimage.com/files110/5/6/8/accueil-4fbdb67.gif" alt="Accueil du forum rencontre" border="0"></a><br>
      <a lambdaeverupdated="43" href="http://rencontresentreaspergers.soforums.com/portal.php" title="Portail"><img src="http://img.xooimage.com/files110/5/2/c/portail-4fbdb6e.gif" alt="Portail du forum autisme" border="0"></a><br>
      <a lambdaeverupdated="43" href="http://contact.xoo.it/index.php" target="_blank" title="Contacter l'administratrice"><img src="http://img.xooimage.com/files110/a/9/c/contact-4fbdb7b.gif" style="border:0px" alt="Contact de ce forum autisme"></a><br>
      <a lambdaeverupdated="43" href="http://rencontresentreaspergers.soforums.com/t953-Nous-aider.htm#p4070" title="Nous aider pour faire connaitre ce forum"><img src="http://img.xooimage.com/files110/d/8/4/nous.aider-4fbdb89.gif" alt="Aider ce forum autisme" border="0"></a>






    <!-- DéBUT DE MENU SPOILER RECHERCHER -->
    <font color = "#000000"><div style="margin: 0px 0px 0px;">
    <input value="" style="border: 0px; padding: 0px; width: 110px; font-size: 20px;
    background-image: url(http://img.xooimage.com/files110/6/4/1/vert-fait-bonne-taille-4fb0444.jpg); background-position: center center; background-repeat: no-repeat;"
     onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = '';
    this.style.backgroundImage = 'url(http://img.xooimage.com/files110/5/9/1/cacher-4fb07bd.jpg)'; } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.style.backgroundImage = 'url(http://img.xooimage.com/files110/6/4/1/vert-fait-bonne-taille-4fb0444.jpg)'; }" type="button"></div><div class="quotecontent"><div style="display: none;">
    <br/>

    <!-- DEBUT BLOC BLEU RECHERCHER -->
    <table width="40%" cellspacing="0" border="0" align="center" cellpadding="1">
      <tr>
        <td align="left">
          <span class="gensmall"><a href="{}" class="gensmall">{}</a></span>
        </td>
        <td align="right">
          <span class="gensmall">{}</span>
        </td>
      </tr>
    </table>
    <table width="65%" cellpadding="0" cellspacing="1" border="0" class="forumline">
      <tr>
        <td class="catHead" colspan="2" height="10">
          <span class="cattitle">      <font color = "#000000">Rechercher :</font></span>
        </td>
      </tr>
      <tr>
        <td class="row1" align="left" width="100%">
          <span class="gensmall">

    <!-- DEBUT RECHERCHER -->
        <div><form action="search.php?mode=results" method="post">
        <input class="post" type="text" name="search_keywords" size="20" onfocus="this.value=''" value="Recherche rapide" />
        <input class="button" name="submit" type="submit" value="Rechercher" />
        </form></div>
    <!-- FIN RECHERCHER -->

      </span>
        </td>
      </tr>
    </table>
    <table width="60%" cellpadding="1" cellspacing="1" border="0">
      <tr>
      <td align="left" valign="top">
        <span class="gensmall">{}</span>
      </td>
    </tr>
    </table>
    <!-- FIN BLOC BLEU RECHERCHER -->
    </div></div></div></font>
    <!-- FIN DE MENU SPOILER RECHERCHER -->

    </div>
    <!-- FIN BLOC 4 BOUTONS -->







    <!-- DEBUT DE ONGLET FACEBOOK HTML -->
    /**volet facebook**/
    /******************/
    <div id="voletfermer_1" style="z-index:299 !important;">
      <div id="volet_1">
    <!-- DEBUT DU CONTENU DE L'ONGLET FACEBOOK -->
    <br/>
    <div align="center">
    <strong><a href="https://www.facebook.com/rencontresentredesaspergers?fref=ts" style="text-decoration:none" target="_blank"><font size="3" color="#0F056B">Page Facebook</font></a></strong>
    <br/><br/><br/>
    <strong><a href="https://www.facebook.com/profile.php?id=100004653464965" style="text-decoration:none" target="_blank"><font size="3" color="#0F056B">Profil d'Admin</font></a></strong>

    <br/><br/><br/>

    <!-- début partager facebook -->
    <a href="http://pup-op-1.clicforum.com/index.php" onclick="window.open(this,'popup','width=800,height=340,left=50,top=50,toolbar=0, location=0, menubar=0, status=0, directories=0, scrollbars=1, resizable=1'); return false;">
    <img src="http://img.xooimage.com/files110/7/2/3/capture-du-2016-0...19-26-32-4f64f8f.png"></img></a>
    <!-- fin partager facebook -->

    <br/><br/>
    <!-- Début bouton inviter -->
    <a href="https://www.facebook.com/dialog/send?link=http%3A%2F%2Frencontresentreaspergers.soforums.com%2Fportal.php&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Freturn%2Fclose&display=popup&app_id=189314431096339" onclick="window.open(this,'popup','width=500,height=250,left=50,top=50,toolbar=0, location=0, menubar=0, status=0, directories=0, scrollbars=1, resizable=1'); return false;">
    <img src="http://img.xooimage.com/files110/7/9/a/capture-du-2016-0...19-05-37-4f64efd.png"></img></a>
    <!-- Fin bouton inviter -->


    <br/>



    <!-- FIN DU CONTENU DE L'ONGLET FACEBOOK-->

     <a href="#volet_1" class="ouvrir"><img src="http://img.xooimage.com/files110/3/f/7/petit-facebook-5038738.jpg"/></a>
        <a href="#voletfermer_1" class="fermer"><img src="http://img.xooimage.com/files110/a/7/4/fermer-petit-4f648e8.png"/></a>
      </div>
    </div>
    /**fin volet facebook**/
    /**********************/
    </div>
    <!-- FIN DE ONGLET FACEBOOK HTML -->


    <!-- Ici était un javascript Spoiler http://kontaniou.clicforum.com/t219-Code-javascript-spoiler.htm#p311 -->




    <body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    <a name="top"></a>
    <table width="80%" cellspacing="0" cellpadding="10" border="0" align="center">
        <tr>
            <td class="bodyline"><table width="80%" cellspacing="0" cellpadding="0" border="0">








    <div align="center">


    <img src=
    "http://img.xooimage.com/files110/9/1/d/bande-blanche-de-l-accueil-48c6ccb.png"
    alt="espace"><br>


    <img  src="http://img.xooimage.com/files110/b/b/3/nouvel-espace-largeur-85-4faefac.png"  alt="espace">




    <!-- DEBUT DE LA PARTIE TITRE ... -->
      <a href="http://rencontresentreaspergers.soforums.com/index.php" title="Accueil du forum"><img src="http://img.xooimage.com/files110/0/b/4/titre.du.forum-4fbd8c4.gif" alt="titre du forum" border="0"></a> 
    <!-- FIN DE LA PARTIE TITRE ... -->



    <!-- IF S_USER_LOGGED_IN -->
    <a href="http://rencontresentreaspergers.soforums.com/login.php?logout=true" title="Vous êtes en ligne"><img src="http://img.xooimage.com/files110/3/3/2/enligne-4fbdd6e.gif" alt="déconnexion forum" border="0"></a> 
    <!-- ENDIF -->

    <!-- IF not S_USER_LOGGED_IN -->
    <a href="http://rencontresentreaspergers.soforums.com/login.php" title="Vous êtes hors ligne"><img src="http://img.xooimage.com/files110/7/0/e/horsligne-4fbdd7f.gif" alt="connexion au forum" border="0"></a> 
    <!-- ENDIF -->


    <br/>
        
    <img src=
    "http://img.xooimage.com/files110/a/2/a/sous-titre-4fbdddf.gif"
    alt="description du forum">


    <!-- Début de la bannière du menu fin-->
    <table width="100%" cellspacing="0" border="0" align="center"cellpadding="1">
      <tr>
        <td align="left">
          <span class="gensmall"><a href="" class="gensmall"></a></span>
        </td>
        <td align="right"></td>
      </tr>
    </table>
    <table width="100%" cellpadding="1" cellspacing="1" border="0"class="forumline">
      <tr>
        <td class="row1" align="left">
          <div align="center"><span class="gensmall">
       
    <a href="http://rencontresentreaspergers.soforums.com/t379-Charte-et-services-du-forum.htm" title="Charte"><img src="http://img.xooimage.com/files110/f/9/5/oie_15225142hy0vznh-539e375.png" alt="Charte" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/t379-Charte-et-services-du-forum.htm" style="text-decoration:none"><font size="2"  color="#0F056B">Charte</font></a>
       
    <a href="http://rencontresentreaspergers.soforums.com/privmsg.php?folder=inbox" title="Messagerie"><img src="http://img.xooimage.com/files110/1/b/6/iconelettreactive-4dcd7f5.png" alt="Messagerie du forum" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/privmsg.php?folder=inbox" style="text-decoration:none"><font size="2"  color="#0F056B">Messagerie</font></a>
         
    <a href="http://enregistrement.e-monsite.com/" title="S'enregister"><img src="http://img.xooimage.com/files110/6/b/f/capture-du-2015-0...01-17-24-4a809e4.png" alt="S'enregistrer sur le forum" border="0"</a>
    <a href="http://enregistrement.e-monsite.com/" style="text-decoration:none"><font size="2"  color="#0F056B">S'enregistrer</font></a>
         
    <a href="http://rencontresentreaspergers.soforums.com/profile.php?mode=editprofile" title="Éditer son profil"><img src="http://img.xooimage.com/files110/7/6/2/profil-4db3683.png" alt="Profil" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/profile.php?mode=editprofile" style="text-decoration:none"><font size="2"  color="#0F056B">Profil</font></a>
         
    <a href="http://rencontresentreaspergers.soforums.com/t278-identifiants-oubli.htm#p2216" title="Identifiants oubliés?"><img src="http://img.xooimage.com/files1/3/5/e/interrogation-1--2e754.gif" alt="Profil" border="0"></a>
     <a href="http://rencontresentreaspergers.soforums.com/t278-identifiants-oubli.htm#p2216"
    style="text-decoration:none"><font size="2" color=
    "#0F056B">Identifiants oubliés?</font></a>
        
      <img src="http://img.xooimage.com/files110/1/4/3/oie_7144757ewl5ewwl-4f985fe.png"
    style="border:0px" alt="Afficher plus de liens de ce forum"></a>
      <a href="http://rencontresentreaspergers.soforums.com/t2778-Plus.htm#p10579"
    style="text-decoration:none"><font size="2" color=
    "#0F056B">Afficher plus</font></a>

    <a href=http://rencontresentreaspergers.soforums.com/admin/?rci=b5cf4aeebd149b531cf2b3c6fd0a6e63><img src="http://img.xooimage.com/files110/7/c/0/carr-.transparent-51b2305.png" border="0"></a>

    <br>

    <strong><FONT size="2" font color = "#9F00CC">Membres :</font> </strong>
     
    <a href="http://rencontresentreaspergers.soforums.com/t882-Liste-des-membres-par-d-partements.htm" title="Membres par départements français"><img src="
    http://img.xooimage.com/files110/1/5/6/oie_18161838c3470tur-4dcd5b3.png" alt="Membres par départements français" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/t882-Liste-des-membres-par-d-partements.htm" style="text-decoration:none"><font size="2"  color="#0F056B">Membres par départements français</font></a>
     
    <a href="http://rencontresentreaspergers.soforums.com/t946-Liste-des-membres-trangers-par-pays.htm#p4056" title="Membres par pays étrangers"><img src="http://img.xooimage.com/files110/b/5/d/monde-4dcd55d.png" alt="Membres par pays" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/t946-Liste-des-membres-trangers-par-pays.htm#p4056" style="text-decoration:none"><font size="2"  color="#0F056B">Membres par pays étrangers</font></a>
     
    <a href="http://rencontresentreaspergers.soforums.com/memberlist.php" title="Rechercher un membre"><img src="http://img.xooimage.com/files110/e/8/f/search_16_ns-4dcd674.png" alt="Rechercher un membre du forum" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/memberlist.php"
    style="text-decoration:none"><font size="2" color=
    "#0F056B">Rechercher un membre</font></a>
      
    <a href="http://rencontresentreaspergers.soforums.com/t2326-Comment-faire-des-rencontres-ici.htm#p9056" title="Comment faire des rencontres sur ce forum"><img src="http://img.xooimage.com/files110/8/c/e/groupes-ff-4db36e6.png" alt="rencontres entre autistes" border="0"></a>
    <a href="http://rencontresentreaspergers.soforums.com/t2326-Comment-faire-des-rencontres-ici.htm#p9056" style="text-decoration:none"><font size="2"  color="#0F056B">Comment se rencontrer ici?</font></a>

    </span></div>
        </td>
      </tr>
    </table>
    <table width="60%" cellpadding="1" cellspacing="1" border="0">
      <tr>
        <td align="left" valign="top"></td>
      </tr>
    </table>
    <!-- Fin de la bannière du menu-->


    <!-- ICI SE TROUVAIT AUPARAVANT LE TITRE ET LA DESCRIPTION EN BLANC ... -->



    <!-- ici, le 23 juin 2016 se trouvait un code bizarre http://kontaniou.clicforum.com/t216-CODE-EN-BAS-DE-overhal-header-REGREPSA-QUOI-IL-SERT.htm#p308 ... -->
    <div>


    <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == ""  -->
    <a href=http://smartseotools.org/meta-tags-analyzer>meta-tags-analyzer</a>
     
    <a href=http://rencontresentreaspergers.soforums.com/t3941-Balises-m-ta.htm#p17152>Balises Méta</a>
     
    <a href=http://rencontresentreaspergers.soforums.com/t3335-test.htm#p13245>Édit An'Coeur</a>
     
    <!-- ENDIF -->




    <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == "MOD" -->
    <a href=http://rencontresentreaspergers.soforums.com/admin/index.php?admin=1&rci=f4aea9d4db03c416a898a27566724065>Panneau d'Administration</a>
    &nbsp;
    <a href=http://rencontresentreaspergers.soforums.com/groupcp.php>Groupes</a>
    <!-- ENDIF -->

    Merci d'avance.
    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Sam 16 Déc 2017 - 6:54

    Je ne sais pas du tout comment fonctionnent les forums sur xooit mais je pense qu'il doit tout de même y avoir une page pour le CSS, je regarde ça plus en détail demain ou dimanche mais si c'est pas le cas je l'incorporerai directement au html, on perdra un peu en lisibilité mais peu importe :)

    Envoyé depuis l'appli Topic'it



    Avatar par Aredx
    avatar
    Nihil Scar Winspeare
    Messages : 5028

    le Sam 16 Déc 2017 - 9:26

    Merci pour ton aide Koray :hudada:


    Au passage, petite erreur d'inattention, en CSS les commentaires ne s'écrivent pas avec //, ça va cause des erreurs sur les lignes suivantes :'(

    Code:
    /* Commentaire en CSS */

    Remplacer comme ça :
    Code:
    /* Le conteneur de ta barre de recherche et du bouton */
    .search_bar {
      background-color: #ecab50; /* Couleur de fond du conteneur */
      width: 190px; /* Largeur du conteneur */
      padding: 1px 3px; /* Marge intérieure du conteneur */
    }

    /* La barre de recherche */
    .search_bar .post{
      background-color: #fefefe; /* Couleur de fond de la barre de recherche */
      border-radius: 5px; /* Valeur d'arrondi des angles */
      width: 150px; /* Largeur de la barre */
      height: 18px; /* Hauteur de la barre */
      margin-right: 3px; /* Espacement entre la barre et le bouton */
    }

    /* Le bouton */
    .search_bar .button {
      width: 30px; /* Largeur du bouton */
      /*        Couleur  Ton image                          L'image n'est pas dupliqué    Position */
      background: #000 url("https:/*i11.servimg.com/u/f11/17/81/42/50/loupe11.png") no-repeat center center; /* Background de ton bouton */
    }



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Sam 16 Déc 2017 - 16:03

    Effectivement, ça fait un moment que j'ai pas fait de web donc je me suis un peu emmêlé les pinceaux.
    Sinon, dans le template ils ont l'air de tout foutre directement dans les balises, ce qui est pas forcément la meilleur solution mais bon...
    Du coup ça donnerai ceci :
    Code:
        <!-- DEBUT RECHERCHER -->
          <div style="background-color: #ecab50; width: 190px; padding: 1px 3px;">
              <form action="search.php?mode=results" method="post">
                <input style="background-color: #fefefe; border-radius: 5px; width: 150px; height: 18px; margin-right: 3px;" type="text" name="search_keywords" onfocus="this.value=''" value="Recherche rapide" />
                <input style="width: 30px; background: #000 url("https://i11.servimg.com/u/f11/17/81/42/50/loupe11.png") no-repeat center center;" name="submit" type="submit" value="" />
              </form>
          </div>
        <!-- FIN RECHERCHER -->

    Voilà avec ça, ça devrait marcher :)
    Sinon si tu as une balise < head > dans ton template tu peux toujours mettre ton css dedans dans une balise de < style >, tu gagneras un peu en lisibilité :)
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Dim 17 Déc 2017 - 11:25

    Bonjour,

    Oui, j'ai un template que pour le CSS :

    Code:

    /*
      The original BlueDim Theme for phpBB version 2+
      Created by subBlue design
      http://www.subBlue.com

      NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
      theme administration centre. When you have finalised your style you could cut the final CSS code
      and place it in an external file, deleting this section to save bandwidth.
    */

    /* General page style. The scroll bar colours only visible in IE5.5+ */
    body {
            background-color: #336699;
            scrollbar-face-color: #ccd7e0;
            scrollbar-highlight-color: #FFFFFF;
            scrollbar-shadow-color: #ccd7e0;
            scrollbar-3dlight-color: #e6ecf1;
            scrollbar-arrow-color:  #336699;
            scrollbar-track-color: #e6ecf1;
            scrollbar-darkshadow-color: #98AAB1;
    }

    /* General font families for common tags */
    font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
    a:link,a:active,a:visited { color : #336699; }
    a:hover                { text-decoration: underline; color : #336699; }
    hr        { height: 0px; border: solid #e6ecf1 0px; border-top-width: 1px;}

    /* This is the border line & background colour round the entire page */
    .bodyline        { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

    /* This is the outline round the main forum tables */
    .forumline        { background-color: #FFFFFF; border: 2px #336699 solid; }

    /* Main table cell colours and backgrounds */
    td.row1        { background-color: #e6ecf1; }
    td.row2        { background-color: #ccd7e0; }
    td.row3        { background-color: #e6ecf1; }

    /*
      This is for the table cell above the Topics, Post & Last posts on the index.php page
      By default this is the fading out gradiated silver background.
      However, you could replace this with a bitmap specific for each forum
    */
    td.rowpic {
                    background-color: #d3e4f2;
                    background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif');
    }

    /* Header cells - the blue and silver gradient backgrounds */
    th        {
            color: #336699; font-size: 14px; font-weight : bold;
            background-color: #d3e4f2; height: 25px;
            background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif');
    }

    td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
                            background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif');
                            background-color:#d3e4f2; border: #FFFFFF; border-style: solid; height: 28px;
    }

    /*
      Setting additional nice inner borders for the main table cells.
      The names indicate which sides the border will be on.
      Don't worry if you don't understand this, just ignore it :-)
    */
    td.cat,td.catHead,td.catBottom,td.rowpic {
            height: 28px;
            border-width: 0px 0px 0px 0px;
    }
    th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
            font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
    }
    td.row3Right,td.spaceRow {
            background-color: #e6ecf1; border: #FFFFFF; border-style: solid;
    }

    th.thHead,td.catHead { font-size: 15px; border-width: 0px 0px 0px 0px; }
    th.thSides,td.catSides,td.spaceRow        { border-width: 0px 0px 0px 0px; }
    th.thRight,td.catRight,td.row3Right        { border-width: 0px 0px 0px 0px; }
    th.thLeft,td.catLeft          { border-width: 0px 0px 0px 0px; }
    th.thBottom,td.catBottom  { border-width: 0px 0px 0px 0px; }
    th.thTop        { border-width: 0px 0px 0px 0px; }
    th.thCornerL { border-width: 0px 0px 0px 0px; }
    th.thCornerR { border-width: 0px 0px 0px 0px; }

    /* The largest text used in the index page title and toptic title etc. */
    .maintitle        {
            font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none; line-height : 120%; color : #000000;
    }

    /* General text */
    .gen { font-size : 15px; }
    .genmed { font-size : 14px; }
    .gensmall { font-size : 13px; }
    .gen,.genmed,.gensmall { color : #000000; }
    a.gen,a.genmed,a.gensmall { color: #336699; text-decoration: none; }
    a.gen:hover,a.genmed:hover,a.gensmall:hover        { color: #336699; text-decoration: underline; }

    /* The register, login, search etc links at the top of the page */
    .mainmenu                { font-size : 14px; color : #000000 }
    a.mainmenu                { text-decoration: none; color : #336699;  }
    a.mainmenu:hover{ text-decoration: underline; color : #336699; }

    /* Forum category titles */
    .cattitle                { font-weight: bold; font-size: 15px ; letter-spacing: 1px; color : #336699}
    a.cattitle                { text-decoration: none; color : #336699; }
    a.cattitle:hover{ text-decoration: underline; }

    /* Desc menu: Text to the forums used in: header.php */
    .mainmenu                { font-size : 14px; color : #006699; font-weight: bold; }


    /* Forum title: Text and link to the forums used in: index.php */
    .forumlink                { font-weight: bold; font-size: 15px; color : #336699; }
    a.forumlink        { text-decoration: none; color : #336699; }
    a.forumlink:hover{ text-decoration: underline; color : #336699; }

    /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
    .nav                        { font-weight: bold; font-size: 15px; color : #000000;}
    a.nav                        { text-decoration: none; color : #336699; }
    a.nav:hover                { text-decoration: underline; }

    /* titles for the topics: could specify viewed link colour too */
    .topictitle,h1,h2        { font-weight: bold; font-size: 15px; color : #000000; }
    a.topictitle:link  { text-decoration: none; color : #336699; }
    a.topictitle:visited { text-decoration: none; color : #336699; }
    a.topictitle:hover        { text-decoration: underline; color : #336699; }

    /* Name of poster in viewmsg.php and viewtopic.php and other places */
    .name                        { font-size : 15px; color : #000000;}

    /* Location, number of posts, post date etc */
    .postdetails                { font-size : 13px; color : #000000; }

    /* The content of the posts (body of text) */
    .postbody { font-size : 15px; line-height: 18px}
    a.postlink:link        { text-decoration: none; color : #336699 }
    a.postlink:visited { text-decoration: none; color : #336699; }
    a.postlink:hover { text-decoration: underline; color : #336699}

    /* Quote & Code blocks */
    .code {
            font-family: Courier, 'Courier New', sans-serif; font-size: 15px; color: #006600;
            background-color: #FAFAFA; border: #e6ecf1; border-style: solid;
            border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }

    .quote {
            font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #444444; line-height: 125%;
            background-color: #FAFAFA; border: #e6ecf1; border-style: solid;
            border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }

    /* Copyright and bottom info */
    .copyright                { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
    a.copyright                { color: #444444; text-decoration: none;}
    a.copyright:hover { color: #000000; text-decoration: underline;}

    /* Form elements */
    input,textarea, select {
            color : #000000;
            font: normal 14px Verdana, Arial, Helvetica, sans-serif;
            border-color : #000000;
          border-width : 1px;
    }

    /* The text input fields background colour */
    input.post, textarea.post, select {
            background-color : #FFFFFF;
    }

    input { text-indent : 2px; }

    /* The buttons used for bbCode styling in message post */
    input.button {
            background-color : #e6ecf1;
            color : #000000;
            font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    /* The main submit button option */
    input.mainoption {
            background-color : #FAFAFA;
            font-weight : bold;
    }

    /* None-bold submit button */
    input.liteoption {
            background-color : #FAFAFA;
            font-weight : normal;
    }

    /* This is the line in the posting page which shows the rollover
      help line. This is actually a text box, but if set to be the same
      colour as the background no one will know ;)
    */
    .helpline { background-color: #ccd7e0; border-style: none; }

    .newsbutton {
       color: #000000;
       background-color: #e6ecf1;
       border: 1px solid #98AAB1;
       width: 13;
       height: 13;
       font-family: Verdana, Tahoma, Arial, Sans-Serif;
       font-size: 13pt;
       border-style: solid;
       border-width: 1px;
       cursor: hand;
    }

    /* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
    @import url('http://img.xooimage.com/files10/f/o/formie-30d7c.css');







    Bonne journée
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Dim 17 Déc 2017 - 11:31

    Bonjour,

    Oui, j'ai un template que pour le CSS :

    Code:
    /*
      The original BlueDim Theme for phpBB version 2+
      Created by subBlue design
      http://www.subBlue.com

      NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
      theme administration centre. When you have finalised your style you could cut the final CSS code
      and place it in an external file, deleting this section to save bandwidth.
    */

    /* General page style. The scroll bar colours only visible in IE5.5+ */
    body {
            background-color: #336699;
            scrollbar-face-color: #ccd7e0;
            scrollbar-highlight-color: #FFFFFF;
            scrollbar-shadow-color: #ccd7e0;
            scrollbar-3dlight-color: #e6ecf1;
            scrollbar-arrow-color:  #336699;
            scrollbar-track-color: #e6ecf1;
            scrollbar-darkshadow-color: #98AAB1;
    }

    /* General font families for common tags */
    font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
    a:link,a:active,a:visited { color : #336699; }
    a:hover                { text-decoration: underline; color : #336699; }
    hr        { height: 0px; border: solid #e6ecf1 0px; border-top-width: 1px;}

    /* This is the border line & background colour round the entire page */
    .bodyline        { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

    /* This is the outline round the main forum tables */
    .forumline        { background-color: #FFFFFF; border: 2px #336699 solid; }

    /* Main table cell colours and backgrounds */
    td.row1        { background-color: #e6ecf1; }
    td.row2        { background-color: #ccd7e0; }
    td.row3        { background-color: #e6ecf1; }

    /*
      This is for the table cell above the Topics, Post & Last posts on the index.php page
      By default this is the fading out gradiated silver background.
      However, you could replace this with a bitmap specific for each forum
    */
    td.rowpic {
                    background-color: #d3e4f2;
                    background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif');
    }

    /* Header cells - the blue and silver gradient backgrounds */
    th        {
            color: #336699; font-size: 14px; font-weight : bold;
            background-color: #d3e4f2; height: 25px;
            background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif');
    }

    td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
                            background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif');
                            background-color:#d3e4f2; border: #FFFFFF; border-style: solid; height: 28px;
    }

    /*
      Setting additional nice inner borders for the main table cells.
      The names indicate which sides the border will be on.
      Don't worry if you don't understand this, just ignore it :-)
    */
    td.cat,td.catHead,td.catBottom,td.rowpic {
            height: 28px;
            border-width: 0px 0px 0px 0px;
    }
    th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
            font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
    }
    td.row3Right,td.spaceRow {
            background-color: #e6ecf1; border: #FFFFFF; border-style: solid;
    }

    th.thHead,td.catHead { font-size: 15px; border-width: 0px 0px 0px 0px; }
    th.thSides,td.catSides,td.spaceRow        { border-width: 0px 0px 0px 0px; }
    th.thRight,td.catRight,td.row3Right        { border-width: 0px 0px 0px 0px; }
    th.thLeft,td.catLeft          { border-width: 0px 0px 0px 0px; }
    th.thBottom,td.catBottom  { border-width: 0px 0px 0px 0px; }
    th.thTop        { border-width: 0px 0px 0px 0px; }
    th.thCornerL { border-width: 0px 0px 0px 0px; }
    th.thCornerR { border-width: 0px 0px 0px 0px; }

    /* The largest text used in the index page title and toptic title etc. */
    .maintitle        {
            font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none; line-height : 120%; color : #000000;
    }

    /* General text */
    .gen { font-size : 15px; }
    .genmed { font-size : 14px; }
    .gensmall { font-size : 13px; }
    .gen,.genmed,.gensmall { color : #000000; }
    a.gen,a.genmed,a.gensmall { color: #336699; text-decoration: none; }
    a.gen:hover,a.genmed:hover,a.gensmall:hover        { color: #336699; text-decoration: underline; }

    /* The register, login, search etc links at the top of the page */
    .mainmenu                { font-size : 14px; color : #000000 }
    a.mainmenu                { text-decoration: none; color : #336699;  }
    a.mainmenu:hover{ text-decoration: underline; color : #336699; }

    /* Forum category titles */
    .cattitle                { font-weight: bold; font-size: 15px ; letter-spacing: 1px; color : #336699}
    a.cattitle                { text-decoration: none; color : #336699; }
    a.cattitle:hover{ text-decoration: underline; }

    /* Desc menu: Text to the forums used in: header.php */
    .mainmenu                { font-size : 14px; color : #006699; font-weight: bold; }


    /* Forum title: Text and link to the forums used in: index.php */
    .forumlink                { font-weight: bold; font-size: 15px; color : #336699; }
    a.forumlink        { text-decoration: none; color : #336699; }
    a.forumlink:hover{ text-decoration: underline; color : #336699; }

    /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
    .nav                        { font-weight: bold; font-size: 15px; color : #000000;}
    a.nav                        { text-decoration: none; color : #336699; }
    a.nav:hover                { text-decoration: underline; }

    /* titles for the topics: could specify viewed link colour too */
    .topictitle,h1,h2        { font-weight: bold; font-size: 15px; color : #000000; }
    a.topictitle:link  { text-decoration: none; color : #336699; }
    a.topictitle:visited { text-decoration: none; color : #336699; }
    a.topictitle:hover        { text-decoration: underline; color : #336699; }

    /* Name of poster in viewmsg.php and viewtopic.php and other places */
    .name                        { font-size : 15px; color : #000000;}

    /* Location, number of posts, post date etc */
    .postdetails                { font-size : 13px; color : #000000; }

    /* The content of the posts (body of text) */
    .postbody { font-size : 15px; line-height: 18px}
    a.postlink:link        { text-decoration: none; color : #336699 }
    a.postlink:visited { text-decoration: none; color : #336699; }
    a.postlink:hover { text-decoration: underline; color : #336699}

    /* Quote & Code blocks */
    .code {
            font-family: Courier, 'Courier New', sans-serif; font-size: 15px; color: #006600;
            background-color: #FAFAFA; border: #e6ecf1; border-style: solid;
            border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }

    .quote {
            font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #444444; line-height: 125%;
            background-color: #FAFAFA; border: #e6ecf1; border-style: solid;
            border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }

    /* Copyright and bottom info */
    .copyright                { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
    a.copyright                { color: #444444; text-decoration: none;}
    a.copyright:hover { color: #000000; text-decoration: underline;}

    /* Form elements */
    input,textarea, select {
            color : #000000;
            font: normal 14px Verdana, Arial, Helvetica, sans-serif;
            border-color : #000000;
          border-width : 1px;
    }

    /* The text input fields background colour */
    input.post, textarea.post, select {
            background-color : #FFFFFF;
    }

    input { text-indent : 2px; }

    /* The buttons used for bbCode styling in message post */
    input.button {
            background-color : #e6ecf1;
            color : #000000;
            font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    /* The main submit button option */
    input.mainoption {
            background-color : #FAFAFA;
            font-weight : bold;
    }

    /* None-bold submit button */
    input.liteoption {
            background-color : #FAFAFA;
            font-weight : normal;
    }

    /* This is the line in the posting page which shows the rollover
      help line. This is actually a text box, but if set to be the same
      colour as the background no one will know ;)
    */
    .helpline { background-color: #ccd7e0; border-style: none; }

    .newsbutton {
       color: #000000;
       background-color: #e6ecf1;
       border: 1px solid #98AAB1;
       width: 13;
       height: 13;
       font-family: Verdana, Tahoma, Arial, Sans-Serif;
       font-size: 13pt;
       border-style: solid;
       border-width: 1px;
       cursor: hand;
    }

    /* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
    @import url('http://img.xooimage.com/files10/f/o/formie-30d7c.css');





    Bonne journée
    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Dim 17 Déc 2017 - 15:52

    Je poste juste un message à la suite car je vois pas ta réponse, ce qui est étrange, de plus, mon message précédent est coupé.
    avatar
    Nihil Scar Winspeare
    Messages : 5028

    le Dim 17 Déc 2017 - 17:14

    Hello,

    Juste pour prévenir j'ai édité ce message pour mettre des espaces dans < head > et < style >.

    En effet, sinon c'est comme si tu ouvrais les balises HTML en plein milieu de ton message et ça causait un bug html qui faisait qu'on ne pouvait plus voir les messages, ça devrait être réglé maintenant :)



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Dim 17 Déc 2017 - 17:23

    C'est vrai que j'avais pas pensé à ça :)
    Donc normalement tu devrais pouvoir mettre le css dans ton template dédié histoire que ce soit un peu plus lisible :)
    Du coup on est bon pour ta barre de recherche ?



    Avatar par Aredx
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Dim 17 Déc 2017 - 19:32

    @Koray Allister a écrit:
    Du coup on est bon pour ta barre de recherche ?

    Bonsoir,

    Oui, si vous voulez.
    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Dim 17 Déc 2017 - 20:42

    @Koray Allister a écrit:Du coup on est bon pour ta barre de recherche ?

    En disant ça je sous-entendait : "Est-ce que tu as encore besoin de mon aide ou tu as réussis à l'installer et le résultat te convient ?"
    S'il y a des modifications à faire n'hésite pas à me le dire :)
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Mer 27 Déc 2017 - 1:19

    Bonjour,

    Merci pour l’explication Wink . Le résultat me convient sauf s'il y a des erreurs de codes :
    Code:
    <!-- Début barre de recherche -->
    <div style="width: 110px; padding-top: 1px; padding-bottom: 2px; border: 0px solid #66AB6B; text-align: left; background: #66AB6B;border-radius: 0px;">

    <title>Barre de Recherche</title>
    <div class="barre">
              <form method="post" action="search.php?mode=results">
              <input type="text" value=" Rechercher" size="8" onfocus="this.value=''" name="search_keywords" class="post" /> <input type="image" src="https://i62.servimg.com/u/f62/17/26/27/57/loupe111.png" onclick="submit()" name="submit" title="Valider la recherche" />
      </form>
    </div>

    </div>
    <!-- Fin barre de recherche -->

    Cordialement,

    avatar
    Koray Allister
    MasculinAge : 23Messages : 71

    le Mer 27 Déc 2017 - 14:08

    Je n'ai, personnellement, aucune erreur avec ce code, peux-tu me préciser ce qui ne va pas (via un screen ou quelque chose comme ça) ?



    Avatar par Aredx
    avatar
    Kilou1984
    FémininAge : 33Messages : 21

    le Mer 3 Jan 2018 - 3:37

    Bonsoir,
    Je voulais dire que le code que j'ai mis sur le forum me convient au niveau de l'affichage. J'avais juste peur qu'il y ai des erreurs avec ce code, donc, s'il n'y a pas d’erreurs, c'est parfait.

    Ce sujet est résolu, merci beaucoup à vous tous pour votre aide et votre patience :ange:
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 9:33