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.


    PA Simple, Grise et Epurée

    Kanae
    Kanae
    FémininAge : 27Messages : 354

    le Ven 4 Nov 2016 - 8:26

    Rappel du premier message :

    Page d'Accueil Simple, Grise et Epurée



    Bonjour !

    Voici une page d'accueil pour compléter le thème "Simple, Gris et Epuré".


    Petit aperçu :
    Cliquez ici


    Parce qu'il s'agit d'un travail regroupant plusieurs éléments, vous pouvez aller voir la Fiche de Présentation, ainsi que la Fiche de Liens que j'ai codées dans le même genre.

    N'hésitez pas non plus à jeter un oeil à l'excellent travail d'Halloween qui a répondu à l'une de mes demandes et a confectionné un superbe QEEL qui s'inscrit dans le même design.



    L'installation de cette PA vous demandera de copier un code dans la page consacrée à la PA dans le panneau d'administration de votre forum, mais de toucher également au CSS du forum.

    De plus, Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.



    J'ai fait le choix de vous proposer cette PA sans hide, mais un petit mot gentil ou une critique constructive seront très appréciés ! N'hésitez surtout pas à donner votre avis et à critiquer cette proposition ! J'aimerais recevoir des commentaires constructifs pour m'aider à m'améliorer, alors un grand merci à ceux qui prendront le temps de le faire Very Happy ! Merci également de ne pas retirer les crédits.



    Code de la PA à insérer directement dans la partie dédiée dans le panneau d'administration :



    Code:
    <div style="width: 790px; background-color: #E4E4E4;">
       <div style="border-top: 2px solid #B0C3AB;" class="fond_entete">
          <div style="margin-top: -3px; text-align: center;" class="bloc_guillemet">
    <strong>“</strong><span style="color: #1C3734; font-variant: small-caps; letter-spacing: 2px">Votre Titre qui Claque !</span>
          </div>
       </div>
       <table style="margin-top: 40px;">
          <tbody>
             <tr>
                <td>
                   <div style="margin: 0 0 -28px 50px;" class="titre_1">
    Contexte
                   </div><br />
                   <div class="fond_2">
    <br />
                      <div style="margin: -3px 20px 0 20px;" class="style_2">                                                                                                                                                                                                                                                                                                                                                                               
                      </div>
                      <div style="margin: 0px 20px 0 20px; width: 240px;" class="style_1">
                      </div>

    <br />
                      <div style="width: 215px; height: 322px; margin: 0 20px 0 20px; text-align: justify;" class="fond_3">

    <span style="font-family: calibri; font-size: 11px;"></span>
                         <div style="text-align: center; font-family: calibri; font-size: 11px;">
    Phrase d'accroche de votre contexte
                         </div><span style="font-family: calibri; font-size: 11px;"><br />Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare."<br /></span>
                         <div style="font-family: calibri; font-size: 11px; text-align: center;">
    Petite phrase de fin interrogative qui tue ?
                         </div><span style="font-family: calibri; font-size: 11px;"><br /><a style="font-size: 11px ;" href="lien vers le sujet" class="bloc_more">more...</a><br /></span>
                      </div>
                   </div>
                </td>
                <td>
                   <div style="margin: 0 0 -28px 40px;" class="titre_1">
    Nouvelles
                   </div><br />
                   <div style="margin: 0;" class="fond_2">
    <br />
                      <div style="margin: -3px 20px 0 20px;" class="style_2">
                      </div>
                      <div style="margin: 0px 20px 0 20px; width: 200px;" class="style_1">
                      </div><br />
                      <div style="width: 175px; height: 80px; margin: 0 20px 0 20px;" class="fond_3 news">
                         <div class="news_img">
                         </div>
                         <div class="news_bloc">
                            <div style="padding: 13px 10px 10px 10px;">
    <span class="date">24.11</span> <span class="objet">• Construction •</span><br /><span style="font-family: calibri; font-size: 11px;">Installation des images du forum, proposition de bannière, correction de la barre de navigation, correction du QEEL</span><br /><br /><br />  <span class="date">23.11</span> <span class="objet">• Construction •</span><br /><span style="font-family: calibri; font-size: 11px;"> Ajout des descriptions des trois premières catégories du forum et suggestions des nomenclatures</span><br /><br /><br /> <span class="date">01.11</span> <span class="objet">• Codage •</span><br /><span style="font-family: calibri; font-size: 11px;"> Optimisation des catégories et suggestions de titres.</span><br /><br /><br />
                            </div>
                         </div>
                      </div>
                   </div><br />
                   <div style="margin: 15px 0 -28px 40px;" class="titre_1">
    Navigation
                   </div><br />
                   <div style="margin: 0;" class="fond_2">
                      <br />
                      <div style="margin: -3px 20px 0 20px;" class="style_2"></div>
                      <div style="margin: 0px 20px 0 20px; width: 200px;" class="style_1"></div>
                      <br />                                                                                                                                                                                                                     
                      <div class="fond_6">
                         <div style="line-height: 14px;">
    <a href="lien vers le sujet" class="bloc_lien">Règlement</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Contexte</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Groupes</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Présentations</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Partenariats</a>
                         </div>
                      </div>
                   </div>
                </td>
                <td>
                   <div style="margin: 0 0 -28px 50px;" class="titre_1">
                      Staff
                   </div><br />
                   <div class="fond_2" style="width: 215px;">
                      <br />

                      <div class="style_2" style="margin: -3px 20px 0 20px; width: 175px;"></div>
                      <div class="style_1" style="margin: 0px 20px 0 20px; width: 175px;"></div>
                      <br />
                      <div style="padding: 0 10px 0 10px;">
                         <div class="staff">
    <img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
                            <div class="bulle_staff">
                               <div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
    <br /><span style="font-size: 11px;" class="objet">Hugo Johnson</span><br /><span style="font-size: 12px;" class="date">Admin</span>
                               </div>
                            </div>
                         </div>
                                                                                                                                                                                                                                                                                                    
                         <div class="staff">
    <img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
                            <div class="bulle_staff">
                               <div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
    <br /><span style="font-size: 11px;" class="objet">Nom</span><br /><span style="font-size: 12px;" class="date">Rang</span>
                               </div>
                            </div>
                         </div>
                                                                                                                                                                                                                                                                                                                
                         <div></div>
                                                                                                                                                                                                                                                                                                                
                         <div class="staff" style="margin-top: 10px;">
    <img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
                            <div class="bulle_staff">
                               <div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
    <br /><span style="font-size: 11px;" class="objet">Nom</span><br /><span style="font-size: 12px;" class="date">Rang</span>
                               </div>
                            </div>
                         </div>
                         <div class="staff" style="margin-top: 10px;">
    <img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
                            <div class="bulle_staff">
                               <div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
    <br /><span style="font-size: 11px;" class="objet">Nom</span><br /><span style="font-size: 12px;" class="date">Rang</span>
                               </div>
                            </div>
                         </div>

                      </div>
                   </div><br />
                   <div style="margin: 0 0 -28px 50px;" class="titre_1">
    Prédéfinis
                   </div><br />
                   <div style="padding: 0 20px 20px 20px; width: 175px;" class="fond_2">
    <br />
                      <div class="style_2" style="margin: -3px 20px 0 0px; width: 175px;"></div>
                                                                               
                      <div class="style_1" style="margin: 0px 20px 0 0px; width: 175px;"></div>
    <br />
                      <marquee onmouseout="this.start();" onmouseover="this.stop();" scrollamount="2">
    <a href="lien"><img class="img_80" src="url" /></a> <a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a><a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a><a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a><a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a>
                      </marquee><a href="lien vers le sujet" class="bloc_more">more</a>
                   </div>
    </td></tr></tbody></table>
       <div style="border-bottom : 2px solid #DFDFDF;" class="fond_5">
          <table>
             <tbody>
                <tr>
                  <td>
                      <div style="margin: 0 0 -28px 40px;" class="titre_1">
    Top-sites                                                                                                                                                                                                                     
                      </div><br />
                      <div style="margin: 0 5px 0 0; width: 380px;" class="fond_2">
    <br />
                        <div class="style_2" style="margin: -3px 20px 0 20px;"></div>
                        <div class="style_1" style="margin: 0px 20px 0 20px; width: 340px;"></div><br />
                        <div style="text-align: center;">
    <a href="lien"><img style="margin-left: 20px;" class="img_ts" src="url" /></a><a href="lien"><img class="img_ts" src="url" /></a><a href="lien"><img style="margin-right: 20px;" class="img_ts" src="url" /></a>
                        </div>
                      </div>
                  </td>
                   <td style="margin-left: 30px;">
                      <div style="margin: 0 0 -28px 50px;" class="titre_1">
    Partenaires
                      </div><br />                                                                                                                                                                                                                   
                      <div style="width: 350px; text-align: center; margin-right: 20px;" class="fond_2">
    <br />
                         <div class="style_2" style="margin: -3px 20px 0 20px;"></div>
                         <div class="style_1" style="margin: 0px 20px 0 20px; width: 310px;"></div>
    <br />
                         <div style="text-align: center;">
    <a href="lien"><img style="margin-left: 10px;" class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a>
                         </div>
                      </div>
                   </td>
                </tr>
             </tbody>
          </table><a href="http://www.never-utopia.com" style="margin-left: 660px;" class="bloc_credit">© Never-Utopia</a>   
          <div style="margin-left: 665px; font-size: 10px; font-family: arial narrow; color: #BEBEBE;">
                 Kanae   
          </div>                                                           
       </div>                                                                                                 
    </div>




    Code CSS à insérer dans la feuille CSS de votre forum :



    Rappel :Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.

    De plus, j'y ai également inséré le code permettant de changer la couleur des liens URL et leur animation. Cette modification sera valable pour l'ensemble de votre forum alors soyez vigilants si vous ne souhaitez pas l'installer.


    Code:
    /*********LIENS URL**************/

    a
    {
      text-decoration: none !important;
    }
    a:hover
    {
      text-decoration: none !important;
      color: #60425A !important;
    }
    a:link
    {
      text-decoration: none !important;
    }

     /***** PAGE DACCUEIL *****/
    .fond_2
    {
    background-color: #DFDFDF;
    margin-left: 10px;
    padding-bottom: 20px;
    margin-right: 10px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    }
    .fond_3
    {
    background-color: #F0F0F0;
    border: 2px solid #BEBEBE;
    width: 196px;
    height: 152px;
    margin-left : 28px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 10px;
    overflow: auto;
    }
    .titre_1
    {
      margin: 0 0 -24px 80px;
      font-family: georgia;
      font-size: 24px;
      color: #B0C3AB;
    }
    .style_1
    {
    background-color: #B0C3AB;
    width: 100%;
    height: 2px;
    }
    .style_2
    {
    background-color: #8D838D;
    height: 1px;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: -7px;
    }
    .fond_entete
    {
      background-color: #F0F0F0;
      border-top: 4px solid #B0C3AB;
      border-bottom: 2px solid #BEBEBE;
      height: 40px;
      width: 100%;
    }
    .bloc_guillemet
    {
    text-align: right;
    margin-right: 10px;
    margin-top: -24px;
    font-family: georgia;
    font-size: 36px;
    text-shadow: 1px 1px 2px #1A1A1A;
    color: #353535;
    }
    .fond_5
    {
      background-color: #E4E4E4;
      width: 760px;
      margin: auto;
    }
    .fond_6
    {
      background-color: #F0F0F0;
      border: 2px solid #BEBEBE;
      width: 171px;
      height: 135px;
      border-top-left-radius: 15px;
      border-bottom-right-radius: 15px;
      text-align: center;
      margin: 0 20px 0 20px;
      padding: 10px;
      overflow: auto;
    }
    .bloc_lien
    {
      font-size: 12px;
      font-family: georgia;
      color: #879E9B !important;
      font-variant: small-caps;
      font-weight: bold;
    }
    .bloc_more
    {
      text-align: right;
      float: right;
      margin: -3px 20px 0 0;
      font-family: georgia;
      font-variant: small-caps;
      font-size: 14px;
      font-style: italic;
      letter-spacing : 2px; color: #879E9B;
    }
    .img_80
    {
      position: relative;
      width: 80px;
      height: 80px;
      opacity: 1;
      transition: 1s all;
      z-index: 2;
    }
    .staff
    {
      display:inline-block;
      position: relative;
      height: 80px;
      width: 80px;
      margin-left: 10px;
      overflow: hidden;
    }
    .bulle_staff
    {
      position: absolute;
      top: 0; left: 0;
      height: 80px;
      width: 80px;
      overflow: hiden;
    }
    .staff:hover .img_80
    {
    opacity: 0;
    }
    .img_ts
    {
      width: 100px;
      height: 40px;
      margin-right: 10px;
    }
    .img_40
    {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .date
    {
      font-size: 16px;
      font-style: italic;
      font-family: arial narrow;
      color: #95879E;
    }
    .objet
    {
      font-size: 12px;
      font-family: georgia;
      color: #879E9B;
      font-variant: small-caps;
      font-weight: bold;
    }
    .fond_3.news
    {
      position: relative;
      overflow: hidden;
      padding: 10px;
    }
    .news_img
    {
      background: url(http://nsa33.casimages.com/img/2014/11/24/141124022024156156.png) no-repeat center;
      width: 196px;
      height: 102px;
      position: absolute;
      top: 0; left: 0;
      transition: 1s all;
      z-index: 2;
    }
    .fond_3.news:hover .news_img
    {
      left: 196px;
    }
    .news_bloc
    {
      height: 100px;
      overflow: auto;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .bloc_credit
    {
      margin: -3px 0 0 10px;
      color: #BEBEBE;
      font-size: 10px;
      font-family: arial narrow;
    }

    /***** FIN PAGE DACCUEIL *****/

    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Kanae le Ven 23 Déc 2016 - 9:07, édité 4 fois
    Zibeline
    Zibeline
    FémininAge : 34Messages : 84

    le Dim 3 Sep 2017 - 14:39

    merci pour ce joli partage :yay:
    alex24d
    alex24d
    FémininAge : 31Messages : 95

    le Mer 6 Sep 2017 - 11:04

    merci parfait
    Zuz'
    Zuz'
    FémininAge : 24Messages : 55

    le Ven 15 Sep 2017 - 18:11

    Simple, clair, épuré tout ce que j'aime :)
    Charly0
    Charly0
    Messages : 14

    le Sam 23 Déc 2017 - 23:15

    merci
    Amakhaza
    Amakhaza
    FémininAge : 16Messages : 52

    le Ven 5 Jan 2018 - 19:20

    c'est top je prend
    Missmegy
    Missmegy
    FémininAge : 24Messages : 7

    le Jeu 25 Jan 2018 - 20:51

    C'est une très jolie présentation, sobre et classe. Merci du partage !
    Je vais de ce pas m'y mettre pour le personnaliser pour mon forum :)



    PA Simple, Grise et Epurée - Page 2 121017101557810108
    YasmineH
    YasmineH
    FémininAge : 16Messages : 20

    le Lun 2 Avr 2018 - 18:58

    Merci pour cette magnifique PA :love: :love:
    Lucie-Loue
    Lucie-Loue
    FémininAge : 21Messages : 7

    le Ven 6 Avr 2018 - 14:09

    Merci pour le partage

    EDIT : je viens de tester le code et c'est vraiment superbe, moi qui n'y connait rien en codage, en deux minutes j'ai réussi à tout installer ! c'est épuré comme j'aime, vraiment agréable à regarder, merci beaucoup
    Meiywa
    Meiywa
    FémininAge : 27Messages : 79

    le Lun 11 Juin 2018 - 22:56

    Je trouve le rendu super chouette... Je vais sans doute me laisser tenter (a)
    Réglisse
    Réglisse
    FémininAge : 16Messages : 17

    le Lun 18 Juin 2018 - 18:33

    merci du partage ! :p
    azertyuiop2007
    azertyuiop2007
    FémininAge : 17Messages : 4

    le Mar 26 Juin 2018 - 19:10

    Coucou !

    Je prends ça pour mon fofo ! Elle est magnifique, super simple à remplir, elle esy parfaite ! C'est exactement ce que je cherchais ! Merci !
    Nyash
    Nyash
    FémininAge : 33Messages : 36

    le Jeu 5 Juil 2018 - 11:22

    merci beacoup
    destiel.forever
    destiel.forever
    FémininAge : 28Messages : 4

    le Sam 14 Juil 2018 - 19:08

    merci
    Silver Blast
    Silver Blast
    MasculinAge : 19Messages : 74

    le Mar 31 Juil 2018 - 16:51

    Merci♥ c'est superbe!
    Litalis
    Litalis
    MasculinAge : 23Messages : 27

    le Ven 17 Mai 2019 - 22:51

    Merci du partage :)
    Noir Black
    Noir Black
    FémininAge : 33Messages : 42

    le Mer 3 Juil 2019 - 15:55

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Juil 2019 - 1:14