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 à ne pas rater :
Enceinte portable JBL Clip 4 Bluetooth Noir à 29€
29 €
Voir le deal

    New York in pink & gray - Personnalisable

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Jeu 27 Nov 2014 - 19:08




    New York in pink & gray - Personnalisable

    Who are you ?
    Bonjour ! Donc ce LS c'est des catégories, il y a une place pévue poru l'affichage de l'avatar du dernier posteur, mais pas de place pour afficher les modérateurs du forum, les images de news / no news / lock font 84 x 192px, et il a tendance à bugger un peu si vous mettez plus de 13 forums dans une même catégorie.
    Aperçu par SooJaeHee - PHPBB2 - police utilisée : Voltaire



    Panneau d'administration

    Pour commencer, rendez vous dans Affichage > Page d'accueil > structure et hiérarchie et cochez séparer les catégories sur l'index: moyen.
    Ensuite, direction Couleurs, et mettez ceci:
    couleur du texte: #7A8088
    couleur des liens: #EBA9AA
    couleur du fond de page: #949494
    couleur intérieure du cadre du forum: #BDC6CB
    et enlevez toutes les autres couleurs, à régler ensuite !


    Templates

    On s'attaque aux templates (vous devez être administrateur pour pouvoir les modifier) ils se trouvent dans affichage > templates > général et celui qui nous intéresse est index_box.

    Au risque de vous faire peur, effacez tout et remplacez-le par ceci: (la version d'origine est toujours accessible, grâce au lien "voir le template par défaut" en bas de la page )
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="titrecategorie"> {catrow.tablehead.L_FORUM} </div>
    <table class="forumline fondcategorie" width="100%" border="0" cellspacing="1" cellpadding="0">   
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <tr>
       
        <!-- BEGIN inc -->
        <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
          <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
          </h{catrow.cathead.LEVEL}>
        </td>
        <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
      </tr>
     
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
              <td class="over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
                <h{catrow.forumrow.LEVEL} class="hierarchy">
                    <div class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                    </div>
                  </h{catrow.forumrow.LEVEL}>
              <div class="boxforum">
                <div class="decoforum"></div>
                <div class="description">
                  <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                  <span class="gensmall">
                    <!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    <span class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                  </span>
                </div>
                <div class="forumdroite">
                <div class="boutonforum">
                  <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                </div>
                  <span class="gensmall">Sujets: {catrow.forumrow.TOPICS} • </span><span class="gensmall">Messages: {catrow.forumrow.POSTS}</span><br />
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                </div>
              </div>
              </td>
       </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Puis validez et publiez votre template.


    CSS

    Enfin, ouvrez la page Affichage > couleurs > feuille de style CSS
    et ajoutez ceci dans votre code, avant de valider.
    Code:
    /*CATEGORIES gris et rose par Alu' pour Never-Utopia*************************************************************************/

    .titrecategorie h2, .titrerose, .forumlink, .forumdroite .gensmall a
    {color:#eba9aa !important;} /*tous les titres en rose*/

    .titrecategorie h2, .titrerose, .forumlink
    {font-family:'Voltaire', Georgia;} /*police des titres*/

    .fondcategorie{background-color:#a0a9b4;/*couleur de fond*/border-radius:15px;padding:25px 25px 0 25px;}/*fond des catégories*/

    .boxforum{
      background:#dce2e5; /*couleur de fond d'une ligne de forum*/
      border-radius:15px;
      height:90px;
      padding:15px;
      margin-bottom:25px;
      position:relative;
    }

    .titrecategorie h2{
      text-align:center;
      font:90px;
      font-variant:small-caps;
      text-shadow: 6px 0px 0 #7a8088;/*couleur de l'ombre du texte*/
      margin:0;
    }
    .titrerose{
      font:20px;
      text-decoration:underline;
      font-variant:small-caps;
    }

    .description{
      padding:3px 10px 10px;
      width:300px;
      height:70px;
      border-radius: 15px;
      border: 1px dotted #7a8088;/*couleur de la bordure en pointilles*/
      float:left;
      position:relative;
      overflow:auto;
    }
    .sousforum{
      position:absolute;left:0; top:63px;
      display:block;
      height:1em;
      width:100%;
      text-align:center;
      font:Georgia;
      font-variant:small-caps;
    }
    .description span{color:#7a8088;font-size:12px;} /*texte de la description d un forum*/

    .forumlink{
      font:65px;
      font-variant:small-caps;
      margin:0 auto;
      text-align:center;
      text-shadow: 5px 0px 0 #7a8088;/*couleur de l'ombre du texte*/
      position:relative;
      z-index:1;
    }
    .forumdroite{
      position:relative;
      overflow:hidden;
      width:170px;
      height:60px;
      padding:10px;
      margin: auto 0 auto auto;
    }
    .forumdroite .gensmall{color:#949494; font-size: 11px;}/*texte sous l'image no news*/
    .forumdroite .gensmall a{font-variant:small-caps;font-size:12px; text-shadow: 1px 0px 0 #7a8088;/*couleur de l'ombre du texte*/}

    .boutonforum{
      position:absolute;top:0;left:0;
      -webkit-transition:all 0.4s;
      -moz-transition:all 0.4s;
      -o-transition:all 0.4s;
      -ms-transition:all 0.4s;
      transition:all 0.4s;
    }

    .forumdroite:hover > .boutonforum{top:-100%;}



    .fondcategorie tr:nth-of-type(2) .boxforum .decoforum,
    .fondcategorie tr:nth-of-type(4) .boxforum .decoforum,
    .fondcategorie tr:nth-of-type(6) .boxforum .decoforum,
    .fondcategorie tr:nth-of-type(8) .boxforum .decoforum,
    .fondcategorie tr:nth-of-type(10) .boxforum .decoforum,
    .fondcategorie tr:nth-of-type(12) .boxforum .decoforum {
      background-image:url(http://image.noelshack.com/fichiers/2014/48/1416839340-1416062066-ville1-copie.png)!important;
      background-position:bottom right;
    }
    .decoforum{
      position:absolute;
      top:-39px;
      left:0;
      height:40px;
      width:100%;
      background-image:url(http://image.noelshack.com/fichiers/2014/46/1416062066-ville2.png);
      background-repeat:no-repeat;
      background-position:bottom left;
      z-index:0;
    }

    .lastpost-avatar img {
      height:42px;
      width:auto;
      border:3px solid #a0a9b4;/*couleur de la bordure autour du mini avatar*/
      margin-right:4px;
    }
    /*fin des categories *********************************************************************************/

    Je précise que le CSS est légendé pour que vous puissiez changer les couleurs sans trop de difficultés !
    Voilà, tout devrait être bon ! Ce serait sympa de mettre un crédit à Never-Utopia sur votre forum, ça ne coûte pas grand-chose !

    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    Alumine
    Angy38
    Angy38
    FémininAge : 54Messages : 233

    Jeu 27 Nov 2014 - 21:20

    Elle est magnifique ! Bravo à toi !



    New York in pink & gray - Personnalisable Jvie
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Ven 28 Nov 2014 - 2:09

    Elle sont simplement sublime félicitation Very Happy



    :heart: :heart:
    Anonymous
    Invité

    Ven 28 Nov 2014 - 14:23

    Très sympa comme d'hab' Alu' !
    Merci du partage Wink
    ClaryF
    ClaryF
    FémininAge : 34Messages : 138

    Ven 28 Nov 2014 - 19:10

    Je trouve ça très sympa ! Je vais voir si peut convenir pour chez moi xD & bien entendu je crédite !
    SooJaeHee
    SooJaeHee
    FémininAge : 29Messages : 50

    Ven 28 Nov 2014 - 22:29

    Merci ! :)
    sica3
    sica3
    MasculinAge : 51Messages : 135

    Sam 29 Nov 2014 - 1:10

    thank's
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Sam 29 Nov 2014 - 10:24

    Très sympas! Merci du partage ♥
    Neko Mimi
    Neko Mimi
    FémininAge : 34Messages : 165

    Sam 29 Nov 2014 - 14:29

    J'aime beaucoup *w*



    New York in pink & gray - Personnalisable Tumblr_me5uxaCZuJ1qj73e2o1_500
    Rodeuse
    Rodeuse
    FémininAge : 31Messages : 142

    Sam 29 Nov 2014 - 16:48

    J'adore *-*
    Noburnak
    Noburnak
    MasculinAge : 31Messages : 25

    Sam 29 Nov 2014 - 18:12

    Merci bien ^w ^
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Dim 30 Nov 2014 - 21:43

    Merci :)
    Zibeline
    Zibeline
    FémininAge : 39Messages : 84

    Lun 1 Déc 2014 - 14:55

    J'adore. Merci pour ce merveilleux partage. :love:
    webs
    webs
    MasculinAge : 31Messages : 1097

    Lun 1 Déc 2014 - 18:51

    mercii



    New York in pink & gray - Personnalisable Img-0107360bb1h
    DixieM.
    DixieM.
    FémininAge : 33Messages : 49

    Mar 2 Déc 2014 - 17:15

    C'est juste trop beau :love: Merci du partage !
    Féhéla
    Féhéla
    FémininAge : 51Messages : 238

    Mar 2 Déc 2014 - 18:36

    Je n'ai qu'une chose à dire : J'ADORE :love: Merci !
    plushmasters
    plushmasters
    FémininAge : 32Messages : 71

    Mer 3 Déc 2014 - 14:50

    sublime
    MOON LEE
    MOON LEE
    FémininAge : 30Messages : 149

    Jeu 4 Déc 2014 - 16:45

    Super :)
    Mercii ^^
    Banpaia
    Banpaia
    FémininAge : 27Messages : 130

    Ven 5 Déc 2014 - 15:17

    Merci !
    narakye
    narakye
    FémininAge : 30Messages : 503

    Dim 7 Déc 2014 - 12:42

    Elle est vraiment magnifique =) bravo
    cali60
    cali60
    FémininAge : 39Messages : 58

    Dim 7 Déc 2014 - 15:54

    merci :)
    Susan Storm
    Susan Storm
    FémininAge : 45Messages : 78

    Dim 7 Déc 2014 - 16:00

    Mercii ! Very Happy
    .SaKou.
    .SaKou.
    FémininAge : 28Messages : 57

    Dim 7 Déc 2014 - 18:39

    Merci



    New York in pink & gray - Personnalisable 1351184429-smile
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 33Messages : 131

    Lun 8 Déc 2014 - 9:24

    Miciiiiiiii <3




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    Amber's
    Amber's
    FémininAge : 24Messages : 158

    Lun 8 Déc 2014 - 11:53

    Merci owo
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 8:54