AccueilRechercherS'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 : 28Messages : 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 19 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 !
    Doomdom
    Doomdom
    MasculinAge : 35Messages : 25

    le Ven 22 Sep 2017 - 22:49

    merci ^^
    lrgold
    lrgold
    MasculinAge : 22Messages : 3

    le Sam 23 Sep 2017 - 14:09

    Merci, c'est ce que je cherchais Very Happy
    Kispz.
    Kispz.
    FémininAge : 23Messages : 27

    le Dim 24 Sep 2017 - 10:49

    J'aime beaucoup, merci



    PA complète + système affichage avatar - Page 19 Roxetrouky8PA complète + système affichage avatar - Page 19 Roxetrouky5
    PA complète + système affichage avatar - Page 19 Roxetrouky9PA complète + système affichage avatar - Page 19 Roxetrouky4

    Soon
    Soon
    FémininAge : 33Messages : 89

    le Mar 26 Sep 2017 - 23:46

    merci pour le partage
    Rowe
    Rowe
    MasculinAge : 26Messages : 4

    le Ven 29 Sep 2017 - 16:18

    Merci ! ^^
    Faïryna
    Faïryna
    FémininAge : 17Messages : 83

    le Dim 1 Oct 2017 - 12:16

    Merci du partage! Very Happy
    Kokca
    Kokca
    FémininAge : 20Messages : 2

    le Dim 1 Oct 2017 - 19:56

    merci ! Very Happy
    Mia Saav
    Mia Saav
    FémininAge : 24Messages : 1

    le Mar 3 Oct 2017 - 13:30

    Merci beaucoup :)
    pikacerise
    pikacerise
    FémininAge : 28Messages : 12

    le Jeu 5 Oct 2017 - 21:23

    genial merci
    Calico
    Calico
    FémininAge : 25Messages : 15

    le Ven 13 Oct 2017 - 16:55

    merci!!
    benficagirl
    benficagirl
    FémininAge : 34Messages : 419

    le Ven 13 Oct 2017 - 23:51

    merci
    Hasuko77
    Hasuko77
    MasculinAge : 27Messages : 17

    le Mar 28 Nov 2017 - 14:29

    merci!
    Lénalee01
    Lénalee01
    FémininAge : 31Messages : 20

    le Sam 2 Déc 2017 - 13:50

    merci
    Overlinn
    Overlinn
    MasculinAge : 31Messages : 13

    le Ven 8 Déc 2017 - 23:54

    Merci pour le partage ! Very Happy
    Roxye
    Roxye
    FémininAge : 27Messages : 54

    le Jeu 14 Déc 2017 - 8:33

    Merci ♥
    Wanky
    Wanky
    FémininAge : 23Messages : 22

    le Sam 23 Déc 2017 - 18:20

    Merci du partage
    Souky Mitsu
    Souky Mitsu
    FémininAge : 30Messages : 124

    le Mar 26 Déc 2017 - 23:06

    Très jolie ! Merci du partage Very Happy
    -Cobra-
    -Cobra-
    MasculinAge : 21Messages : 33

    le Mer 3 Jan 2018 - 2:00

    merci
    Vatnsmelóna
    Vatnsmelóna
    FémininAge : 18Messages : 8

    le Sam 6 Jan 2018 - 15:47

    Merci beaucoup du partage :hug2:
    nuanciel
    nuanciel
    FémininAge : 29Messages : 139

    le Mer 21 Mar 2018 - 9:02

    merci du partage !
    InfiniKey
    InfiniKey
    FémininAge : 34Messages : 58

    le Ven 23 Mar 2018 - 10:15

    Génial merci beaucoup !
    Seyriss
    Seyriss
    MasculinAge : 26Messages : 4

    le Ven 23 Mar 2018 - 21:43

    Merci!
    Sarcastik Moose
    Sarcastik Moose
    FémininAge : 28Messages : 12

    le Lun 26 Mar 2018 - 3:57

    Merci! C'est magnifique! :heart:
    Old
    Old
    MasculinAge : 22Messages : 20

    le Lun 26 Mar 2018 - 9:14

    merci =)
    Lone wanderer
    Lone wanderer
    MasculinAge : 28Messages : 164

    le Lun 26 Mar 2018 - 22:38

    Merci beaucoup ! :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Oct 2020 - 14:36