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.

Le Deal du moment : -67%
Carte Fnac+ à 4,99€ au lieu de 14,99€ ...
Voir le deal
4.99 €

    Catégories en dégradé de vert

    Sauney
    Sauney
    FémininAge : 29Messages : 435

    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 :
    Catégories en dégradé de vert - Page 2 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 - Page 2 Signne10
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Ven 8 Mai 2015 - 0:26

    Mereci pour la suite.
    TiGraou
    TiGraou
    MasculinAge : 31Messages : 243

    Dim 28 Juin 2015 - 5:34

    Merci
    Shaknoss
    Shaknoss
    MasculinAge : 34Messages : 90

    Lun 7 Sep 2015 - 16:23

    Merci ^^
    Anonymous
    Invité

    Lun 7 Sep 2015 - 17:50

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

    Mar 8 Sep 2015 - 0:11

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

    Mar 13 Oct 2015 - 22:21

    merci



    Catégories en dégradé de vert - Page 2 1351184429-smile
    pawnee
    pawnee
    FémininAge : 35Messages : 21

    Mer 14 Oct 2015 - 13:54

    merci pour ton codage!
    Raymanou
    Raymanou
    MasculinAge : 32Messages : 49

    Jeu 15 Oct 2015 - 18:32

    merci beaucoup
    Pikabouh
    Pikabouh
    FémininAge : 23Messages : 123

    Jeu 22 Oct 2015 - 14:48

    Thanks Wink
    luna-chan86
    luna-chan86
    FémininAge : 35Messages : 201

    Sam 26 Déc 2015 - 18:53

    Merci :)



    roar scream
    roar scream
    FémininAge : 29Messages : 18

    Sam 26 Déc 2015 - 23:30

    Merci beaucoup !
    lacoste
    lacoste
    MasculinAge : 30Messages : 30

    Dim 17 Jan 2016 - 7:56

    merci
    meolyne
    meolyne
    FémininAge : 40Messages : 74

    Dim 24 Jan 2016 - 19:47

    Merci du partage
    Chhaya
    Chhaya
    FémininAge : 39Messages : 1213

    Dim 7 Fév 2016 - 17:21

    Merci du partage ♥



    Catégories en dégradé de vert - Page 2 200412081714641513

      Merci Sparrow :3
    Shizuyae
    Shizuyae
    FémininAge : 25Messages : 57

    Sam 13 Fév 2016 - 22:52

    merci
    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Dim 14 Fév 2016 - 14:26

    Merci !
    Kilda
    Kilda
    FémininAge : 44Messages : 73

    Ven 19 Fév 2016 - 20:50

    merci
    Dorin
    Dorin
    FémininAge : 49Messages : 33

    Sam 28 Mai 2016 - 9:24

    Merci!
    Thessia
    Thessia
    FémininAge : 35Messages : 78

    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.
    Aubenaissante
    Aubenaissante
    MasculinAge : 38Messages : 15

    Lun 8 Aoû 2016 - 3:44

    up ! tres beau
    Anonymous
    Invité

    Mer 17 Aoû 2016 - 20:05

    Merci !!
    Anonymous
    Invité

    Mer 17 Aoû 2016 - 22:54

    MERCI:)
    Anonymous
    Invité

    Ven 20 Jan 2017 - 19:27

    merci c est beau
    marie-noelle
    marie-noelle
    FémininAge : 67Messages : 112

    Ven 17 Fév 2017 - 1:14

    merci Very Happy
    Donquichotte
    Donquichotte
    MasculinAge : 28Messages : 48

    Ven 17 Fév 2017 - 3:08

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:30