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.


    [Template & CSS] Catégories Lumineuses

    Taktiik
    Taktiik
    MasculinAge : 24Messages : 2291

    le 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

    smily
    smily
    FémininAge : 20Messages : 66

    le Jeu 19 Juin 2014 - 17:16

    Merci **
    You.Fool
    You.Fool
    FémininAge : 23Messages : 39

    le Ven 20 Juin 2014 - 13:48

    Merci !



    [Template & CSS] Catégories Lumineuses - Page 3 13343822960016881004792253408610n
    Féhéla
    Féhéla
    FémininAge : 46Messages : 238

    le Mar 24 Juin 2014 - 5:27

    merci du partage =)
    Asaliah
    Asaliah
    FémininAge : 34Messages : 120

    le Ven 27 Juin 2014 - 17:39

    Merci !



    [Template & CSS] Catégories Lumineuses - Page 3 Signu10
    Mordiern
    Mordiern
    FémininAge : 42Messages : 282

    le Sam 28 Juin 2014 - 20:07

    Merci beaucoup pour les codes :)
    Lisou
    Lisou
    FémininAge : 19Messages : 351

    le Sam 12 Juil 2014 - 16:41

    Merci ♥
    Fyraliel
    Fyraliel
    FémininAge : 28Messages : 1424

    le Lun 14 Juil 2014 - 17:08

    merci



    [Template & CSS] Catégories Lumineuses - Page 3 F86e7518c1
    Eden.
    Eden.
    FémininAge : 26Messages : 201

    le Mar 22 Juil 2014 - 18:53

    Merci !
    benficagirl
    benficagirl
    FémininAge : 33Messages : 399

    le Sam 26 Juil 2014 - 18:40

    Je l'aime beaucoup :)
    InkBoy
    InkBoy
    MasculinAge : 26Messages : 66

    le Dim 27 Juil 2014 - 8:45

    Merci pour ce petit tuto !



    [Template & CSS] Catégories Lumineuses - Page 3 351tqox
    >> Chiro <<
    >> Chiro <<
    MasculinAge : 27Messages : 83

    le Dim 27 Juil 2014 - 19:46

    merci
    Layla4
    Layla4
    FémininAge : 20Messages : 149

    le Mar 29 Juil 2014 - 12:26

    Merci ^^
    avatar
    Nal Souclade
    MasculinAge : 20Messages : 163

    le Dim 3 Aoû 2014 - 14:37

    Super utile ! Merci beaucoup !
    Filou
    Filou
    FémininAge : 28Messages : 162

    le Jeu 7 Aoû 2014 - 17:41

    Merci :3
    Lugatique
    Lugatique
    MasculinAge : 19Messages : 23

    le Jeu 7 Aoû 2014 - 17:55

    merci
    Natsumi13
    Natsumi13
    FémininAge : 23Messages : 64

    le Jeu 7 Aoû 2014 - 19:05

    Arigato :3
    Yukionna
    Yukionna
    FémininAge : 19Messages : 75

    le Jeu 14 Aoû 2014 - 19:46

    Merci :3



    [Template & CSS] Catégories Lumineuses - Page 3 1402922565-flyintotheair1
    Kreazen
    Kreazen
    FémininAge : 22Messages : 46

    le Jeu 14 Aoû 2014 - 22:26

    merci



    Arrow
    Frosty Blue
    Frosty Blue
    FémininAge : 23Messages : 162

    le Sam 23 Aoû 2014 - 16:39

    Merci beaucoup ^^
    catkiller
    catkiller
    FémininAge : 24Messages : 70

    le Lun 25 Aoû 2014 - 16:41

    J'adore :love:
    Natsu892
    Natsu892
    MasculinAge : 18Messages : 63

    le Mer 27 Aoû 2014 - 20:48

    Merci



    Faucon
    Faucon
    FémininAge : 19Messages : 64

    le Sam 30 Aoû 2014 - 18:36

    Mici ♥
    Kau
    Kau
    FémininAge : 17Messages : 148

    le Sam 30 Aoû 2014 - 20:12

    Merci beaucoup ^^
    Allison01
    Allison01
    FémininAge : 35Messages : 212

    le Mer 3 Sep 2014 - 1:04

    Très beau
    ShamRock
    ShamRock
    FémininAge : 25Messages : 39

    le Mer 3 Sep 2014 - 12:25

    Merci ~
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Oct 2019 - 17:56