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 : -25%
-100€ Barre de son Hisense Dolby Atmos 5.1.2
Voir le deal
299.99 €

    (Nihil) Catégories déchirées à ruban

    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Dim 23 Nov 2014 - 0:58

    Ma demande



    Bonsoir/ bonjour, voila la période de Noël approche et je voudrais changer mon thème. Hors en codage j'aurais besoin d'aide en particulier pour les catégories. Merci d’ors et déjà de vous intéresser à ma demande :) !

    Schéma(s) et Eléments
    Schémas : https://i.servimg.com/u/f59/18/91/59/13/hjgjh10.png
    Tailles des éléments : Environ 900px de large pour la catégorie en elle même et après 90% pour le contenu
    Effets voulus : contrairement a l'image je voudrais les sous forum sous la description ça ira :)
    Version de votre forum : PHPBB2,


    Ressources
    si besoin :
    https://i.imgur.com/GJDu78I.png
    Lock / Nex/ No new


    Autres précisions ?
    / Merci Never Utopia :)


    Dernière édition par elsa2607 le Mar 16 Déc 2014 - 17:53, édité 1 fois



    (Nihil) Catégories déchirées à ruban Stvale10
    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Mer 26 Nov 2014 - 23:58

    Bonsoir, ma demande est toujours d'actualité :)



    (Nihil) Catégories déchirées à ruban Stvale10
    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Dim 30 Nov 2014 - 23:06

    Coucou, c'est encore d'actualité merci :)



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 30 Nov 2014 - 23:51

    Hello :)

    Il est jolie ton petit schéma *-*. Est ce que tu pourrais donner le nom des typos utilisées ? Ainsi que les tailles, et les couleurs ça sera plus rapide pour coder après Very Happy (plutôt que devoir les récupérer sois même à partir de l'image)

    Pourrais tu aussi nous préciser la taille de la petite image à côté de la description ?

    Si tu as encore le fichier psd de tes catégories, pas la peine de t'embêter pour liste tous les détails, partage le moi et c'est bon :)

    Enfin, il faut mettre le copyright en bas des catégories (le lien) ou bien c'est juste pour ton schéma ^-^ ?
    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Mar 2 Déc 2014 - 19:01

    Coucou,
    Merci de t’intéresser à ma demande :)
    Niveau graph je travail sous gimp (je sais xcf se convertit en psd).
    Mais les typos ne sont là qu'à charge d'exemple, elle ne sont pas définies pour le moment alors laisse la police de base je me débrouillerais :). Pour l'image de description pareil c'est juste pour avoir l'idée d'où la mettre, elle ne sera surement pas a cette taille mais plutôt comme ça: https://i.imgur.com/ANItKgu.png

    Pour le copyrights oui, Je voudrais une barre avec l'url du forum s'il vous plait. :)

    Spoiler:



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 3 Déc 2014 - 16:55

    Okay bah je veux bien essayer de faire ta demande Wink

    Les sous-forums vont dans un bloc en dessous de celui de la description (avec une marge en dessous donc) ou bien en bas du bloc de description (à l'intérieur) :) ?

    EDIT : J'ai commencé un premier modèle rapide sur une page HTML pour te donner une idée (y a un petit souci avec un alignement, je règlerai ça une fois que je saurai où vont les sous-forums) :)
    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Sam 6 Déc 2014 - 15:28

    Wooaw ! Exactement ça c'est magnifique *.* merci
    Je découvre en même temps que le nouveau thème, je n'avais pas eu le temps cette semaine de me connecter désolée pour l'attente.

    Pour les sous forums "en bas du bloc de description (à l’intérieur)"



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 7 Déc 2014 - 17:39

    Hello,

    Évidemment que c'est magnifique, c'est ton schéma *-*

    Tiens voici une mise à jour avec un ajout des sous forums : exemple sur une page html

    Si c'est bon, j'adapte le code pour le mettre sur le template Wink

    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Dim 7 Déc 2014 - 19:27

    Oui super par contre si tu pouvais mettre l'alignement des sous forums à droite ce serait vraiment parfait *.*
    Merci beaucoup



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 7 Déc 2014 - 23:55

    Bon, j'ai fait un premier test sur 2 forums tests, je regarderai les ajustements sur ton forum directement :)

    Là je te met le code sans les commentaires, je les rajouterai tout à la fin quand le code sera fini ♥

    Template index_box :
    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>
    <link href='http://fonts.googleapis.com/css?family=Oswald|Roboto:300' rel='stylesheet' type='text/css'>
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="categorie">
        <div class="cate-title">{catrow.tablehead.L_FORUM}</div>
        <div class="forums-container">
            <!-- END tablehead -->
            <!-- BEGIN cathead -->
            <p>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" !</p>
            <!-- END cathead -->
            <!-- BEGIN forumrow -->
            <div class="forum">
                <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>
                <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">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                    </div>
                </div>
                <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>
            <!-- END forumrow -->
            <!-- BEGIN catfoot --><!-- END catfoot -->
            <!-- BEGIN tablefoot -->
        </div>
        <!-- fermeture /.forums-container -->
        <div class="cate-footer"><a href="http://graphisya.forumactif.org/">http://graphisya.forumactif.org/</a>
        </div>
    </div>
    <!-- fermeture /.categorie -->
    <!-- END tablefoot -->
    <!-- END catrow -->

    CSS à rajouter :
    Code:
    .categorie {
        width: 900px;
        margin: auto;
      margin-bottom: 25px;
        background-size: cover;
    }

    .cate-title {
        text-align: center;
        line-height: 120px;
        background: url(http://image.noelshack.com/fichiers/2014/49/1417642495-gjdu78i.png) top;
    }

    .cate-title h2 {
        color: #9BE937;
        font-size: 45px;
        font-family: 'Oswald', sans-serif;
        margin: 0;
    }

    .forums-container {
        padding-top: 20px;
        background: white;
        overflow: hidden;
    }

    .cate-footer {
        background: #9BE937;
        text-align: center;
        padding: 3px;
    }

    .cate-footer a {
        color: #4B4B4B;
        text-decoration: none;
    }

    .forum {
        width: 95%;
        margin: auto;
        margin-bottom: 25px;
        overflow: hidden; /* BFC */
    }

    .forum a {
        color: inherit;
        text-decoration: inherit;
    }

    .stats-forum {
        float: left;
        width: 20%;
        background: #A0CE50;
        text-align: center;
        text-transform: uppercase;
    }

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

    .last-message a {
        font-size: 16px;
        color: black;
    }

    .sujets-messages {
        background: #E6E6D3;
       
        line-height: 30px;
    }

    .infos-forum {
        display: inline-block;
        width: 550px;
        margin: auto;
        margin-left: 22px;
    }

    .status-forum {
        float: right;
        overflow: hidden;
        width: 90px;
    }



    .status-forum img {
        width: 100%;
    }

    .titre-forum {
        background: #89CEEA;
        line-height: 30px;
        padding: 0 5px;
        margin-bottom: 10px;
        text-transform: uppercase;
        color: #4B4B4B;
        font-weight: bold;
        text-align: right;
        overflow: hidden;
        white-space:  nowrap;
    }

    .description-forum {
        background: #E6E6D3;
        overflow: hidden;
        font-size: 14px;
        height: 110px;
        text-align: justify;
    }

    .description {
        height: 82px;
        overflow: hidden;
    }

    .descript-content {
        height: 75px;
        padding: 5px;
        overflow: auto;
    }


    .descrip-img {
        float: left;
        height: 90%;
        padding: 5px;
    }

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

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

    .sous-forums a img {
        margin-top: 12px;
    }

    Et pour les descriptions des forums :
    Code:
    <img src="http://i.imgur.com/ANItKgu.png" class="descrip-img" />
    <div class="descript-content">Youuuuhouuuu, c'est super intéressant ce que j'écris, BWAHAHAHHAHAHA JE SUIS FOLLE. Ok.</div>

    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Mar 9 Déc 2014 - 17:52

    Merrrrciiiii beauucoup c'est exactement ça aucun problème.
    ( Hormis l'image no new/new/lock qui passe en dessous si on dépasse en largeur sans utiliser le code des description mais ce n'est pas bien grave du moment ou je les met :3 )
    Je te laisse admirer ton oeuvre sur mon forum beta :
    Tu auras ton crédit sur la PA (quand je l'aurais faite). As-tu un forum dont tu voudrais que je partage (lien au clique de ton pseudo dans le credit) ?



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 9 Déc 2014 - 18:43

    Non merci pas besoin de lien Elsa :), tu peux seulement mettre un crédit vers NU je ne t'oblige pas à mettre mon pseudo (◕‿◕✿)

    Pourrais tu me lister les différents bugs que je n'aurais pas vu éventuellement (fait un petit tour partout sur ton forum "au cas où" xDDD) ?
    - Rajouter les majuscules sur les liens dans une catégorie. screen
    - Empêcher l'image new / no new/ lock de se barrer en cas de problème avec la description

    Après je commence à commenter mon code CSS pour simplifier les modifications. (^-^)

    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Mer 10 Déc 2014 - 19:11

    Heu et bien à part ça je ne voit pas grand chose ... A la rigueur oui des majuscules sur le titre des forums et sur le dernier message. Sinon pour les commentaires personnellement je peux me débrouiller sans :)



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 11 Déc 2014 - 23:11

    Ouki, si tu n'as aucun problème ce cas là, tu pourras toujours récupérer le code avec les commentaires dans le LS que je posterai si tu le souhaites :)

    La seule modification à faire pour les liens est ici :

    On va prendre le CSS pour
    Code:
    .forum a {
        color: inherit;
        text-decoration: inherit;
    }

    Et le remplacer par :
    Code:
    .forum a {
        color: inherit;
        text-decoration: inherit;
        text-transform: inherit;
    }

    Normalement tes liens seront bons comme ça Wink

    EDIT :

    Au fait ici :
    Code:
    .categorie {
        width: 900px;
        margin: auto;
      margin-bottom: 25px;
        background-size: cover;
    }

    Tu peux enlever le background-size: cover;, je l'avais utilisé quand j'avais une image en fond, et j'ai oublié de l'enlever >-<

    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Dim 14 Déc 2014 - 23:20

    C'est fait voila merci :)



    (Nihil) Catégories déchirées à ruban Stvale10
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 14 Déc 2014 - 23:31

    Du coup tout est bon (et tu peux mettre en "Terminé") ou bien il y a autre chose à voir Wink ?

    elsa2607
    elsa2607
    FémininAge : 26Messages : 81

    Mar 16 Déc 2014 - 17:03

    Tout est ok merci ♥



    (Nihil) Catégories déchirées à ruban Stvale10
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 7:38