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 :
Coffret Collection Poster Pokémon EV8.5 ...
Voir le deal

    Catégorie "Winds of Winter"

    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Lun 14 Nov 2016 - 10:22




    Catégories réalisées suite à la demande de Ailes.
    Les couleurs sont modifiables, merci de ne pas retirer le crédit.

    Voici un aperçu :

    lien direct : www

    Version forum : testé sur phpbb2

    Dimensions des images :
    Les images de description doivent être si possible au format 250px x 100px;
    Les images "Pas de nouveaux messages ; Nouveaux messages ; etc" doivent être en 35px X 35px

    Pour ajouter des images de description : www
    Pour activer les avatars : www


    Remplacer l'intégralité du template index-box par :

    Code:
    <table width="900px" 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 -->
    <div class="TitreCategorie"><h2>{catrow.tablehead.L_FORUM}</h2></div>
            <div class="BlocCategorie"><!-- END tablehead -->

            <!-- BEGIN cathead -->
            <!-- END cathead -->
         
            <!-- BEGIN forumrow -->
            <div class="BlocForum"><div class="TitreForum"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="ImageForum" /><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="Forum"><div class="DescriptionForum">{catrow.forumrow.FORUM_DESC}</div><div class="BlocImageDescription"><div class="SousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="DernierMessage"><div class="NombreSetM">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div><hr /><table><tr><td><div class="AvatarForum"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></td><td>{catrow.forumrow.LAST_POST}</td></tr></table></div></div></div>
            <!-- END forumrow -->
         
            <!-- BEGIN catfoot -->
            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->
            </div>
            <div class="BasCategorie"></div>
            <!-- END tablefoot --><!-- END catrow -->


    Dans la feuille de style (CSS) ajouter le code :

    Code:
    /* BLOC TITRE CATEGORIE */
    .TitreCategorie {
    margin:5px auto 0; width:900px; padding:15px 0;
    background:#D07F7F; /* MODIFIABLE */
    }
    /* TITRE CATEGORIE */
    .TitreCategorie h2{
    margin:0; font-size:32px; text-align:center;
    color:white; font-family:Arial; /* MODIFIABLE */
    }
    /* BLOC CATEGORIE */
    .BlocCategorie {
    margin:auto; width:900px; padding:25px 0 15px;
    background:#D7D5D5; /* MODIFIABLE */
    }
    /* BAS CATEGORIE */
    .BasCategorie {
    margin:auto; margin-bottom:10px; width:900px; height:35px;
    background:#D07F7F; /* MODIFIABLE */
    }
    /* BLOC FORUM */
    .BlocForum{
    width:850px; margin:auto; text-align:center;
    }
    /* BLOC TITRE FORUM */
    .TitreForum {
    margin:0 auto 5px;
    font-size:25px;
    width:805px; padding:5px 25px 5px 0;
    text-align:left; /* MODIFIABLE */
    }
    /* TITRE FORUM */
    .TitreForum a{
    color:black !important; /* MODIFIABLE */
    }
    /* BLOC FORUM */
    .Forum {
    margin:auto; margin-bottom:10px;
    width:830px; height:100px; overflow:hidden;
    }
    /* ICÔNES FORUM */
    .ImageForum{
    display:inline-block; vertical-align:top;
    width:35px; height:35px;
    margin-top:-18px; margin-left:-20px;
    }
    /* DESCRIPTION FORUM */
    .DescriptionForum {
    display:inline-block; vertical-align:top;
    width:300px; height:90px; padding:5px; overflow:auto;
    font-size:10px; text-align:justify;
    background:#C6B5CA; color:black; /* MODIFIABLE */
    }
    /* IMAGE DESCRIPTIVE FORUM */
    .DescriptionForum img{
    position:absolute; margin-top:-5px; margin-left:310px;
    width:250px; height:100px;
    }
    /* BLOC IMAGE DESCRIPTIVE FORUM */
    .BlocImageDescription {
    display:inline-block; vertical-align:top;
    width:250px; height:100px;
    border-left:5px solid; border-right:5px solid;
    background:white; border-color:#D7D5D5 !important; /* MODIFIABLE */
    }
    /* BLOC SOUS-FORUMS */
    .SousForums {
    position:relative; z-index:2;
    width:250px; height:90px; padding:5px 0; overflow:auto;
    background:#42A8AE; /* MODIFIABLE */
    color:rgba(0,0,0,0); line-height:6px;
    opacity:0; transition:opacity 0.55s ease-in-out; -webkit-transition:opacity 0.55s ease-in-out;
    }
    .SousForums:hover {
    opacity:1;
    }
    /* LIEN SOUS-FORUM */
    .SousForums a{
    display:block; margin:auto;
    width:95%; line-height:16px;
    background:white; color:#D07F7F !important; text-transform:uppercase; /* MODIFIABLE */
    }
    /* DERNIER MESSAGE FORUM */
    .DernierMessage {
    display:inline-block; vertical-align:top;
    width:250px; height:90px; padding:5px;
    text-align:center; font-size:10px; text-transform:uppercase;
    background:#C6B5CA; color:black; /* MODIFIABLE */
    margin-bottom:-50px;
    }
    /* NOMBRE SUJETS & MESSAGES FORUM */
    .NombreSetM {
    text-transform:none;
    }
    /* BLOC AVATAR DERNIER POSTEUR FORUM */
    .AvatarForum {
    display:inline-block; vertical-align:top;
    width:50px; height:50px; overflow:hidden;
    background:#ccc; /* MODIFIABLE */
    }
    .AvatarForum img {
    width:50px; filter:grayscale(1); -webkit-filter:grayscale(1);
    }


    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.
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 23 Fév 2017 - 0:31

    Coucou Nemalus !

    Merci pour ton partage et désolée pour le délai >-<

    Le LS tout joli, merci :hudada:

    - Depuis la MàJ - rentrée 2016 si possible d'ouvrir les LS, c'est à dire de ne pas mettre sous balise hide le code. Le lien sur l'ouverture des LS si ça t'intéresse --> Aux auteurs de tuto', astuces, LS
    Est ce qu'on peut enlever les balises hide ou bien tu préfères les garder ? :hug:
    Le sujet sera bientôt déplacé au bon endroit, en cas d'absence de réponse on enlèvera les balises hide ^^. N'hésite pas à nous prévenir si tu souhaitais les garder.

    Je me suis permise d'éditer ton LS rapidement :
    - J'avais un petit soucis avec le placement des images de description. Dans le CSS la valeur de .DescriptionForum img est à 305px, mais pour moi les images ne se placent pas correctement, j'ai du mettre 310px.
    - Rajout des dimensions et de la version (phpbb2), des tags :)

    Pense bête pour moi même, voici le code pour l'index (oui oui, j'écris des messages pour moi même) :
    Code:
    <div class="ls_codage"><div class="lscodage_illu"><img src="http://placehold.it/200x150" /></div><div class="tutograph_titre">Catégorie "Winds of Winter"</div><div class="tutograph_mots">par Nemalus</div><a href="http://www.never-utopia.com/t61899-categorie-winds-of-winter#944018" class="tutograph_lien">Voir le Code</a></div><!--NEXT-->
    Il n'y a plus qu'à remplacer http://placehold.it/200x150 par l'url d'une miniature en 200 x 150

    Bonne journée !


    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 15 Mar 2017 - 18:00

    Voilà c'est vu avec Nemalus, c'est bon je déplace :)
    Merci encore pour ton travail et ton partage :hug:

    Anonymous
    Invité

    Mer 15 Mar 2017 - 22:51

    Merci pour le partage !
    Patou972
    Patou972
    FémininAge : 46Messages : 181

    Dim 29 Mai 2022 - 3:19

    Merci pour ce partage
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 16:12