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 : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

    Page d'accueil "Mozaik", personnalisable (CSS only)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 26 Oct 2012 - 16:56

    Bonjour !

    Voici une seconde mise en forme de page d'accueil très complète que vous n'avez plus qu'à remplir et modifier à votre goût (couleurs essentiellement). C'est une page d'accueil très condensée donc parfaite pour un forum déjà lourd ou long. En 650px de largeur par 240px de hauteur vous aurez le contexte, les news, le staff, les prédéfinis, les top site, partenaires, et les crédits. En sachant bien entendu que vous pouvez adapter les contenus à votre forum très facilement.

    Voici un aperçu de la page d'accueil dont je vais vous fournir les codes :

    LIEN FORUM TEST

    Il s'agit de la seconde mise en forme, celle comportant juste avant le titre "Page d'accueil "Mozaik" (aperçu du tutoriel)".
    Vous pouvez constater qu'il y a énormément d'animations, elles sont réalisées seulement à l'aide du css donc aucun javascript n'est présent dans ce tutoriel. Le css est par contre assez long.

    Le HTML :

    Code:
    <div id="mozaik"><div id="mozaik_top">
    <span class="mozaik_titretop"><img src="http://img15.hostingpics.net/pics/612828topsite.png" alt="Top sites et Partenaires" /></span><div class="mozaik_contenu2">Votez pour nous !<br />
    <a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a>
    <br /><br />
    Nos Partenaires<br />
    <a href="#"><img src="http://media2.paperblog.fr/i/468/4683274/bienvenue-nouvelle-partenaire-house-of-night--L-41CNGx-175x130.jpeg" alt="Nom du forum" /></a><a href="#"><img src="http://4.bp.blogspot.com/-ZYIzBqlG43Y/TrGS0QHf0QI/AAAAAAAAAIs/PzQsIVI3s48/s1600/0000000000000101230110642314831.png" alt="Nom du forum" /></a><a href="#"><img src="http://img11.hostingpics.net/pics/913004Partenaire1.gif" alt="Nom du forum" /></a>
    </div>
    </div><div id="mozaik_credits"><span class="mozaik_titrecredits"><img src="http://img15.hostingpics.net/pics/603093crdits.png" alt="Nos Crédits" /></span><div class="mozaik_contenu3">Nous remercions ...<br /><br />
    Le contexte a été élaboré et rédigé par ..., ... et ... sous inspiration des oeuvres de ...<br />
    Le graphisme du forum a été réalisé par ... <br />
    Le codage a pu être mis en place grâce à ..., avec l'aide de ... <br />
    Cette page d'accueil a été réalisée par Sparrow-style, prise sur <a href="http://www.never-utopia.com">Never-Utopia</a>.<br /><br />
    (c) merci de respecter le travail de ces personnes. </div>
    </div><div id="mozaik_accueil"><div id="mozaik1"><div class="mozaik_titre1"></div><div class="mozaik_contenu"><img src="http://24.media.tumblr.com/tumblr_m2pft6YL5K1qhyiolo1_500.gif" alt="" class="mozaik_illu" />Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.
    <br /><br />
    Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</div>
    </div><div id="mozaik2"><div class="mozaik_titre2"></div><div class="mozaik_contenu"><div class="mozaik_news"><span class="mozaik_datenews">15/09/2012</span>Contenu nouveauté 1.</div><div class="mozaik_news"><span class="mozaik_datenews">21/09/2012</span>Contenu nouveauté 2.</div><div class="mozaik_news"><span class="mozaik_datenews">4/10/2012</span>Contenu nouveauté 3.</div></div>
    </div><div id="mozaik3"><div class="mozaik_titre3"></div><div class="mozaik_contenu">

    <span class="mozaik_avatar" style="background: url(http://i64.servimg.com/u/f64/09/04/37/22/avata360.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.</span></span>

    <span class="mozaik_avatar" style="background: url(http://img716.imageshack.us/img716/593/garfunkel01.jpg) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span>

    <span class="mozaik_avatar" style="background: url(http://img688.imageshack.us/img688/56/johnnydepp11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span></div></div><div id="mozaik4"><div class="mozaik_titre4"></div><div class="mozaik_contenu">
    <table><tr>
    <td style="vertical-align: top;"><span class="mozaik_predef"><span class="predef_icone"><img src="http://images1.fanpop.com/images/photos/1500000/Johnny-Depp-johnny-depp-1567237-100-100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://www.1001cocktails.com/magazine/wp-content/uploads/johnnydepp_whisky-300x213-1-100x100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://99.mgl.skyrock.net/art/PRIP.84674799.3.0.png" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    </td>
    <td style="vertical-align: top;">
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://a4.img.v4.skyrock.net/0836/72220836/pics/photo_72220836_1.png" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://www.actucine.com/wp-content/uploads/2012/01/Johnny+Deep-100x100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    </td>
    </tr></table>
    </div>
    </div>
    </div></div>


    Le CSS :

    Code:
    /* PAGE ACCUEIL MOZAIK */

    #mozaik
    {
      width: 660px;
      height: 260px;
      margin: auto;
    }
    #mozaik a
    {
      font-weight: bold;
      color: #575757 !important;
      text-decoration: none !important;
    }
    #mozaik a:hover
    {
      color: #3a3a3a;
      text-decoration: none !important;
    }
    #mozaik_top
    {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 238px;
      overflow: hidden;
      margin-top: 10px;
      float: left;
      background: #b9b9b9;
      border: 1px solid #d6d6d6;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_top:hover
    {
      position: relative;
      z-index: 999;
      width: 330px;
      background: #d6d6d6;
      border: 1px solid #e3e3e3;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits
    {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 238px;
      overflow: hidden;
      margin-top: 10px;
      float: right;
      background: #b9b9b9;
      border: 1px solid #d6d6d6;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits:hover
    {
      position: relative;
      z-index: 999;
      width: 330px;
      background: #d6d6d6;
      border: 1px solid #e3e3e3;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titretop
    {
      display: block;
      width: 30px;
      height: 238px;
      float: left;
      overflow: hidden;
      background-color: transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_top:hover .mozaik_titretop
    {
      background-color: #9e9e9e;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titrecredits
    {
      display: block;
      width: 30px;
      height: 238px;
      float: right;
      overflow: hidden;
      background-color: transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits:hover .mozaik_titrecredits
    {
      background-color: #9e9e9e;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_accueil
    {
      width: 600px;
      height: 240px;
      margin: auto;
      padding: 10px;
      text-align: justify;
    }
    #mozaik1
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #c19898;
      border-left: 3px solid #9e3535;
      box-shadow: 0px 0px 0px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik1:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      background: #dcdcdc;
      border-left: 0px solid #9e3535;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #a8b6cc;
      border-right: 3px solid #3b5d94;
      box-shadow: 0px 0px 0px #000000;
      margin-left: 300px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-left: 0px;
      background: #dcdcdc;
      border-right: 0px solid #3b5d94;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #a3c5a5;
      border-left: 3px solid #429046;
      box-shadow: 0px 0px 0px #000000;
      margin-top: 120px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-top: 0px;
      background: #dcdcdc;
      border-left: 0px solid #429046;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #d7d1a0;
      border-right: 3px solid #c7b731;
      box-shadow: 0px 0px 0px #000000;
      margin-left: 300px;
      margin-top: 120px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-left: 0px;
      margin-top: 0px;
      background: #dcdcdc;
      border-right: 0px solid #c7b731;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }

    .mozaik_titre1
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik1:hover .mozaik_titre1
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat #9e3535;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre2
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2:hover .mozaik_titre2
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat #3b5d94;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre3
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3:hover .mozaik_titre3
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat #429046;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre4
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4:hover .mozaik_titre4
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat #c7b731;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }

    .mozaik_contenu
    {
      width: 98%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 160px;
      overflow: auto;
      font-size: 11px;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_contenu2
    {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 220px;
      overflow: auto;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_contenu3
    {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 220px;
      overflow: auto;
      font-size: 11px;
      font-style: italic;
      text-align: left;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_illu
    {
      width: 150px;
      float: left;
      border: 1px solid #ffffff;
      margin: 5px;
    }
    .mozaik_news
    {
      margin: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #3b5d94;
    }
    .mozaik_datenews
    {
      display: inline-block;
      font-size: 12px;
      font-weight: bold;
      color: #3b5d94;
      margin-right: 20px;
    }
    .mozaik_avatar
    {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 80px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #9e9e9e;
      box-shadow: 0px 0px 0px #000000;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(opacity=50);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatar:hover
    {
      position: relative;
      z-index: 999;
      display: inline-block;
      width: 150px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #9e9e9e;
      box-shadow: 0px 0px 5px #000000;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatardescr
    {
      display: block;
      background: url(http://img15.hostingpics.net/pics/301068noir50.png);
      margin-top: 150px;
      height: 150px;
      overflow: auto;
      color: #e4e4e4;
      font-size: 10px;
      line-height: 12px;
      text-shadow: 1px 1px 0px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatar:hover .mozaik_avatardescr
    {
      margin-top: 130px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatardescr:hover
    {
      margin-top: 0px !important;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatartitre
    {
      display: block;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .mozaik_predef
    {
      clear: both;
      display: block;
      height: 60px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_predef:hover
    {
      display: block;
      height: 60px;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_predef a
    {
      text-transform: uppercase;
      color: #52400a !important;
      text-decoration: none !important;
      text-shadow: 1px 1px 0px #ffffff;
    }
    .mozaik_predef a:hover
    {
      text-decoration: none !important;
    }
    .predef_icone
    {
      display: block;
      float: left;
      width: 50px;
      height 50px;
      overflow: hidden;
      margin: 5px;
      border: 2px solid #9e9e9e;
    }
    .predef_icone img
    {
      width: 50px;
    }
    .predef_nom
    {
      display: block;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      color: #937723;
    }


    Les Modifications :

    Pour simplifier les choses j'ai affiché le titre des blocs et des onglets coulissants en image. ainsi, vous pourrez assez facilement réaliser les votres, selon le genre de votre forum. Il suffira de les faire en transparence pour conserver l'effet de transition dans le changement de la couleur de fond du titre.
    Je vous conseille également de garder les mêmes tailles d'image que moi, pour éviter d'avoir à modifier les tailles dans le css.

    Les couleurs sont bien évidemment modifiables dans le css, il peut s'agit de la même couleur pour chaque cadre. Il y a beaucoup de changements de couleur, je vous conseille de faire pour un bloc survolé un fond plus clair que lorsqu'il n'est pas survolé.

    Voici pour vous aider des morceaux de code, ceux correspondant uniquement aux avatars du staff ou aux prédéfinis, si vous souhaitez en ajouter et que vous vous perdez un peu dans les codes :

    Ajouter une news :
    Code:
    <div class="mozaik_news"><span class="mozaik_datenews">15/09/2012</span>Contenu nouveauté 1.</div>

    Ajouter un membre du staff :
    Code:
    <span class="mozaik_avatar" style="background: url(http://img716.imageshack.us/img716/593/garfunkel01.jpg) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span>

    Ajouter un prédéfini :
    Code:
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://images1.fanpop.com/images/photos/1500000/Johnny-Depp-johnny-depp-1567237-100-100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    (Ils sont à ajouter d'un côté ou de l'autre du tableau.)

    Si vous utilisez cette mise en forme, même modifiée, merci de LAISSER LE CREDIT déjà présent dans le code. Que vous réorganisiez tout à l'intérieur c'est une chose, dès lors que vous vous êtes servi du code de base pour démarrer pour avoir sa structure le crédit est mérité me semble-t-il, puisque c'est tout de même une aide apportée, donc il doit être laissé.
    Je vous en remercie par avance x)
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:51, édité 2 fois



    sign
    Lidwynne O'Ahkan
    Lidwynne O'Ahkan
    FémininAge : 27Messages : 15

    Ven 26 Oct 2012 - 17:22

    Quelle belle page d'accueil, simple et efficace. Merci beaucoup pour ce boulot =3.



    Page d'accueil "Mozaik", personnalisable (CSS only) 1217101550BKydxv56
    Shaknoss
    Shaknoss
    MasculinAge : 33Messages : 90

    Ven 26 Oct 2012 - 18:41

    Très jolie !
    Rodrakaset
    Rodrakaset
    FémininAge : 103Messages : 79

    Ven 26 Oct 2012 - 18:53

    Magique magique magique !
    Un énorme merci pour tous tes codes !



    Page d'accueil "Mozaik", personnalisable (CSS only) 1354633509-nez
    CharlyAndLiz
    CharlyAndLiz
    FémininAge : 28Messages : 17

    Lun 5 Mai 2014 - 21:45

    Merci beaucoup pour ces PA :)
    Glotoneria
    Glotoneria
    MasculinAge : 44Messages : 91

    Sam 10 Mai 2014 - 14:54

    Génial, merci !
    Asaoka
    Asaoka
    MasculinAge : 30Messages : 1706

    Sam 10 Mai 2014 - 15:14

    Merci :)



    Ex-Chasseur d'image, ex-Responsable N-U Games.
    Habitant du navire depuis le 07/01/2008

    Page d'accueil "Mozaik", personnalisable (CSS only) 89318_mini_bowser
    Ren haring
    Ren haring
    MasculinAge : 29Messages : 1009

    Dim 11 Mai 2014 - 23:31

    Magnifique page d'accueil. Tu es très douer
    merci pour le partage
    Sokaro
    Sokaro
    FémininAge : 28Messages : 195

    Lun 12 Mai 2014 - 12:59

    Merci beaucoup pour cette zoli page d'accueil! *-*



    Page d'accueil "Mozaik", personnalisable (CSS only) 540068Sokacadre2
    (Signature provisoire.)
    Choubakawa
    Choubakawa
    MasculinAge : 30Messages : 87

    Mar 13 Mai 2014 - 21:29

    Merci :)



    Page d'accueil "Mozaik", personnalisable (CSS only) Witche13
    Moona Neko
    Moona Neko
    FémininAge : 29Messages : 75

    Sam 17 Mai 2014 - 16:18

    Merci Very Happy
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Dim 18 Mai 2014 - 18:12

    ouiii



    Page d'accueil "Mozaik", personnalisable (CSS only) Btqy
    Plume'
    Plume'
    FémininAge : 25Messages : 166

    Dim 18 Mai 2014 - 22:16

    Merci !
    Valhalla
    Valhalla
    MasculinAge : 33Messages : 105

    Mer 21 Mai 2014 - 19:22

    Merci beaucoup :)
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Mer 21 Mai 2014 - 21:42

    Merci !! Very Happy
    Natsu892
    Natsu892
    MasculinAge : 23Messages : 63

    Jeu 22 Mai 2014 - 17:26

    merci



    avatar
    Plumeau
    FémininAge : 28Messages : 30

    Jeu 22 Mai 2014 - 19:28

    Merci !
    avatar
    Puunch
    FémininAge : 31Messages : 18

    Jeu 22 Mai 2014 - 21:17

    très très jolie
    Crystal Shadow
    Crystal Shadow
    FémininAge : 40Messages : 29

    Dim 25 Mai 2014 - 16:19

    Merci beaucoup  Very Happy 
    Novus-RPG
    Novus-RPG
    MasculinAge : 30Messages : 176

    Mar 27 Mai 2014 - 0:34

    Après plusieurs essais je compte opter pour cette page d'accueil simple/épurée/pratique.
    avatar
    Sasuke49
    MasculinAge : 26Messages : 11

    Mar 27 Mai 2014 - 7:29

    Merci beaucoup !
    angy
    angy
    FémininAge : 41Messages : 72

    Mar 27 Mai 2014 - 13:52

    Merci ^^
    Armie
    Armie
    FémininAge : 33Messages : 506

    Mar 27 Mai 2014 - 20:23

    Superbe. *.* Merci.
    avatar
    Luna77100
    FémininAge : 26Messages : 4

    Mar 27 Mai 2014 - 23:10

    Très Jolie, c'est classe , simple et élégant
    avatar
    Golhbul
    MasculinAge : 42Messages : 16

    Jeu 29 Mai 2014 - 9:09

    Il est vraiment sublime... Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:33