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

    Partagez
    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Ven 4 Nov 2016 - 8:26

    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
    avatar
    Onyx
    FémininAge : 25Messages : 3139

    le Jeu 22 Déc 2016 - 23:04

    Salut!

    Je pense que tu as créé ta PA en même tant que les autres fiches et que tu avais le CSS de tout au complet, right? Parce que cela ne fonctionne pas vraiment, le rendu est différent et certaines classes qui sont dans la PA ne sont pas dans le CSS (comme ".titre_1").

    Je te laisse faire les corrections parce que ce n'est malheureusement pas utilisable pour le moment ^^


    Edit : Suite aux corrections, je valide ce LS qui sera bientôt déplacé dans la bonne section. Merci de tes efforts Kanae ^^



    avatar
    Hadès.
    MasculinAge : 20Messages : 37

    le Mer 28 Déc 2016 - 3:40

    Hello ! Le rendu est très joli, mais pour ma part ça ne rend pas du tout pareil, tout est en long, décalé, j'ai essayé sur deux forums, le résultat est le même silent
    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Mer 28 Déc 2016 - 7:10

    Bonjour Hadès !

    Merci de signaler le problème même si avec les corrections apportées j'ai du mal à cerner d'où il peut venir. Peux-tu éventuellement faire une capture d'écran et le signaler dans cette partie-ci du forum ou m'envoyer tout simplement un MP ? Je tâcherais de voir d'où vient le bug et de le corriger.

    Ce qui m'étonne c'est que tu dises que les éléments s'étirent en longueur alors qu'ils sont censés être limités soit directement en width soit par des margins/paddings. La seule explication qui me vienne à l'esprit serait que ton forum est plus large que la taille sur laquelle la PA a été initialement conçue, mais même ainsi, ça devrait aller puisque j'ai mis une div qui englobe le tout et avec une largeur fixe... Bref. Quand je verrais de quoi il s'agit, je pourrais mieux cerner ça. Merci à toi !

    avatar
    Kelalin
    FémininAge : 26Messages : 1978

    le Mer 28 Déc 2016 - 10:18

    Merci pour le partage !
    avatar
    Plum
    FémininAge : 52Messages : 21

    le Mar 10 Jan 2017 - 21:11

    Merci
    avatar
    P'tit loup
    MasculinAge : 36Messages : 445

    le Lun 16 Jan 2017 - 19:12

    Merci o/



    avatar
    Kitket
    FémininAge : 35Messages : 100

    le Sam 21 Jan 2017 - 21:59

    MErci
    avatar
    Piratress
    FémininAge : 21Messages : 215

    le Ven 27 Jan 2017 - 9:09

    Merci *w*
    avatar
    M.O
    MasculinAge : 28Messages : 51

    le Sam 28 Jan 2017 - 2:31

    Merci!
    avatar
    Shi
    MasculinAge : 27Messages : 58

    le Sam 28 Jan 2017 - 14:43

    très joli, merci du partage =)
    avatar
    WILDMOON.
    FémininAge : 20Messages : 33

    le Dim 5 Fév 2017 - 0:09

    C'est très joli, merci. ♥
    avatar
    HazelW
    FémininAge : 25Messages : 51

    le Dim 19 Fév 2017 - 16:37

    Merci ! Joli et épuré, j'adore !



    avatar
    Amiko
    FémininAge : 27Messages : 51

    le Dim 19 Fév 2017 - 17:27

    Merci beaucoup !
    avatar
    Zayshin
    FémininAge : 27Messages : 40

    le Sam 4 Mar 2017 - 1:05

    Merci beaucoup pour cette Pa ♥
    avatar
    megb59
    FémininAge : 24Messages : 105

    le Jeu 9 Mar 2017 - 15:09

    Elle est géniale cette PA c'est exactement ce que je cherchais, merci à toi de l'avoir fait et bravo!
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mer 12 Avr 2017 - 12:32

    Merci !
    avatar
    Risa
    FémininAge : 30Messages : 242

    le Mar 25 Avr 2017 - 3:48

    Merci du partage, cette PA est vraiment pratique :)
    avatar
    Sukinette
    FémininAge : 33Messages : 1197

    le Sam 20 Mai 2017 - 12:41

    Merci ♥



      Merci pour les avatars Clémentine & Narakye ♥♥
    avatar
    Kamui Kyuuji
    MasculinAge : 26Messages : 30

    le Dim 21 Mai 2017 - 18:19

    Merci.
    avatar
    Marianinna
    FémininAge : 27Messages : 18

    le Dim 21 Mai 2017 - 22:04

    Merci
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Sam 22 Juil 2017 - 12:54

    Merci pour votre travail !
    avatar
    Patdrue
    FémininAge : 29Messages : 157

    le Ven 28 Juil 2017 - 16:26

    Chouette! Merci!
    avatar
    Jixdu
    FémininAge : 17Messages : 37

    le Ven 25 Aoû 2017 - 22:17

    J'aime beaucoup, c'est simple et bien sympathique !
    avatar
    Jessabelle
    FémininAge : 24Messages : 110

    le Mar 29 Aoû 2017 - 3:56

    J'aime beaucoup le rendu, merci pour le partage :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 13 Déc 2018 - 18:46