AccueilDernières imagesRechercherS'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.

-36%
Le deal à ne pas rater :
Aspirateur balai sans fil Dyson V8 Origin
254.99 € 399.01 €
Voir le deal

    QEEL personnalisé

    Ravener
    Ravener
    FémininAge : 33Messages : 193

    Mar 29 Nov 2011 - 0:21

    Commande
    Elément à coder : Qui est en Ligne
    Adresse du forum : http://redemption.probb.fr/
    Description du résultat voulu : Vous avez une image ici
    Spoiler:
    En gros : une image en fond + un truc à onglets
    Couleurs ou tons : Le texte serait de la même couleur que celui du forum
    Si c'est vraiment essenciel, ce serait ceci
    texte #5E3C5E
    liens #E2CAEB
    liens au survol #FFFFFF
    Couleurs du cadre #511838 et #000000
    Images :
    Voilà le fond
    https://2img.net/r/ihimizer/img694/9044/qeelfondd.png
    Autres précisions : Bonjour Bonjour ! Eh oui, encore avec une commande '__' Autrement, j'ai pas vraiment d'autres précisions à donner, je crois que c'est assez clair. Pour les onglets, faites comme vous sentez, pas obligé que le côté soit rond. Le but c'est vraiment que l'image se fond avec le reste du forum, donc faudrait retirer le fameux cadre

    N'hésitez pas à me poser des questions si vous en avez !!


    Dernière édition par Ravener le Dim 4 Déc 2011 - 2:02, édité 1 fois



    QEEL personnalisé Ravenersign
    Marie
    Marie
    FémininAge : 35Messages : 2206

    Mer 30 Nov 2011 - 4:49

    Coucou!

    J'ai tester! Bon, j'ai fait le plus gros du boulot sauf que l'onglet ne veut pas rentrer dans son carrée...

    Voici le html:

    Code:
    <!-- BEGIN disable_viewonline -->
                    <table width="870" height="245" border="0" cellspacing="1" cellpadding="0" style="background-image:url(http://img694.imageshack.us/img694/9044/qeelfondd.png);background-repeat: no-repeat;">
                      <tr>
                         
                            <td colspan="2" height="28">
                  <table align="right"><td rowspan="3" valign="middle">
                    <tr><td></td><td></td>
                    <td><div id="accueil1"><div id="accueil2"><div id="accueil3">
    <br /><br /><br /><br /><br /><br />
    <span class="ongl1"><a href="#accueil1">Qui est en ligne?</a></span>
    <span class="ongl2"><a href="#accueil2">Les Groupes</a></span>
    <span class="ongl3"><a href="#accueil3">Autres</a></span>
                           
    <div id="content1"><div id="content2"><div class="info_accueil"><span class="gensmall">{LEGEND} :&nbsp;{GROUP_LEGEND}</span></div></div>
    <div id="content3"><div class="info_accueil"><span class="gensmall">
          {RECORD_USERS}<br />
      {TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
      {NEWEST_USER}</span></div></div>
    <div class="info_accueil"><span class="gensmall">{LOGGED_IN_USER_LIST}<br />{TOTAL_USERS_ONLINE}</span></div></div></div></div></div>
                      <span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span></td></tr></td></table>

                           
                           
                      <!-- BEGIN switch_chatbox_activate -->
                            <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                                <!-- BEGIN switch_chatbox_popup -->
                                <div id="chatbox_popup"></div>
                                <script type="text/javascript">
                                //<![CDATA[
                           
                 
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                                //]]>
                                </script>
                                <!-- END switch_chatbox_popup --><br />
                            </span>
                          <tr>
                         
                      </tr>
                      <!-- END switch_chatbox_activate -->
                    </table>
                    <!-- END disable_viewonline -->

    Le CSS:

    Code:
    /*onglet*/

    .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 100px;
    height: 30px;
    margin-left: 20px;
    background-color: #000000;
    border-top: 3px solid #511838;
    border-left: 3px solid #511838;
    border-right: 3px solid #511838;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #d3dce9;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #8b9cb8 !important;
    text-shadow: 1px 1px 0px #eef1f6;
    font-size: 18px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;
    text-shadow: 1px 1px 0px #23334c;
    }
    #content1
    {
    display: block;
    height: 265px;
    width: 407px; 
    overflow: hidden;
    background: #000000;
    border: 3px solid #511838;
    font-size: 11px;
    color: #3c506f;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 265px;
    width: 407px;
    overflow: hidden;
    border: 1px solid #511838;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil2:target #content2
    {
    display: block;
    height: 265px;
    width: 407px;
    overflow: hidden;
    background: #000000;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil3:target #content3
    {
    display: block;
    height: 407px;
    width: 265px;
    overflow: hidden;
    background: #000000;
    font-size: 11px;
    color: #3c506f;
    }


    .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }
    {
    padding: 10px;
    text-align: justify;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }

    Tout a été ajuster sauf que le biiiip de onglet de biiiiiiiiip ne veut pas rentrer dans son trou... Merci si quelqy'un peut prendre la relève....

    Désolée de ne pas faire plus Ravener... =/



    /

    Kit fait par Arpège. Merci! :love:
    Ravener
    Ravener
    FémininAge : 33Messages : 193

    Mer 30 Nov 2011 - 4:56

    C'est pas grave Marie, c'est déjà énorme !!
    Grand merci à toi, en espérant que quelqu'un d'autre pourra aider à placer tout ça =D !

    EDIT : Bon alors j'ai réussi à tout placer et personnaliser moi-même ( j'en suis d'ailleurs très surprise, je vois que mon passé de créatrice de site en layout n'a pas été entièrement perdu ). Néanmoins, l'image de fond du QEEL est un peu coupé sur la droite et je n'arrive pas à faire en sorte qu'on le voit. Bon d'accord c'est pas un bout ÉNORME mais j'aimerais quand même être capable de l'afficher sans avoir à modifier la boîte à onglets.

    Également, on arrive pas à faire tenir les informations d'anniversaire dans le cadre, il va automatiquement se placer sous le cadre même de l'image ! Il y aurait moyen de le faire tenir dans le premier onglet ?

    EDIT 2 : Finalement ça va 8D ! Commande à clôturer !



    QEEL personnalisé Ravenersign
    Taktiik
    Taktiik
    MasculinAge : 30Messages : 2292

    Dim 4 Déc 2011 - 14:08

    Le bouton Résolu est coché, je déplace dans les archives !

    Merci d'avoir passé commande sur Never Utopia.
    Merci donc de créditer, si c'est le cas, Never Utopia pour le service qu'il t'a rendu.

    Cordialement~~
    Taktiik.

    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 2:25