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 complète + système affichage avatar

    Henrykiki
    Henrykiki
    MasculinAge : 27Messages : 576

    le Lun 12 Jan 2015 - 21:44

    Rappel du premier message :

    Bonjour à tous,

    Voici un LS de PA assez complète (un seul onglet, 6 espaces).
    Elle vous est proposée suite à la demande de Monaka.


    Aperçus : normale - survol des liens - en ligne


    Cette PA contient :

    • Un espace contexte (scrollable)
    • Un espace Staff + effet qui tourne
    • Un espace Membres du mois + effet qui tourne
    • Un espace Liens utiles
    • Un espace Nouveautés (scrollable)
    • Un espace "À savoir" avec infos supp.
    • Un système affichant l'avatar du membre ! PA complète + système affichage avatar - Page 5 New (ce gif extrèmement laid a été ajouté par Henrykiki, et non pas par Nihil :toto:)


    L'installation

    Un simple merci envers le demandeur et les codeurs peut faire beaucoup plaisir Wink




    Création de la page d'accueil


    Rendez-vous sur votre panneau d'administration > Affichage > Page d'accueil > Généralités. Et collez-y le code ci-dessous :

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
      <title>PA Monaka</title>
      <style>

          /* GENERAL */
       
          /* ==> Liens */
          #pa-monaka a {
            color: #998577;
            text-decoration: none;
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
          }

          #pa-monaka a:hover
          {
            color: #4e9ba1;
            text-decoration: none;
          }

          #pa-monaka {
            width: 800px; min-height: 600px;
            margin: 0 auto 12px auto;
            border: 1px dashed #F1ECD4;
            position: relative;
            background: #F1ECD4;
          }
          #pa-monaka table {
            display: block;
            width: 800px;
            border-spacing: 20px;
          }
          #pa-monaka td.with-bg {
            background: #ffffff;
            width: 210px; height: 170px;
            position: relative;
            padding-top: 20px;
          }

          .content {
            height: 210px;
            overflow-y: auto;
            padding-right: 20px;
            font-size: 14px;
            font-family: "Myriad Pro", sans-serif;
          }

          .contentspecial {
            height: 210px;
            overflow-y: auto;
            padding-right: 0px;
            font-size: 14px;
            font-family: "Myriad Pro", sans-serif;
          }

          #pa-monaka h1, #pa-monaka h2, #pa-monaka p, #pa-monaka ul, #pa-monaka li {
            margin: 0; padding: 0;
            font-weight: normal;
          }

          /* MISE EN FORME DU TITRE + AVATAR */

          #pa-monaka h1 {
            width: 75%;
            height: 80px;
            line-height: 80px;
            color: #4d9ca1;
            text-align: right;
            position: absolute;
            left: 0; top: 30px;
            font-size: 40px;
            font-style: italic;
          }

          #user-avatar {
            position: absolute;
            right: 56px; top: 20px;
            width: 94px; height: 150px;
            background: #4d9ca1; float: right;
            margin-right: 40px;
            overflow: hidden;
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
          }

          #user-avatar img {
            width: 100%;
            height: auto;
          }

          /* MISE EN FORME DES TITRES DE SECTIONS */

          #pa-monaka td h2 {
            position: absolute;
            width: 95%;
            top: -15px; right: 0;
            font-size: 18px;
            font-style: italic;
            text-align: right;
            color: #CA105A;
            font-family: "Lucida Handwriting", cursive;
            }

          /* MISE EN FORME ESPACE CONTEXTE */   
       
          .contexte p {
            margin-bottom: 20px;
            text-align: justify;
          }

          .contexte p:last-child {
            margin-bottom: 0px;
          }
          /* MISES EN FORME ZONE LIENS */

          .links a {
            display: inline-block;
            background: rgba(241,236,212,.6);
            width: 100%;
            text-align: center;
            margin-bottom: 3px;
            padding: 2px 0;
            text-decoration: none;
            color: #d9d4bf !important;
            font-family: sans-serif;
            text-transform: uppercase;
            font-size: 11px;
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
          }

          .links a:hover {
            background: rgba(241,236,212,.95);
            color: #CA105A !important;
          }
       
          /* MEMBRES DU STAFF */

          .memberstaff {
            height: 50px;
            background: #f3f5ea;
            color: #4d9ca1;
            border-radius: 10px;
            padding-left: 80px;
            position: relative;
            margin-bottom: 10px;
          }

          .memberstaff:hover img.photo {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
          }

          .memberstaff img.photo {
            width: 53px; height: 53px;
            border-radius: 100px;
            background: #4d9ca1;
            position: absolute;
            top: -3.5px; left: 10px;
            border: 2px solid #E3C34D;
          }

          .memberstaff span {
            display: block;
            line-height: 25px;
            font-style: italic;
            font-size: 130%;
            padding-top: 3px;
          }
       

          /* MEMBRES A L'HONNEUR */

          .member {
            height: 75px;
            background: #f3f5ea;
            color: #4d9ca1;
            border-radius: 20px;
            padding-left: 100px;
            position: relative;
            margin-bottom: 20px;
            font-family: "Myriad Pro", sans-serif;
          }

          .member:hover img.photo {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
          }

          img.photo {
            width: 79px; height: 79px;
            border-radius: 100px;
            background: #4d9ca1;
            position: absolute;
            top: -3.5px; left: 10px;
            border: 2px solid #E3C34D;
          }

          .member span {
            display: block;
            line-height: 30px;
            font-style: italic;
            font-size: 130%;
            padding-top: 12px;
          }

          .member a, .memberstaff a {
            text-transform: uppercase !important;
            font-size: 13px;
          }

          /* ESPACE NEWS */

          .news {
            margin-bottom: 5px !important; padding-bottom: 5px !important;
            border-bottom: 1px solid rgba(241,236,212,1);
            text-align: justify;
          }

          .news span {
            color: #CA105A;
            font-size: 90%;
          }

          .news span:after {
            content: " ~ "
          }

          /* INDICATIONS */

          .indics {
            margin-bottom: 5px !important; padding-bottom: 5px !important;
            border-bottom: 1px solid rgba(241,236,212,1);
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
          }

          .indics:hover strong {
            color: #CA105A;
          }

          /* CREATIONS DES CREDITS */

          #credits {
            width: 100%;
            height: 12px;
            position: absolute;
            text-align: right;
            font-family: sans-serif;
            font-size: 12px;
            padding: 3px 0;
            color: #606060;
            bottom: -10px; right: 10px;
          }

          #credits a {
            padding-left: 20px;
            background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
            background-size: 14px 14px;
            color: #aa434d !important;
            text-decoration: none !important;
            border: 0px !important;
          }

          #credits a:hover {
            color: #f79292 !important;
          }

          #credits span {color: #aa434d !important;}
      </style>
    </head>
    <body>
      <div id="pa-monaka">
          <table width="800px" cellpadding="10px">
            <tr>
                <td colspan="3" style="height:80px;">
                    <div class="connected">
                      <h1>Bienvenue <span class="user-name">{USERNAME}</span></h1>
                      <div id="user-avatar">
                          <img src="http://i38.servimg.com/u/f38/19/07/10/81/vava-t10.png" alt="" />
                      </div>
                  </div>
                  <div class="not-connected" style="display: none;">
                    <h1>Si tu venais t'inscrire ?</h1>
                  </div>
                </td>
            </tr>
            <tr>
                <td class="with-bg">
                  <!-- Le contexte -->
                  <h2>Contexte</h2>
                  <div class="content contexte">
                      <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Officiis, molestiae, enim, aliquam laboriosam necessitatibus praesentium quia quaerat sint dolore nihil harum fuga fugit vel est vitae doloremque rerum. Ut, tempore.</p>
                      <p>Iure, repudiandae, pariatur, maiores temporibus reprehenderit incidunt fuga quas ullam aspernatur ea porro sapiente officiis! Maxime, vel, praesentium, doloremque, ut sequi ipsam eos iure odio perferendis obcaecati deleniti est modi.</p>
                      <p>Rem, pariatur, consectetur, voluptatibus quaerat necessitatibus ad hic totam distinctio atque voluptas dolores ullam quae. Facere, maxime modi nesciunt eum ducimus fuga nobis cumque aut. Repudiandae ab unde voluptas soluta?</p>
                      <p>Tempore, in, sequi, dignissimos, temporibus animi fuga aspernatur quasi magni natus repellat ad dolor mollitia et distinctio illum nostrum necessitatibus molestiae fugit repellendus sit facere molestias saepe neque nisi qui.</p>
                      <p>Minima, obcaecati adipisci dolor quibusdam sequi dolores commodi harum rem nostrum veniam aut labore ad unde ut tempore quod facere soluta odit ipsum necessitatibus ea eaque eveniet dicta. Inventore, blanditiis.</p>
                  </div>
                </td>
                <td class="with-bg links">
                  <h2>Liens utiles</h2>
                  <div class="contentspecial">
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                      <a href="">Liens lien lien</a>
                  </div>
                </td>
                <td class="with-bg">
                  <h2>Staff</h2>
                <div class="content" style="padding-top: 5px;">
                  <div class="memberstaff">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/essai-10.png" alt="" class="photo" />
                      <span>Henrykiki</span>
                      <a href="">Mp</a> - <a href="">Profil</a>
                  </div>

                  <div class="memberstaff">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/essai-10.png" alt="" class="photo" />
                      <span>Henrykiki</span>
                      <a href="">Mp</a> - <a href="">Profil</a>
                  </div>

                  <div class="memberstaff">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/essai-10.png" alt="" class="photo" />
                      <span>Henrykiki</span>
                      <a href="">Mp</a> - <a href="">Profil</a>
                  </div>

                  <div class="memberstaff">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/essai-10.png" alt="" class="photo" />
                      <span>Henrykiki</span>
                      <a href="">Mp</a> - <a href="">Profil</a>
                  </div>
                </div>
                </td>
            </tr>
            <tr>
                <td class="with-bg">
                  <h2>Membres à l'honneur</h2>
                  <div class="member">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/essai-10.png" alt="" class="photo" />
                      <span>Henrykiki</span>
                      <a href="">Mp</a> - <a href="">Profil</a>
                  </div>

                  <div class="member">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/essai-10.png" alt="" class="photo" />
                      <span>Henrykiki</span>
                      <a href="">Mp</a> - <a href="">Profil</a>
                  </div>
                </td>
                <td class="with-bg">
                  <h2>Nouveautés</h2>
                  <div class="content">
                      <p class="news"><span>07-01-2015</span> Etant en pleine période de Noël, voici un design qui représente l'hiver : hourra.</p>
                      <p class="news"><span>17-01-2015</span> Les mouches ont des pattes, et les fourmis aussi. Le saviez-vous ?</p>
                      <p class="news"><span>27-01-2015</span> Je pense que Cléopatre à ruiné l'Egypte, elle s'est prise pour une grande pharaonne, et bim !</p>
                      <p class="news"><span>07-02-2015</span> Pas touche, la mouche, t'as pas pris ta douche.</p>
                      <p class="news"><span>17-02-2015</span> Il était une bergère qui allait au marché..</p>
                  </div>
                </td>
                <td class="with-bg">
                  <h2>À savoir</h2>
                  <div class="content">
                      <p class="indics">Ici nous demandons un minimum de <strong>10 lignes</strong>.</p>
                      <p class="indics">Les personnages <strong>en dessous de 28 ans</strong> ne sont pas acceptés.</p>
                      <p class="indics">+ enfin des infos divers // ASTUCE = utiliser les balises<br> — < strong> — pour mettre en avant le principal</p>
                  </div>
                </td>
            </tr>
          </table>
          <div id="credits">
            PA codée avec l'aide de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.
          </div>
      </div>
    </body>
    </html>
    <script type="text/javascript">jQuery(function(){var el=jQuery('#pa-monaka');if(_userdata.session_logged_in){el.find('#user-avatar').html(_userdata.avatar);el.find('.user-name').html(_userdata.username)}else{el.find('.not-connected').show();el.find('.connected').remove()}});</script>

    Enregistrez.




    Merci de conserver les crédits envers Never-Utopia

    Et merci à Nihil pour sa précieuse intervention en JS.


    Une question ? Un souci avec le code ?


    Rendez-vous dans la zone appropriée : c'est par ici !


    Dernière édition par Henrykiki le Ven 16 Jan 2015 - 22:44, édité 5 fois



    Des bisous !
    remrem
    remrem
    MasculinAge : 21Messages : 48

    le Mar 12 Mai 2015 - 21:11

    Trop génial !! Very Happy Merci !
    Eshon
    Eshon
    FémininAge : 38Messages : 194

    le Mar 12 Mai 2015 - 21:36

    Merci !
    Gabriielle
    Gabriielle
    FémininAge : 28Messages : 42

    le Mer 13 Mai 2015 - 16:49

    merci
    CraWox
    CraWox
    MasculinAge : 21Messages : 22

    le Mer 13 Mai 2015 - 18:53

    Merci
    louchielulue
    louchielulue
    FémininAge : 28Messages : 32

    le Mer 13 Mai 2015 - 23:01

    merci
    Leelo
    Leelo
    FémininAge : 28Messages : 149

    le Jeu 14 Mai 2015 - 0:00

    c'est maggnifique
    Fayzl4D
    Fayzl4D
    MasculinAge : 23Messages : 84

    le Jeu 14 Mai 2015 - 12:00

    merci beaucoup magnifique
    Bellabimbo444
    Bellabimbo444
    FémininAge : 21Messages : 61

    le Jeu 14 Mai 2015 - 13:27

    Merci *-*



    mel1986
    mel1986
    FémininAge : 32Messages : 38

    le Lun 18 Mai 2015 - 23:01

    Merci bien de ce travail :)
    F. de l'O.
    F. de l'O.
    FémininAge : 27Messages : 30

    le Mar 19 Mai 2015 - 0:34

    Merci !



    En cours...
    fancy
    fancy
    MasculinAge : 29Messages : 34

    le Mar 19 Mai 2015 - 14:04

    Elle est superbe, merci beaucoup <3
    Mystick
    Mystick
    FémininAge : 34Messages : 100

    le Mar 19 Mai 2015 - 16:24

    Han j'adoooooooooooooooooooooooooooooooooooooooooooooooore <3
    Le Panda.
    Le Panda.
    FémininAge : 23Messages : 34

    le Mar 19 Mai 2015 - 22:04

    Simple efficace, j'adore !
    LittleMuffin
    LittleMuffin
    FémininAge : 22Messages : 21

    le Mer 20 Mai 2015 - 21:27

    C'est sublime **
    Merci pour le partage :)
    So-chan
    So-chan
    FémininAge : 29Messages : 61

    le Jeu 21 Mai 2015 - 16:23

    Bonjour, et merci pour le partage. J'adore le style de la page d'accueil.
    lΔω
    lΔω
    FémininAge : 21Messages : 105

    le Sam 23 Mai 2015 - 10:14

    merci
    Ciàran
    Ciàran
    FémininAge : 28Messages : 187

    le Sam 23 Mai 2015 - 16:01

    Merci beaucoup <3
    Silver Blast
    Silver Blast
    MasculinAge : 19Messages : 74

    le Sam 23 Mai 2015 - 23:31

    Ouah belle PA merci♥
    Lust Caution
    Lust Caution
    FémininAge : 24Messages : 79

    le Dim 24 Mai 2015 - 13:51

    Merci.
    Edward Speleers
    Edward Speleers
    FémininAge : 31Messages : 460

    le Mer 27 Mai 2015 - 13:52

    Merci Wink



    PA complète + système affichage avatar - Page 5 Edkidd11
    Nihal
    Nihal
    FémininAge : 15Messages : 23

    le Sam 30 Mai 2015 - 3:25

    Merci!
    Sneakazuha
    Sneakazuha
    FémininAge : 23Messages : 34

    le Sam 30 Mai 2015 - 16:19

    Super, merci du partage !
    Lexy Sekushina
    Lexy Sekushina
    FémininAge : 24Messages : 30

    le Sam 30 Mai 2015 - 16:46

    merci
    Azorus
    Azorus
    MasculinAge : 17Messages : 35

    le Dim 7 Juin 2015 - 0:17

    Merci Wink



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    Lilith Aube
    Lilith Aube
    FémininAge : 33Messages : 498

    le Lun 8 Juin 2015 - 14:23

    Bonjouuuuuuuur !!!!!


    Merci pour cette belle PA =)
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 4:30