AccueilRechercherS'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.


    Catégories en dégradé de vert

    Sauney
    Sauney
    FémininAge : 25Messages : 435

    Ven 10 Oct 2014 - 1:30



    Voilà, je reviens avec deux LS que je devais poster depuis longtemps ! Ces catégories vont avec la PA en dégradé de vert et ce QEEL.

    Codage par Sauney, basée sur une idée de Ryuu


    Alors, un exemple pour se mettre dans le bain :
    Catégories en dégradé de vert Catego10

    Alors pour commencer allez dans "Panneau d'administration" > "Affichage" > "Templates" > "Général" > "index_box"

    Remplacez votre code de base par celui-ci :
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
       <tr>
          <td valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall">{LAST_VISIT_DATE}<br />
             {CURRENT_TIME}<br />
             </span>
             <!-- END switch_user_logged_in -->
             <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="categorie" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <td width="100%" class="titre_categorie">{catrow.tablehead.L_FORUM}</td>
          </tr>   
    <!-- END tablehead -->

       <!-- BEGIN forumrow -->
       <tr class="section">
          <!-- BEGIN inc -->
          <!-- END inc -->
       <td class="centre_infos" align="center" valign="middle" height="50">
              <div class="statistiques_section">{catrow.forumrow.TOPICS} topics, {catrow.forumrow.POSTS} messages</div>
         <div class="dernier_message">{catrow.forumrow.LAST_POST}</div>
            </td>   
                        <td class="icones_message" align="center" valign="middle">
             <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td class="description_section" align="center" valign="middle" width="100%" height="50">
             <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
             </h{catrow.forumrow.LEVEL}>
                      <div class="description">{catrow.forumrow.FORUM_DESC}
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                      <div class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                      <div class="ouverture">Voir les sous-forums</div></div></td>
       </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
          <!-- BEGIN inc -->
          <!-- END inc -->
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    <tr><td align="center"><span style="font-size: 10px;">Sauney (<a href="http://www.never-utopia.com/">Never Utopia</a>)</span></td></tr></table><!-- END tablefoot --><!-- END catrow -->
    Enregistrez et n'oubliez pas de publier !

    Et pour le CSS rendez-vous dans "Panneau d'administration" > "Affichage" > "Images et couleurs" > "Couleurs" > "Feuille de style CSS" et ajoutez :
    Code:
    /* CATEGORIES*/
    .categorie{
    border-top: 10px solid #fff;
    width: 910px;
    margin: 20px auto;
    background-color: transparent;
    }
    .titre_categorie, .titre_categorie h2{
    margin-top: -40px;
    margin-bottom: -30px;
    font-family: 'Georgia';
    font-size: 25px;
    text-align: center;
    color: #398235;
    }
    .section{
    margin: 0px auto;
    width: 910px;
    height: 130px;
    }
    .centre_infos{
    position: relative;
    float: left;
    width: 150px;
    margin: 25px auto auto 10px;
    text-align: center;
    color: #fff;
    }
    .statistiques_section{
    background: linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 10px 0px 10px 0px;
    padding: 5px;
    color: #fff;
    font-size: 9px;
    }
    .dernier_message{
    margin-top: 5px;
    background: linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 0px 10px 0px 10px;
    font-size: 11px;
    color: #fff;
    padding: 10px 5px 10px 5px;
    }
    .icones_message{
    position: relative;
    float: left;
    margin: 20px 10px auto 10px;
    width: 100px;
    height: 100px;
    }
    .description_section{
    position: relative;
    float: left;
    margin-top: 0px;
    width: 580px;
    height: 130px;
    }
    .forumlink, a.forumlink, a.forumlink:link, a.forumlink:visited, a.forumlink:active {
    font-family: 'Georgia';
    font-size: 28px;
    text-decoration: none;
    color : #fff;
    text-shadow: 0px 0px 2px #121212;
    }
    a.forumlink:hover{
    text-decoration: none !important;
    color : #398235;
    text-shadow: 1px 1px 1px #000;
    transition: 350ms color linear, 350ms text-shadow linear;
    }
    .description{
    z-index: 9;
    position: relative;
    margin-top: -2px;
    width: 600px;
    height: 80px;
    border-width: 2px 4px 2px 4px;
    border-color: #fff;
    border-style: solid;
    border-radius: 0px 10px 0px 10px;
    background: linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    font-size: 11px;
    color: #fff;
    text-align: justify;
    padding: 5px;
    }
    /* Code la div des sous-forums */
    .sous_forums{
    z-index: 11;
    position: absolute;
    top: 65px;
    left: 0px;
    right: 0px;
    height: 15px;
    padding: 5px;
    background-color: rgba(33,76,31, 0.8);
    opacity: 0;
    filter: alpha(opacity=0);
    border-radius: 0px 0px 0px 10px;
    text-align: justify;
    color: #fff;
    font-size: 11.5px;
    overflow-y: auto;
    }
    .sous_forums:hover{
    transition: 250ms opacity linear;
    opacity: 1;
    filter: alpha(opacity=100);
    }
    .ouverture{
    z-index: 10;
    position: absolute;
    top: 68px;
    left: 220px;
    width: 150px;
    background-color: #fff;
    padding: 5px;
    border-radius: 10px 10px 0px 0px;
    color: #121212;
    font-size: 11px;
    text-align: center;
    }
    /* FIN CATEGORIES */
    Enregistrez et voilà Very Happy

    P.S. : C'est un forum de test donc la couleur de la police, des liens autres que ceux des forums se modifiera pour adopter celle que vous avez mise en place Wink

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    Catégories en dégradé de vert Signne10
    Anonymous
    Invité

    Dim 12 Oct 2014 - 13:36

    Merci du partage Wink
    Kau
    Kau
    FémininAge : 19Messages : 148

    Lun 13 Oct 2014 - 16:40

    Wow, elles sont trop chouettes, merci beaucoup !
    Clémentine
    Clémentine
    FémininAge : 29Messages : 223

    Mar 14 Oct 2014 - 9:45

    Génial!! Merci ^^



    Catégories en dégradé de vert 9w9t
    -Larme-
    -Larme-
    FémininAge : 20Messages : 63

    Mar 14 Oct 2014 - 20:03

    Très joli merci *-*



    Catégories en dégradé de vert 226604Larme20
    Allison01
    Allison01
    FémininAge : 37Messages : 225

    Mer 15 Oct 2014 - 10:46

    Pas mal du tout
    Tatia38
    Tatia38
    FémininAge : 32Messages : 310

    Mer 15 Oct 2014 - 21:25

    Merci beaucoup
    Féhéla
    Féhéla
    FémininAge : 47Messages : 238

    Mar 21 Oct 2014 - 19:07

    merci
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 21Messages : 304

    Sam 25 Oct 2014 - 14:16

    Superbes, merci :)



    Just want to be yours.
    Nîniel
    Nîniel
    FémininAge : 26Messages : 70

    Sam 25 Oct 2014 - 20:03

    Merci beaucoup pour ce beau code



    Catégories en dégradé de vert 1384099300-nini-nu-signa
    Lutine
    Lutine
    FémininAge : 33Messages : 102

    Dim 26 Oct 2014 - 15:55

    Merci!
    Angy38
    Angy38
    FémininAge : 51Messages : 233

    Sam 1 Nov 2014 - 10:18

    Merci



    Catégories en dégradé de vert Jvie
    Eshon
    Eshon
    FémininAge : 40Messages : 196

    Dim 2 Nov 2014 - 17:04

    Merci ! ^^
    Idril Palanén
    Idril Palanén
    FémininAge : 29Messages : 83

    Dim 2 Nov 2014 - 18:05

    Oh ! Merci beaucoup pour ce code ! Je le trouve juste génial ! Je vais peut-être l'utiliser, qui sait... :)
    Lessien
    Lessien
    FémininAge : 39Messages : 163

    Lun 3 Nov 2014 - 23:10

    Le rendu est très sympa ! Merci !
    avatar
    Claclou02
    FémininAge : 23Messages : 46

    Sam 8 Nov 2014 - 11:47

    Merciii
    avatar
    Claclou02
    FémininAge : 23Messages : 46

    Sam 8 Nov 2014 - 11:47

    Merciii
    Emelyne
    Emelyne
    FémininAge : 39Messages : 77

    Sam 8 Nov 2014 - 23:34

    merci ♥
    Cruelly
    Cruelly
    FémininAge : 28Messages : 2605

    Lun 10 Nov 2014 - 1:43

    magnifique merci :)



    :heart: :heart:
    Fame
    Fame
    MasculinAge : 31Messages : 240

    Mer 7 Jan 2015 - 20:37

    C'est jolie, merci Very Happy
    avatar
    Daryel
    FémininAge : 34Messages : 358

    Sam 17 Jan 2015 - 19:06

    Merci à toi :)
    patriciadpt30
    patriciadpt30
    FémininAge : 58Messages : 240

    Mar 27 Jan 2015 - 21:55

    merci



    Patricia :)
    Solitude
    Solitude
    FémininAge : 46Messages : 292

    Jeu 5 Mar 2015 - 18:37

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Catégories en dégradé de vert Sign510
    Err0r
    Err0r
    FémininAge : 27Messages : 134

    Dim 8 Mar 2015 - 15:36

    sympa :x



    Catégories en dégradé de vert 150519095409324327
    ATHENA.
    ATHENA.
    FémininAge : 24Messages : 31

    Mar 14 Avr 2015 - 14:36

    Pile ce que je cherchais merci !!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 18:40