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.


    Catégories simples phpbb2

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5113

    le Lun 22 Déc 2014 - 16:26

    Rappel du premier message :



    Hello hello,

    Mon premier LS sur Never Utopia :toto:

    Un petit libre service de catégories créé à la demande de d'elsa2607 qui a réalisé le schéma ainsi que le choix des couleurs.

    Informations

    Rendu visuel :

    Catégories simples phpbb2 - Page 4 JvhlrDX

    • Pour avoir la bonne structure :
      PA > Affichage > Page d'accueil > Structure et hiérarchie et choisir "Séparer les catégories sur l'index" ainsi que le niveau de compression de l'index "Moyen".

    • Largeur des catégories : 900px.

    • Les images à droites sont les new / no new / lock. Les dimensions maximales sont de 90px pour la largeur et 150px pour la hauteur.
      PA > Affichage > Images > Avancé > Icônes du forum.

    • Il faut activer l'affichage des sous forums
      PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs (oui ou bien "avec une image).
      (Si "avec une image", elle se change ici : PA > Affichage > Images > Avancé > Mini icones).


    • Pour régler le dernier message affiché :
      PA > Affichage > Page d'accueil > Structure et hiérarchie.
      • cocher Oui pour Afficher le titre du sujet du dernier message d'un forum sur l'index.
      • Pour la longueur, mettre environ 15 à Longueur du titre du sujet affiché.


    Merci de penser à mettre quelque part un crédit et un lien vers Never Utopia.


    Les codes

    Les codes ne sont pas sous hide, vous pouvez les tester directement.
    Mais si vous le souhaitez, vous pouvez toujours dire merci, personne ne vous mangera.
    Et ça fait toujours plaisir (◕‿◕✿)

    L'ensemble du template index_box à remplacer :
    Compte fondateur : PA > Affichage > Templates > Général ( + vérifier que "Forcer les templates par défaut" est bien coché à "Non")

    Spoiler:
    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>
    <!--
     * --------------------------------------
     * DÉBUT CATÉGORIES
     * LIBRE SERVICE TROUVÉ SUR NEVER UTOPIA
     * --------------------------------------
    -->
    <!-- Ajout des polices -->
    <link href='http://fonts.googleapis.com/css?family=Oswald|Roboto:300' rel='stylesheet' type='text/css'>
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="categorie">
      <!-- Titre de la catégorie  -->
        <div class="cate-title">{catrow.tablehead.L_FORUM}</div>
       
        <!-- Bloc contenant la liste des forums d'une catégorie -->
        <div class="forums-container">
            <!-- END tablehead -->
            <!-- BEGIN cathead -->
             
                <!-- Message d'erreur-->
                <p style="font-size: 15px; color: red; font-weight: bold;">Si ce message apparait, merci d'aller dans PA > Affichage > Page d'accueil > Structure et hiérarchie et choisir "Séparer les catégories sur l'index" ainsi que le niveau de compression de l'index "Moyen".</p>
               
            <!-- END cathead -->
            <!-- BEGIN forumrow -->
            <div class="un-forum">
             
              <!-- Bloc statistiques (dernier message + statistiques) -->
                <div class="stats-forum">
                    <div class="last-message">{catrow.forumrow.LAST_POST}</div>
                    <div class="sujets-messages">
                        {catrow.forumrow.TOPICS} sujets • {catrow.forumrow.POSTS} msg
                    </div>
                </div>
               
                <!-- Bloc infos : titre + description + sous forums -->
                <div class="infos-forum">
                    <div class="titre-forum"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
                   
                    <div class="description-forum">
                        <div class="description">
                            {catrow.forumrow.FORUM_DESC}
                        </div>
                        <div class="sous-forums gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                    </div>
                </div>
               
                <!-- Bloc nouveaux messages / pas de nouveaux messages / verrouillé -->
                <div class="status-forum">
                    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                </div>
               
            </div> <!-- fermeture .un-forum -->
            <!-- END forumrow -->
            <!-- BEGIN catfoot --><!-- END catfoot -->
            <!-- BEGIN tablefoot -->
           
        </div><!-- fermeture /.forums-container -->
    </div><!-- fermeture /.categorie -->

    <!-- END tablefoot -->
    <!-- END catrow -->

    <!--
     * --------------------------------------
     * FIN CATÉGORIES
     * --------------------------------------
    -->

    Le CSS
    PA > Affichage > Couleurs > Feuille de style CSS

    Spoiler:
    Code:
    /*
     * --------------------------------------
     * CODAGE DES CATEGORIES
     * LIBRE SERVICE TROUVÉ SUR NEVER UTOPIA
     * --------------------------------------
     */

    /* Bloc categorie */
    .categorie {
        width: 900px;
        margin: auto;
        margin-bottom: 25px;
        border-bottom: 10px solid #A0CE50; /* bordure en bas */
        font-family: 'Roboto', sans-serif;
    }

    /* Titre de la catégorie */
    .cate-title {
        text-align: center;
        height: 70px;
        color: #9BE937; /* couleur */
        font-size: 45px;
        font-family: 'Oswald', sans-serif;
    }

    /* Texte titre de la catégorie, remise à zero du style */
    .cate-title h2 { color: inherit; font-size: inherit; margin: 0; }


    /* Bloc englobant les forums */
    .forums-container {
        padding: 20px 0;
        background: white;
        overflow: hidden;
    }

    /* Bloc entourant un forum */
    .un-forum {
        width: 95%;
        margin: auto;
        overflow: hidden; /* ne pas enlever, clear le float */
    }

    /* marge entre les forums */
    .un-forum + .un-forum {
        margin-top: 25px;
    }

    /* Remise à zéro du style des liens*/
    .un-forum a { color: inherit; text-decoration: inherit; }

    /* Bloc gauche Dernier message + stats */
    .stats-forum {
        float: left;
        width: 20%;
        background: #A0CE50;
        text-align: center;
        text-transform: uppercase;
    }

    /* Bloc dernier message */
    .last-message {
        padding: 20px 0;
        font-size: 12px;
        height: 80px;
    }

    /* centrage vertical du dernier message */
    .last-message > span {
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

    /* Liens dernier message */
    .last-message a {
        font-size: 16px;
        color: black;
    }

    /* Statistiques nombre sujets & messages */
    .sujets-messages {
        background: #E6E6D3;
        line-height: 30px; /* hauteur de la ligne */
    }

    /* Bloc titre forum + description + sous forums */
    .infos-forum {
        display: inline-block;
        width: 550px;
        margin: auto;
        margin-left: 22px; /* marge à gauche à définir manuellement */
        overflow: hidden;
    }

    /* Bloc new / no new / lock */
    .status-forum {
        float: right;
        overflow: hidden;
        width: 90px;
        max-height: 150px;
    }

    /* Style image new / no new / lock */
    .status-forum img {
        width: 100%;
    }

    /* Titre du forum */
    .titre-forum {
        line-height: 30px;
        margin-bottom: 10px;
        padding: 0 5px;
        background: #89CEEA;
        text-transform: uppercase;
        color: #4B4B4B;
        font-weight: bold;
        text-align: right;
        overflow: hidden;
        white-space: nowrap; /* empeche de retour à la ligne si le texte est trop long */
    }

    /* Bloc description + sous forums du forum */
    .description-forum {
        background: #E6E6D3;
        overflow: hidden; 
        height: 110px;
    }

    /* Description du forum */
    .description {
        height: 75px;
        padding: 5px;
        overflow: auto;
        text-align: justify;
        font-size: 14px;
    }

    /* Bloc sous forum */
    .sous-forums {
        padding: 0 5px;
        line-height: 25px;
        text-align: right;
    }

    /* Liens de sous forums */
    .sous-forums a {
        text-decoration: none;
    }

    /* Image "new / no new / lock" pour les sous forums */
    .sous-forums a img {
        margin-top: 8px;
    }
    /*
     * --------------------------------------
     * FIN CODAGE DES CATEGORIES
     * --------------------------------------
     */

    En cas de problème ou de difficulté à personnaliser, il y a une partie "Un problème en codage" qui est là pour ça.


    Ajout

    Petit ajout personnel, si vous souhaitez avoir le texte indiquant qu'il n'y a pas encore de message dans un forum :

    Rendu visuel :
    Catégories simples phpbb2 - Page 4 DJ2bnUO

    Le CSS à rajouter :
    CSS à rajouter:

    Code:
    /* Ajout catégorie : 
     * message indiquant "Pas de message"
     * dans un forum (à la place des statistiques)
     * Crédits : Never Utopia
     */
     
    /* Premiere ligne */
    .last-message:empty:before {
        content: "Vide ♥";
        display: block;
        margin-top: 35px;
    }
    /* Seconde ligne */
    .last-message:empty:after {
        content: "Viens poster un message !";
    }

    /* On prend toute la hauteur */
    .last-message:empty {
        height: 110px;
    }

    /* On masque les statistiques*/
    .last-message:empty + .sujets-messages {
        display: none;
    }
    /* Fin ajout absence de message*/


    Dernière édition par Nihil Scar Winspeare le Lun 22 Déc 2014 - 19:17, édité 1 fois



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Ilario
    Ilario
    MasculinAge : 20Messages : 12

    le Jeu 18 Fév 2016 - 17:29

    Merciiii
    Argenty
    Argenty
    FémininAge : 17Messages : 33

    le Ven 26 Fév 2016 - 15:09

    C'est pile ce qu'il fallait! Simple, clair mais toute joulie! ♥
    Bravo *0*
    Teddyy
    Teddyy
    FémininAge : 24Messages : 7

    le Sam 9 Avr 2016 - 16:41

    merci !
    FondaHS
    FondaHS
    MasculinAge : 20Messages : 11

    le Lun 11 Avr 2016 - 15:26

    Merci
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Mar 26 Avr 2016 - 10:53

    Merci
    jeremy31
    jeremy31
    MasculinAge : 22Messages : 22

    le Mer 27 Avr 2016 - 23:03

    Merci :)
    jeremy31
    jeremy31
    MasculinAge : 22Messages : 22

    le Mer 27 Avr 2016 - 23:04

    Merci :)
    Solitude
    Solitude
    FémininAge : 44Messages : 288

    le Mer 18 Mai 2016 - 13:16

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Catégories simples phpbb2 - Page 4 Sign510
    Djeina
    Djeina
    FémininAge : 23Messages : 233

    le Lun 23 Mai 2016 - 7:45

    Merci du partage ^^
    Suisen
    Suisen
    FémininAge : 25Messages : 52

    le Ven 3 Juin 2016 - 15:16

    Merci du partage ♥
    Précyounette
    Précyounette
    FémininAge : 20Messages : 39

    le Dim 19 Juin 2016 - 18:23

    Abruh merci !
    Kahlan
    Kahlan
    FémininAge : 32Messages : 371

    le Lun 20 Juin 2016 - 20:54

    merci beaucoup pour ce partage
    Lux'Uriante
    Lux'Uriante
    FémininAge : 30Messages : 21

    le Dim 26 Juin 2016 - 18:05

    c'est chouette et complet !
    FROSTendoloris
    FROSTendoloris
    FémininAge : 26Messages : 172

    le Jeu 4 Aoû 2016 - 14:45

    c'est trop joliiii
    Merci du partage ♥



    Catégories simples phpbb2 - Page 4 3oov
    shiranui
    shiranui
    MasculinAge : 20Messages : 14

    le Dim 7 Aoû 2016 - 16:02

    merci :heart:
    Donquichotte
    Donquichotte
    MasculinAge : 23Messages : 48

    le Mar 30 Aoû 2016 - 15:22

    merci
    Ohana Firefly
    Ohana Firefly
    FémininAge : 24Messages : 43

    le Ven 30 Sep 2016 - 22:49

    Merci Very Happy
    Froufy
    Froufy
    FémininAge : 19Messages : 59

    le Sam 8 Oct 2016 - 10:56

    C'est super merci!



    1+1= 4
          2
    3
    Schnappi
    Schnappi
    FémininAge : 28Messages : 113

    le Ven 25 Nov 2016 - 19:04

    classe *-*
    Scratpub
    Scratpub
    FémininAge : 33Messages : 99

    le Lun 19 Déc 2016 - 18:14

    Super merci beaucoup
    Miss Tigri
    Miss Tigri
    FémininAge : 25Messages : 89

    le Mer 21 Déc 2016 - 20:45

    Merci !
    Yamashita
    Yamashita
    FémininAge : 20Messages : 50

    le Dim 19 Fév 2017 - 5:44

    Merci beaucoup ** ♥



    Suzanne Ady
    Suzanne Ady
    FémininAge : 25Messages : 75

    le Lun 27 Mar 2017 - 11:08

    merci !
    alsayed
    alsayed
    MasculinAge : 46Messages : 75

    le Sam 10 Juin 2017 - 12:52

    Merci
    Lalia
    Lalia
    FémininAge : 19Messages : 44

    le Dim 23 Juil 2017 - 23:14

    Merci x3
    Contenu sponsorisé


      La date/heure actuelle est Lun 14 Oct 2019 - 20:36