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 : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

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

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

    Ven 26 Oct 2012 - 16:56

    Rappel du premier message :

    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
    avatar
    SinoJak
    MasculinAge : 22Messages : 44

    Lun 10 Nov 2014 - 22:49

    Superbe
    EAVENN
    EAVENN
    FémininAge : 27Messages : 162

    Mar 11 Nov 2014 - 14:42

    Merci !
    avatar
    Del
    MasculinMessages : 110

    Mar 11 Nov 2014 - 20:38

    Merci.



    « Run you clever boy and remember... »
    Sensatiion
    Sensatiion
    FémininAge : 32Messages : 15

    Mar 11 Nov 2014 - 22:38

    J'adore
    Pwaar
    Pwaar
    FémininAge : 29Messages : 107

    Mer 12 Nov 2014 - 16:29

    Comme tu l'as très bien dit épuré et esthétique. Merci beaucoup du partage *^* ♥
    Hyuna
    Hyuna
    FémininAge : 26Messages : 98

    Dim 30 Nov 2014 - 17:54

    Marchiiiii
    Tanchi
    Tanchi
    Age : 32Messages : 373

    Ven 5 Déc 2014 - 15:15

    Merci du partage x)



    Page d'accueil "Mozaik", personnalisable (CSS only) - Page 8 335854plop
    avatar
    Lucrèce
    FémininAge : 34Messages : 68

    Ven 12 Déc 2014 - 15:52

    Merci beaucoup !
    No'Oz
    No'Oz
    FémininAge : 22Messages : 88

    Sam 13 Déc 2014 - 17:29

    Magiquement et féériquement magnifique, thanks !
    Aubynette
    Aubynette
    FémininAge : 22Messages : 25

    Sam 13 Déc 2014 - 18:35

    super.
    Lugatique
    Lugatique
    MasculinAge : 24Messages : 23

    Sam 13 Déc 2014 - 23:26

    merci
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Mer 17 Déc 2014 - 1:55

    Merci !
    Aeeklez
    Aeeklez
    FémininAge : 33Messages : 37

    Jeu 18 Déc 2014 - 14:45

    Merci !
    Chanel.♥
    Chanel.♥
    FémininAge : 23Messages : 42

    Dim 21 Déc 2014 - 19:46

    J'adore !
    Nord
    Nord
    MasculinAge : 24Messages : 169

    Lun 22 Déc 2014 - 18:02

    Très jolie, c'est simple et vraiment classe !
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Lun 22 Déc 2014 - 19:36

    Merci ♥
    Harmonia
    Harmonia
    FémininAge : 26Messages : 110

    Dim 28 Déc 2014 - 22:59

    Jolie *^* owo
    Alyssa.B50
    Alyssa.B50
    FémininAge : 29Messages : 42

    Jeu 1 Jan 2015 - 23:14

    Magnifique page d'acceuil qui va me servir pour mon nouveau forum :)
    yukitg
    yukitg
    FémininAge : 34Messages : 18

    Sam 3 Jan 2015 - 5:39

    Mon dieu, c'est trop fort QAQ Bravo et merci beaucoup pour le partage, je vais essayer de comprendre ça.
    Nezumi-liet
    Nezumi-liet
    FémininAge : 34Messages : 11

    Sam 3 Jan 2015 - 22:48

    Magnifique page, merci ^^
    Romann
    Romann
    FémininAge : 30Messages : 183

    Dim 4 Jan 2015 - 10:32

    Merci !! Very Happy



    Page d'accueil "Mozaik", personnalisable (CSS only) - Page 8 Unicor11
    Leelo
    Leelo
    FémininAge : 32Messages : 157

    Dim 4 Jan 2015 - 15:42

    merci elle est magnifique
    Kinjiro
    Kinjiro
    MasculinAge : 25Messages : 80

    Dim 4 Jan 2015 - 15:50

    Merci :p



    Page d'accueil "Mozaik", personnalisable (CSS only) - Page 8 Signau11
    Okalem
    Okalem
    FémininAge : 23Messages : 63

    Ven 9 Jan 2015 - 18:49

    merci !
    Océ
    Océ
    FémininAge : 49Messages : 363

    Dim 11 Jan 2015 - 11:14

    Merci très belle PA

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 18:43