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 :
Cartes Pokémon EV8.5 : coffret dresseur ...
Voir le deal

    [Template & CSS] Catégories Lumineuses

    Taktiik
    Taktiik
    MasculinAge : 30Messages : 2292

    Sam 10 Mar 2012 - 15:50

    Rappel du premier message :



    Catégories Lumineuses Dernière mise à jour : 06 Avril 2013
    Aperçu
    Préparation
    Détails


    W W W

    Afin d'avoir un affichage optimisé et exactement sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration.

    ? Affichage>Structure et Hiérarchie :
    • Séparer les catégories sur l'index (Deuxième ligne) : Moyen
    • Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
    • Lien vers les niveaux inférieurs : Oui ou Avec une image
    • Afficher les modérateurs d'un forum : Non

    Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

    Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


    Niveau : Facile
    Fait : 10/03/2012
    Type : Tutoriel


    V
    oici une astuce dans laquelle je vous apprend à embellir vos catégories (ou pas ;D)
    Dans les nombreuses commandes que j'ai réalisé jusqu'ici, la plupart sont des catégories.
    Et pas pour rien ! En effet, elles sont un élément presque décisif pour le forum et son esthétique, c'est elles qui mettront l'ordre ou non sur votre plateforme.
    RP, discussions, sondages, c'est comme vous voulez, cette astuce est valable et modifiable pour tous les forums !
    Tout d'abord, je tiens à vous dire que cette astuce lie deux de mes tutos :
    Des sous-forums en retour à la ligne
    Et
    Un corps Catégories. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Navigation




    La Partie Template


    Voilà la partie Template, je n'ai mis aucun commentaire puisqu'il n'y a rien de vraiment dur.
    Copiez-collez le code ci-dessous et passez à la partie CSS Wink

    Code:

       <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
       <div class="titre_cate">{catrow.tablehead.L_FORUM}</div>
       <!-- END tablehead -->
       
       <!-- BEGIN forumrow -->
       <div class="forum">
    <table width="100%" cellpadding="1" cellspacing="1" border="0">
       <tr>
          <td align="center" valign="middle">
       <img class="icon" src="{catrow.forumrow.FORUM_FOLDER_IMG}" />

       <a class="titre_forum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

       <div class="description genmed">
       {catrow.forumrow.FORUM_DESC}
       </div>
                     
       <div class="ssforum gensmall" id="subforums">
       {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
       </div>
          </td>
          
          <td align="center" valign="middle">
       <div class="lastpost gensmall">
            {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets <br /> <br />
       {catrow.forumrow.LAST_POST}
       </div>
          </td>
       </tr>
    </table>
       </div>
       <!-- END forumrow -->
       
       <!-- BEGIN tablefoot -->
       <!-- END tablefoot -->
       <script type="text/javascript">
       jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
       </script>
       <!-- END catrow -->


    La Partie CSS


    Cette partie sera la plus commentée, en effet, elle inclus beaucoup de propriétés que vous ne connaissez pas forcément.
    Ainsi, j'ai parsemé le code CSS de plusieurs commentaires qui vous aideront.

    Code:
                /* Debut des CATEGORIES */
    /*Gère le squelette du titre catégorie*/
    .titre_cate
    {
      text-align: center;
      text-shadow: 1px 1px 1px black;
    }
     /*Gère l'aspect esthétique du titre catégorie*/
    .titre_cate h2
    {
      font-size: 25px;
      color: #cccccc;
    }

     /*Le forum en lui même, le fond, la bordure, l'ombre etc..*/
    .forum
    {
      background-color: #dfdfdf;
      border: 2px solid #ffffff;
      width: 853px;
      height: 150px;
      margin: auto;
      margin-top: 5px;
      margin-bottom: 5px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      border-radius: 25px;
      -moz-box-shadow: 1px 1px 10px #dfdfdf;
      -webkit-box-shadow: 1px 1px 10px #dfdfdf;
      box-shadow: 1px 1px 10px #dfdfdf;
    }
     /*Image no new, attention, elle doit faire 150*150 pour un affichage optimisé*/
    .icon
    {
      float: left;
    }

    a.titre_forum
    {
      display: block; /*Passe le titre du forum de simple élément en ligne à un block*/
      color: #cccccc;
      letter-spacing: 1px; /*Laisse un espace de 1px entre chaque lettre*/
      font-size: 15px;
      text-shadow: 1px 1px 1px black;
      text-decoration: none!important;
    }

    .description
    {
      overflow: auto;
      float: left;
      background-color: #cccccc;
      border: 1px solid #ffffff;
      border-right: 0px;
      height: 107px;
      width: 500px;
      padding: 5px;
      -moz-border-radius: 25px 0 0 25px;
      -webkit-border-radius: 25px 0 0 25px;
      border-radius: 25px 0 0 25px;
    /*Arrondis sur la plupart des navigateurs*/
      -moz-box-shadow: inset 1px 1px 10px #dfdfdf;
      -webkit-box-shadow: inset 1px 1px 10px #dfdfdf;
      box-shadow: inset 1px 1px 10px #dfdfdf;
    /*Ombre sur la plupart des navigateurs*/
    }

    .ssforum
    {
      float: right;
    /*Fait flotter sur la droite les sous-forums sur la droite de la description*/
      background-color: #cccccc;
      border: 1px solid #ffffff;
      height: 120px;
      width: 120px;
      overflow: auto;
      -moz-border-radius: 0 25px 25px 0;
      -webkit-border-radius: 0 25px 25px 0;
      border-radius: 0 25px 25px 0;
      -moz-box-shadow: inset 1px 1px 10px #dfdfdf;
      -webkit-box-shadow: inset 1px 1px 10px #dfdfdf;
      box-shadow: inset 1px 1px 10px #dfdfdf;
    }
                /* Fin des CATEGORIES */


    Voila ! Very Happy
    J'espère que cette astuce vous dépannera et vous plaira.
    Si vous avez des questions, n'hésitez pas à les poster Wink
    Cordialement~~
    Taktiik.


    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Taktiik le Jeu 25 Avr 2013 - 18:38, édité 6 fois

    Sid'
    Sid'
    MasculinAge : 34Messages : 73

    Lun 22 Déc 2014 - 18:24

    Merci ! Very Happy
    1charlotte
    1charlotte
    FémininAge : 23Messages : 196

    Mar 23 Déc 2014 - 5:27

    merci
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Mar 23 Déc 2014 - 19:00

    Merci!
    Kowei
    Kowei
    FémininAge : 26Messages : 23

    Ven 26 Déc 2014 - 10:04

    Merci Very Happy
    Rawder
    Rawder
    MasculinAge : 25Messages : 10

    Sam 27 Déc 2014 - 21:28

    affraid trop bg
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Mer 7 Jan 2015 - 20:48

    j'adore, merci Very Happy
    Little angel
    Little angel
    FémininAge : 33Messages : 45

    Jeu 8 Jan 2015 - 18:25

    super merci
    soraya
    soraya
    FémininAge : 33Messages : 38

    Ven 9 Jan 2015 - 20:58

    merci beaucoup de ce partage! Very Happy




       
    Cory Monteith  1982 - 2013 Oh, why you look so sad? Tears are in your eyes come on and come to me now. Don't be ashamed to cry, let me see you through 'cause I've seen the dark side too. ©️ by anaëlle.
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Sam 10 Jan 2015 - 14:46

    merki ^^



    [Template & CSS] Catégories Lumineuses - Page 5 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    lilissa
    lilissa
    FémininAge : 31Messages : 31

    Dim 11 Jan 2015 - 0:51

    merci beaucoup c'est vraiment jolie
    Azorus
    Azorus
    MasculinAge : 23Messages : 35

    Sam 17 Jan 2015 - 20:31

    Merci :ggg1: :ggg5:



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    Contry
    Contry
    FémininAge : 25Messages : 28

    Sam 17 Jan 2015 - 22:44

    C'est superbe, merci !
    GoldenGrams
    GoldenGrams
    FémininAge : 24Messages : 35

    Dim 18 Jan 2015 - 18:52

    Merci. c:
    Selmacke
    Selmacke
    FémininAge : 34Messages : 100

    Lun 16 Mar 2015 - 20:17

    Je vais essayer merci :)
    Pikabouh
    Pikabouh
    FémininAge : 23Messages : 123

    Sam 28 Mar 2015 - 14:41

    Merci Wink
    LaCrapul
    LaCrapul
    MasculinAge : 30Messages : 24

    Lun 27 Avr 2015 - 21:39

    Merci
    pimslady
    pimslady
    FémininAge : 35Messages : 71

    Mer 29 Avr 2015 - 16:18

    merci beaucoup pour ce super code!
    reshiram44
    reshiram44
    MasculinAge : 26Messages : 380

    Sam 16 Mai 2015 - 10:25

    merci



    Treasury.
    Treasury.
    FémininAge : 26Messages : 28

    Lun 6 Juil 2015 - 22:57

    Merciiii
    Anselm
    Anselm
    MasculinAge : 33Messages : 151

    Mer 8 Juil 2015 - 15:44

    Merci !
    picka234
    picka234
    FémininAge : 59Messages : 636

    Lun 13 Juil 2015 - 13:30

    merci
    younessdu91
    younessdu91
    MasculinAge : 26Messages : 96

    Jeu 23 Juil 2015 - 22:06

    Merci
    Daigoro
    Daigoro
    MasculinAge : 36Messages : 13

    Jeu 27 Aoû 2015 - 21:52

    Merci
    Anonymous
    Invité

    Jeu 27 Aoû 2015 - 22:55

    Merci (/ ̄(エ) ̄)/
    Whateveranyway
    Whateveranyway
    FémininAge : 28Messages : 29

    Sam 12 Sep 2015 - 20:58

      Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 17:19