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.

-60%
Le deal à ne pas rater :
OtterBox – Batterie externe avec chargement sans fil Qi 15000 mAh ...
19.99 € 49.99 €
Voir le deal

    New York in pink & gray - Personnalisable

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Jeu 27 Nov 2014 - 19:08

    Rappel du premier message :




    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
    Snape.
    Snape.
    FémininAge : 27Messages : 55

    Lun 1 Juin 2015 - 0:12

    c'est beau merci !



    New York in pink & gray - Personnalisable - Page 6 Tumblr_mqz0udGEEI1sx2peuo4_250New York in pink & gray - Personnalisable - Page 6 Tumblr_mqz0udGEEI1sx2peuo6_250
    Shakespeare
    Shakespeare
    FémininAge : 34Messages : 110

    Mar 2 Juin 2015 - 11:32

    ooh, merci du partage !
    Black Moon
    Black Moon
    FémininAge : 29Messages : 108

    Mer 3 Juin 2015 - 17:45

    Nice !
    Malice1329
    Malice1329
    FémininAge : 36Messages : 81

    Ven 5 Juin 2015 - 17:22

    C'est tout simplement sublime ^^



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    Dark Dream
    Dark Dream
    FémininAge : 32Messages : 79

    Sam 6 Juin 2015 - 18:03

    merci ♥
    picka234
    picka234
    FémininAge : 59Messages : 636

    Mer 10 Juin 2015 - 17:57

    merci
    Wolfstar
    Wolfstar
    FémininAge : 30Messages : 13

    Dim 14 Juin 2015 - 1:47

    C'est trop bien, merci beaucoup ! Very Happy
    avatar
    Hinate-Chan
    FémininAge : 29Messages : 44

    Dim 14 Juin 2015 - 11:18

    Merci ! Les couleurs pastels sont juste trop belle *w*
    orion.
    orion.
    FémininAge : 28Messages : 107

    Dim 14 Juin 2015 - 23:39

    C'est vraiment super, merci !
    Didi1991
    Didi1991
    FémininAge : 33Messages : 29

    Mer 17 Juin 2015 - 17:05

    Très jolie :)
    poussette59
    poussette59
    FémininAge : 39Messages : 178

    Jeu 18 Juin 2015 - 11:45

    bon et bien on va testé ça !! mercii
    pizi
    pizi
    FémininAge : 36Messages : 584

    Jeu 18 Juin 2015 - 14:42

    Très joli bravo :)



    New York in pink & gray - Personnalisable - Page 6 EYh8XMq
    avatar
    Drogba JR
    MasculinAge : 32Messages : 90

    Sam 20 Juin 2015 - 10:37

    merci
    g93
    g93
    MasculinAge : 37Messages : 67

    Mar 23 Juin 2015 - 13:18

    merci
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Sam 27 Juin 2015 - 17:53

    wow c'est très beau, merci. Very Happy
    Atomixy
    Atomixy
    MasculinAge : 28Messages : 28

    Sam 27 Juin 2015 - 20:17

    Merci !!!
    Nutop
    Nutop
    FémininAge : 22Messages : 254

    Dim 28 Juin 2015 - 19:22

    Très joli :3




    New York in pink & gray - Personnalisable - Page 6 Mini_597402Sceaufinal

    Pensées
    Pensées
    FémininAge : 79Messages : 41

    Lun 29 Juin 2015 - 19:40

    Merci, c'est super joli! :hug:
    сhampi
    сhampi
    FémininAge : 26Messages : 151

    Lun 6 Juil 2015 - 18:46

    Sublime, Dieu o/ :love:

    Je te l'emprunte (: !
    Lauria
    Lauria
    FémininAge : 23Messages : 39

    Dim 12 Juil 2015 - 19:37

    Merci beaucoup !
    Neiko Seiteki
    Neiko Seiteki
    MasculinAge : 28Messages : 44

    Ven 17 Juil 2015 - 22:00

    Merci !
    Satiine
    Satiine
    FémininAge : 37Messages : 11

    Sam 18 Juil 2015 - 18:30

    Quel magnifique travail ! Bravo pour ce résultat sublime ! *_*
    Vee
    Vee
    FémininAge : 25Messages : 24

    Sam 18 Juil 2015 - 18:36

    Très sympas merci !
    iOS47
    iOS47
    MasculinAge : 25Messages : 23

    Dim 19 Juil 2015 - 15:56

    magnifique, merci beaucoup
    cathou900
    cathou900
    FémininAge : 32Messages : 25

    Ven 24 Juil 2015 - 2:20

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 22:17