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.


    Catégories en dégradé de vert

    Partagez
    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 10 Oct 2014 - 1:30

    Rappel du premier message :



    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 :

    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.



    Hop80
    MasculinAge : 28Messages : 138

    le Ven 8 Mai 2015 - 0:26

    Mereci pour la suite.
    avatar
    TiGraou
    MasculinAge : 25Messages : 238

    le Dim 28 Juin 2015 - 5:34

    Merci
    avatar
    Shaknoss
    MasculinAge : 27Messages : 90

    le Lun 7 Sep 2015 - 16:23

    Merci ^^
    avatar
    Kelalin
    FémininAge : 25Messages : 1890

    le Lun 7 Sep 2015 - 17:50

    Merci beaucoup pour le partage ! \(>o<)ノ
    avatar
    Whit
    FémininAge : 20Messages : 154

    le Mar 8 Sep 2015 - 0:11

    Merci du partage ! =3
    avatar
    .SaKou.
    FémininAge : 22Messages : 57

    le Mar 13 Oct 2015 - 22:21

    merci



    avatar
    pawnee
    FémininAge : 28Messages : 21

    le Mer 14 Oct 2015 - 13:54

    merci pour ton codage!
    avatar
    Raymanou
    MasculinAge : 25Messages : 49

    le Jeu 15 Oct 2015 - 18:32

    merci beaucoup
    avatar
    Pikabouh
    FémininAge : 16Messages : 123

    le Jeu 22 Oct 2015 - 14:48

    Thanks Wink
    avatar
    luna-chan86
    FémininAge : 29Messages : 193

    le Sam 26 Déc 2015 - 18:53

    Merci :)
    avatar
    roar scream
    FémininAge : 23Messages : 18

    le Sam 26 Déc 2015 - 23:30

    Merci beaucoup !
    avatar
    lacoste
    MasculinAge : 24Messages : 30

    le Dim 17 Jan 2016 - 7:56

    merci
    avatar
    meolyne
    FémininAge : 34Messages : 70

    le Dim 24 Jan 2016 - 19:47

    Merci du partage
    avatar
    Sukinette
    FémininAge : 33Messages : 1191

    le Dim 7 Fév 2016 - 17:21

    Merci du partage ♥



      Merci pour les avatars Clémentine & Narakye ♥♥
    avatar
    Shizuyae
    FémininAge : 19Messages : 57

    le Sam 13 Fév 2016 - 22:52

    merci
    avatar
    Flaura
    FémininAge : 15Messages : 152

    le Dim 14 Fév 2016 - 14:26

    Merci !
    avatar
    Kilda
    FémininAge : 37Messages : 73

    le Ven 19 Fév 2016 - 20:50

    merci
    avatar
    Dorin
    FémininAge : 43Messages : 28

    le Sam 28 Mai 2016 - 9:24

    Merci!
    avatar
    Thessia
    FémininAge : 29Messages : 74

    le Mar 2 Aoû 2016 - 22:04

    Merci



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    Aubenaissante
    MasculinAge : 32Messages : 15

    le Lun 8 Aoû 2016 - 3:44

    up ! tres beau
    avatar
    Invité

    le Mer 17 Aoû 2016 - 20:05

    Merci !!
    avatar
    Invité

    le Mer 17 Aoû 2016 - 22:54

    MERCI:)
    avatar
    Invité

    le Ven 20 Jan 2017 - 19:27

    merci c est beau
    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Ven 17 Fév 2017 - 1:14

    merci Very Happy
    avatar
    Donquichotte
    MasculinAge : 22Messages : 48

    le Ven 17 Fév 2017 - 3:08

    merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Juin 2018 - 6:00