AccueilFAQRechercherMembresGroupesS'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.


    [CATEGORIES] Mettre une image en haut et en bas d'une catégorie

    Partagez
    avatar
    Jujudu44
    FémininAge : 29Messages : 57

    le Lun 5 Juin 2017 - 15:31

    Ma demande



    Bonjour mes petits loups ! Je fais appel à votre gentillesse, si vous pouviez m'aider... J'ai cherché dans le libre service mais je ne trouve pas mon bonheur... Je souhaiterai des catégories avec une image de fond en haut et en bas ainsi qu'une structure précise à l'intérieur des sous-forums (cf le shéma ci-dessous). Je vous remercie infiniment d'avance pour l'aide précieuse que vous voudrez bien m'apporter ! :)


    Schéma(s) et Eléments


    Schémas :
    Spoiler:

    Voici le lien de mon forum : http://valarmorghulis.forumpro.fr/
    Tailles des éléments : Mon forum est 70%
    Effets voulus : Je voudrais bien des arrondis sur les contours des catégories si possible
    Version de votre forum : PHPBB2


    Ressources


    Je ferai moi-même les graphismes pour les images des catégories, ne vous embêtez pas !


    Autres précisions ?


    Si possible, je souhaiterai ne mettre uniquement que l'image qui sera en fond du titre de la catégorie. Comme ça, le titre des catégories sera géré par le fofo directement (et je n'aurai pas besoin de faire 36 bannières différentes pour tous les titres)

    avatar
    Flower_*
    FémininAge : 22Messages : 598

    le Jeu 8 Juin 2017 - 13:00

    Bonjour :)
    Je me permets de te laisser un petit message, car les images (https://i58.servimg.com/u/f58/19/28/96/11/tynog810.png) que tu as mis en haut de catégorie viennent de mon forum, ESPRIT SAUVAGE (fiche de publicité ici : http://www.never-utopia.com/t62113-esprit-sauvage-9790-loup-garous-norvege-non-tw).
    Je te prierai de bien vouloir les retirer, étant donné qu'elles ne sont pas ta propriété (elles ont été graphé par une amie, spécialement pour le forum), il faut donc lui demander pour les réutiliser.

    Merci d'avance et bon courage pour ta commande.
    Bonne journée.
    avatar
    Jujudu44
    FémininAge : 29Messages : 57

    le Jeu 8 Juin 2017 - 22:31

    Bonjour !

    Oui, ne t'en fais pas, je ne me permettrai sûrement pas de les laisser, c'était juste pour voir ce que ça donnait, je les supprime de ce pas ! Je ne comptais pas les laisser !

    Désolée pour le dérangement !
    avatar
    reshiram44
    MasculinAge : 19Messages : 353

    le Dim 11 Juin 2017 - 13:16

    as tu des images précises à mettre en haut et en bas ?



    avatar
    reshiram44
    MasculinAge : 19Messages : 353

    le Dim 11 Juin 2017 - 13:51

    Bon c'est pas très esthétique mais est ce que ce serait ça que tu souhaiterias ?

    regarde forum test catégorie :
    http://dreamforcetest12.forumactif.org/



    avatar
    Jujudu44
    FémininAge : 29Messages : 57

    le Lun 12 Juin 2017 - 9:32

    Oups, désolée, je n'avais pas vu ton message !

    Oui, dans l'idée ce serait exactement ça !!! :)
    avatar
    reshiram44
    MasculinAge : 19Messages : 353

    le Lun 12 Juin 2017 - 16:51

    Je change rien ?



    avatar
    Jujudu44
    FémininAge : 29Messages : 57

    le Lun 12 Juin 2017 - 18:17

    Non, ça me parait nickel !
    avatar
    reshiram44
    MasculinAge : 19Messages : 353

    le Lun 12 Juin 2017 - 18:58

    code css :
    Code:

    /* BLOC TITRE CATEGORIE */
    .tleCAT{
    margin:5px auto 0; width:800px; padding:25px 0; text-align:center;
    background-image:url(http://www.wallfizz.com/nature/montagne/2647-montagne-WallFizz.jpg);/* MODIFIABLE */
    }
    /* TITRE CATEGORIE */
    .tleCAT h2{
    margin:0;
    font-size:32px; text-transform:uppercase; letter-spacing:3px;
    font-family:Arial; color:white; /* MODIFIABLE */
    }
    /* BLOC CATEGORIE */
    .mdlCAT {
    margin:auto; width:800px; padding:20px 0 5px;
    background:#3a3a3a; /* MODIFIABLE */
    }
    /* BAS CATEGORIE */
    .btmCAT {
    margin:auto; margin-bottom:10px; width:800px; height:35px;
    background-image:url(http://www.wallfizz.com/nature/montagne/2647-montagne-WallFizz.jpg);/* MODIFIABLE */
    }
    /* BLOC FORUM */
    .blocFRM{
    width:800px; margin:auto; text-align:center;
    }
    /* BLOC TITRE FORUM */
    .tleFRM {
    margin:auto; width:725px; padding:10px 0 10px 25px;
    text-transform:uppercase; text-align:left;
    background:black; /* MODIFIABLE */
    transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
    }
    /* TITRE FORUM */
    .tleFRM a{
    color:white !important; /* MODIFIABLE */
    }
    /* SURVOL TITRE FORUM */
    .tleFRM:hover {
    padding-left:65px; width:685px; font-weight:bold;
    }
    /* BLOC DERNIER MESSAGE / AVATAR DERNIER POSTEUR / DESCRIPTION / SOUS-FORUMS */
    .FRM {
    margin:auto; margin-bottom:15px;
    width:730px; height:100px; padding:10px 10px 15px;
    background:rgba(0,0,0,0.5); /* MODIFIABLE */
    }
    /* DERNIER MESSAGE FORUM */
    .lmsgFRM {
    display:inline-block; vertical-align:top;
    width:155px; height:93px; padding:7px 5px 0;
    text-align:center; font-size:10px; border:2px solid;
    background-color:rgba(250,250,250,0.6); border-color:rgba(250,250,250,0.3); /* MODIFIABLE */
    }
    /* ICÔNES FORUM */
    .imgFRM{
    margin-top:8px;
    width:150px; height:35px;
    }
    /* NOMBRE SUJETS & MESSAGES FORUM */
    .nbFRM {
    position:absolute; margin-top:-35px; margin-left:2px;
    width:150px; height:25px; padding-top:10px; font-size:9px;
    background:rgba(0,0,0,0.8); color:white; /* MODIFIABLE */
    opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease;
    }
    .nbFRM:hover {
    opacity:1;
    }
    /* BLOC AVATAR DERNIER POSTEUR FORUM */
    .avaFRM {
    display:inline-block; vertical-align:top; margin:0 10px;
    width:50px; height:100px; overflow:hidden; border:2px solid;
    background:#ccc; border-color:rgba(250,250,250,0.3); /* MODIFIABLE */
    }
    .avaFRM img {
    height:100px;
    }
    /* DESCRIPTION FORUM */
    .descFRM {
    display:inline-block;
    width:295px; height:90px; padding:5px; overflow:auto;
    font-size:10px; text-align:justify; border:2px solid;
    background:rgba(250,250,250,0.3); border-color:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
    }
    /* BLOC IMAGE DESCRIPTIVE & SOUS-FORUMS */
    .sfFRM {
    display:inline-block; margin-left:10px;
    width:160px; height:100px; overflow:hidden; border:2px solid;
    background:#ccc; border-color:rgba(250,250,250,0.3); /* MODIFIABLE */
    }
    /* IMAGE DESCRIPTIVE FORUM */
    .descFRM img {
    position:absolute; margin-left:314px; margin-top:-5px;
    width:160px; height:100px;
    }
    .sfFRM div {
    position:relative;
    width:160px; height:100px; overflow:hidden;
    }
    /* CONTENU SOUS-FORUMS */
    .sfFRM div div{
    width:150px; height:90px; padding:5px; overflow:auto;
    text-align:left; font-size:11px;
    background:#191919; /* MODIFIABLE */
    transform:translateX(160px); -webkit-transform:translateX(160px);
    transition:all .65s linear; -webkit-transition:all .65s linear;
    }
    .sfFRM:hover div div{
    transform:translateX(0px); -webkit-transform:translateX(0px);
    }
    /* LIENS SOUS-FORUMS */
    .sfFRM a{
    color:white !important; /* MODIFIABLE */
    }

    Template Index-Box
    Code:
    <table width="800px" 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="tleCAT">{catrow.tablehead.L_FORUM}</div>
        <div class="mdlCAT"><!-- END tablehead -->

        <!-- BEGIN cathead -->
        <!-- END cathead -->
       
        <!-- BEGIN forumrow -->
        <div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="FRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="nbFRM">{catrow.forumrow.TOPICS} S. & {catrow.forumrow.POSTS} M.</div></div><div class="avaFRM"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM"><div><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div></div> 
        <!-- END forumrow -->
       
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </div>
        <div class="btmCAT"></div>
        <!-- END tablefoot --><!-- END catrow -->



    avatar
    Jujudu44
    FémininAge : 29Messages : 57

    le Lun 26 Juin 2017 - 17:50

    Merci beaucoup !

    Je viens d'installer ça, par contre c'est normal que l'image du haut n'apparaisse pas ?
    avatar
    Onyx
    FémininAge : 23Messages : 3049

    le Jeu 17 Aoû 2017 - 5:19

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
    Attention, l'absence de réponse à ce message entraînera l'archivage du topic d'ici 10 jours.



    Contenu sponsorisé


      La date/heure actuelle est Jeu 23 Nov 2017 - 17:26