Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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

    Partagez
    Message(s) : 3801

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    9/10  (9/10)
    Nihil Scar Winspeare
    le Lun 22 Déc 2014 - 16:26
    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 :


    • 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 :

    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



    Merci Maféliquement <3
    Viens faire un tour sur la chatbox Gérer les périodes de vacances sur son forum
    Présence fortement réduite :toto:
    FémininAge : 22Message(s) : 9733

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    10/20  (10/20)
    Halloween
    le Lun 22 Déc 2014 - 19:13
    Oh ton premier LS sur NU *-*
    Nickel, rien à redire ... ou presque !



    Dernière édition par Halloween le Lun 22 Déc 2014 - 19:29, édité 1 fois


    Je mets les voiles, que le vent te soit favorable matelot !
    Message(s) : 3801

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    9/10  (9/10)
    Nihil Scar Winspeare
    le Lun 22 Déc 2014 - 19:19
    Hello :)

    Merci d'avoir pris le temps de vérifier. ♥

    Voilà c'est retiré du texte (^-^) (d'ailleurs je m'en doutais un peu mais bon :toto:)



    Merci Maféliquement <3
    Viens faire un tour sur la chatbox Gérer les périodes de vacances sur son forum
    Présence fortement réduite :toto:
    FémininAge : 22Message(s) : 9733

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    10/20  (10/20)
    Halloween
    le Lun 22 Déc 2014 - 19:26
    Nickel bleu ciel, je déplace Wink
    (Et merci pour le gif *-*)


    Je mets les voiles, que le vent te soit favorable matelot !
    FémininAge : 26Message(s) : 737

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Chocolakato
    le Ven 26 Déc 2014 - 10:49
    Merci beaucoup !


    MasculinAge : 20Message(s) : 54
    Xélore
    le Sam 27 Déc 2014 - 1:42
    merci
    MasculinAge : 26Message(s) : 220
    Fame
    le Jeu 1 Jan 2015 - 11:55
    J'aime beaucoup, merci :)
    FémininAge : 26Message(s) : 153

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Hana Evali
    le Jeu 1 Jan 2015 - 20:37
    Superbe !


    FémininAge : 24Message(s) : 199
    Clémentine
    le Sam 3 Jan 2015 - 0:41
    Merciiiiii ^^


    FémininAge : 22Message(s) : 183
    Romann
    le Mar 6 Jan 2015 - 19:47
    Merci !


    FémininAge : 23Message(s) : 2324

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Mar 13 Jan 2015 - 1:10
    magnifique merci


    Absente pour une durée indéterminée.
    FémininAge : 30Message(s) : 37
    Alysanne
    le Mar 13 Jan 2015 - 2:39
    Merci ! :) J'adore !
    J'aimerai bien mixer ce code avec celui des catégories rétractables... mais je ne trouve pas comment le faire fonctionner.. Tu aurais une idée ?
    Merci encore et bonne fin de journée !!! :)
    FémininAge : 22Message(s) : 129
    Shanyme Thibolt
    le Mar 13 Jan 2015 - 12:33
    J'aime beaucoup le style, merci pour la partage.
    FémininAge : 25Message(s) : 293
    lala zhang
    le Mar 13 Jan 2015 - 13:55
    Merci les catégorie son super jolie
    FémininAge : 19Message(s) : 24
    Flyremoon
    le Jeu 15 Jan 2015 - 15:23
    Merci ♥


    MasculinAge : 27Message(s) : 80
    Nathaël
    le Jeu 15 Jan 2015 - 23:22
    Simple. Sobre. :)


    MasculinAge : 26Message(s) : 192
    Hayate747
    le Ven 16 Jan 2015 - 11:21
    Merci !
    FémininAge : 14Message(s) : 148

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kau
    le Sam 17 Jan 2015 - 19:49
    Merci elles sont parfaites *0*
    FémininAge : 29Message(s) : 367
    Kahlan
    le Mar 20 Jan 2015 - 18:55
    C'est un super codage !
    FémininAge : 22Message(s) : 75
    Pastiche
    le Mer 21 Jan 2015 - 11:15
    Simple, efficaces, mais très jolies ! Merci du partage ! ♥
    FémininAge : 21Message(s) : 85
    Moriarty
    le Mer 21 Jan 2015 - 18:11
    Merci, c'est superbe !
    FémininAge : 20Message(s) : 64
    Natsumi13
    le Mer 21 Jan 2015 - 18:25
    Tout simplement... magnifique. Exactement ce que je cherchais Very Happy
    Merci!!
    FémininAge : 33Message(s) : 146
    missphan
    le Jeu 22 Jan 2015 - 8:28
    simple mais efficace, je suis fan <3
    FémininAge : 24Message(s) : 37
    lolosmile
    le Mar 27 Jan 2015 - 15:44
    merci beaucoup
    FémininAge : 26Message(s) : 20
    Aeilan
    le Jeu 29 Jan 2015 - 1:10
    Merci :love:
    Contenu sponsorisé
    Aujourd'hui à 15:53

      La date/heure actuelle est Lun 26 Sep 2016 - 15:53