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.

-35%
Le deal à ne pas rater :
Pack Smartphone Samsung Galaxy A25 6,5″ 5G + Casque Bluetooth JBL
241 € 371 €
Voir le deal

    PA simple & neutre / 6 blocs

    Henrykiki
    Henrykiki
    MasculinAge : 32Messages : 576

    Jeu 15 Jan 2015 - 14:21

    Rappel du premier message :

    Bonjour tout le monde,

    Voici un LS de PA très simple et très neutre.
    Elle vous est proposée suite à la demande de Kahlan.


    Aperçus : En ligne - Avec titres - Sans titres


    L'installation

    Cette PA contient :

    • Un espace contexte (scrollable)
    • Un espace Vidéo.
    • Un espace News (scrollable)
    • Un espace Membres du mois.
    • Un espace Partenaires.
    • Un espace Staff (2 membres)
    • Possibilité d'afficher les titres.


    L'installation

    Création de la page d'accueil


    Rendez-vous sur votre panneau d'administration > affichage > Page d'accueil > Généralites et collez-y le code ci-dessous :

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
       <meta charset="UTF-8">
       <title>Pa ~ KahLan</title>

       <!-- LIEN VERS GOOGLE FONT à CHANGER SELON LA TYPO VOULUE -->
       <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>

       <style>
          /*ELEMENTS QUI ONT UNE GOOGLE FONT : */
          #pa-kahlan h2 {
             font-family: 'Satisfy', cursive;
             display: none;
          }

          #pa-kahlan {
             width: 800px;
             margin: 0 auto;
             background: #e1e1e1;
             color: #565656;
             position: relative;
          }

          /* LIENS */

          #pa-kahlan a {
             text-decoration: none;
             color: #000;
          }

          #pa-kahlan a:hover {
             color: #9f64c4;
          }

          /* REGLAGES GENERAUX */

          #pa-kahlan table
          {
             display: block;
             width: 800px;
             border-spacing: 20px 30px !important;
          }

          #pa-kahlan td.withbg {
             background: #c0c0c0;
             height: 140px; width: 210px;
             vertical-align: top;
             position: relative;
             padding: 15px;
             font-family: sans-serif;
             font-size: 13px;
          }

          #pa-kahlan h2 {
             position: absolute;
             top: -20px;
             width: 100%; text-align: center;
             font-size: 25px;

             overflow: hidden;
             margin: 0; padding: 0;
             font-style: italic;
          }

          /* REGLAGES DES DIFFERENTES SECTIONS */

          .content-over {
             height: 170px; max-width: 225px;
             padding-right: 15px;
             overflow-y: auto;
          }
          
          .nouveautes span {
             display: block;
             border-bottom: 1px dotted purple;
             padding-bottom: 3px; margin-bottom: 3px;
             color: purple;
          }

          .nouveautes p {
             margin-bottom: 20px;
          }

          .content-staff, .content-member {
             margin-bottom: 20px;
             overflow: hidden;
          }

          .content-staff img, .content-member img {
             float: left;
             padding-right: 10px;
             opacity: .7;
             -webkit-transition: all .2s linear;
             -moz-transition: all .2s linear;
             -ms-transition: all .2s linear;
             transition: all .2s linear;
          }

          .content-staff:hover img, .content-member:hover img {
             opacity: 1;
          }

          .infos-staff, .infos-member {
             float: left;
             font-size: 12px;
             line-height: 1.2;
             margin: 0;
             width: 145px; height: 55px;
             overflow: hidden;
             text-align: center;
             color: #fff;
          }

          /* CREDITS */
          #credits {
             position: absolute;
             bottom: 0; right: 0;
             font-size: 10px;
             font-weight: bold;
             text-transform: uppercase;
             font-family: sans-serif;
             padding-right: 20px; padding-bottom:  5px;
          }

       </style>
    </head>
    <body>
       <div id="pa-kahlan">
          <table width="800px" >
             <tr>
                <td colspan="3" bcolor="#ccffff">
                   <!-- Création Graphique -->
                   <img src="http://i38.servimg.com/u/f38/19/07/10/81/crea10.jpg" alt="Création Graphique" width="100%" height="auto">
                </td>
             </tr>
             <tr>
                <td width="240px" class="withbg">
                   <h2>Contexte</h2>
                   <div class="content-over">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, optio, rerum, veritatis error minus sequi soluta obcaecati dolores cumque maiores fugiat accusamus nulla ex omnis earum blanditiis iste quia dignissimos.</p>
                      <p>Rem, ad, expedita, explicabo deserunt rerum dignissimos odio optio est quo obcaecati delectus perspiciatis fuga repellendus architecto commodi tenetur minus. Deserunt, unde, et reprehenderit corrupti eveniet fugit at placeat repellat?</p>
                      <p>Tenetur, consequuntur, quibusdam, soluta ducimus odio enim ea eligendi sit cum dolore labore eum libero mollitia. Magnam, molestiae error consequatur tempore quasi mollitia consequuntur quaerat corporis odit ratione. Voluptatibus, sed.</p>
                      <p>Ad, illum, neque iure nulla dignissimos unde nisi obcaecati delectus est et molestiae commodi eius nemo impedit pariatur molestias officia quos veritatis nihil sit numquam! Omnis earum at expedita ea?</p>
                      <p>Iure, voluptate fugit provident voluptatibus odit suscipit veritatis rem culpa quasi amet. Cupiditate, illum reprehenderit nisi quidem fuga sunt dolorem in cumque provident nesciunt repellendus saepe mollitia ullam explicabo iure.</p>
                   </div>
                </td>
                <td width="240px" class="withbg" style="padding-top: 30px;">
                   <h2>Vidéo du forum</h2>
                   <!-- Insérer ici le code "intégrer"
                       en mettant les width à 210 et height à 158 -->
                   <iframe width="210" height="158" src="http://www.youtube.com/embed/OfUbM5nqu2w" frameborder="0" allowfullscreen></iframe>
                </td>
                <td width="240px" class="withbg">
                   <h2>News</h2>
                   <div class="content-over nouveautes">
                      <p>
                         <span>10 janvier</span>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, praesentium, dolor earum assumenda id facere.
                      </p>
                      <p>
                         <span>23 janvier</span>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, harum, cupiditate, architecto.
                      </p>
                   </div>
                </td>
             </tr>
             <tr>
                <td width="240px" class="withbg" style="padding-top: 30px;">
                   <h2>Staff</h2>
                   <div class="content-staff">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/staffi10.jpg" alt="">
                      <p class="infos-staff">
                         Nom du personnage <br>
                         Rang | Pseudo<br>
                         DC<br>
                         <a href="">MP</a> - <a href="">profil</a>
                      </p>
                   </div>

                   <div class="content-staff">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/staffi10.jpg" alt="">
                      <p class="infos-staff">
                         Nom du personnage <br>
                         Rang | Pseudo<br>
                         DC<br>
                         <a href="">MP</a> - <a href="">profil</a>
                      </p>
                   </div>
                </td>
                <td width="240px" class="withbg" style="padding-top: 30px;">
                   <h2>Partenaires</h2>
                   <div class="content-partenaires" style="text-align: center;">
                      <!-- Partenaire.1  -->
                      <a href="lien"><img src="http://i38.servimg.com/u/f38/19/07/10/81/parten11.png" alt=""></a>
                      <!-- Partenaire.2  -->
                      <a href="lien"><img src="http://i38.servimg.com/u/f38/19/07/10/81/parten11.png" alt=""></a>
                      <!-- Partenaire.3  -->
                      <a href="lien"><img src="http://i38.servimg.com/u/f38/19/07/10/81/parten11.png" alt=""></a>
                   </div>
                </td>
                <td width="240px" class="withbg" style="padding-top: 30px;">
                   <h2>Membres du mois</h2>
                   <div class="content-member">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/staffi10.jpg" alt="">
                      <p class="infos-member">
                         Nom du personnage <br>
                         <a href="">profil</a> - <a href="">liens</a>
                      </p>
                   </div>

                   <div class="content-member">
                      <img src="http://i38.servimg.com/u/f38/19/07/10/81/staffi10.jpg" alt="">
                      <p class="infos-member">
                         Nom du personnage <br>
                         <a href="">profil</a> - <a href="">liens</a>
                      </p>
                   </div>
                </td>
             </tr>
          </table>
          <div id="credits">
             PA codée sur ~ <a href="http://www.never-utopia.com/t53021-henrikiyi-pa-toute-simple" target="_blank">Never-Utopia</a>
          </div>
       </div>
    </body>
    </html>

    Si vous voulez afficher les titres, il suffit de retirer le "display:none" attribué à #pa-kahlan h2.
    Enregistrez. Et voilà votre PA est installée.

    Il est possible de faire en sorte d'ajouter plus que 2 membres de staff dans cette PA, la fonctionnalité n'étant pas demandée, je ne l'ai pas installée... Demandez en personnalisation de code si vous voulez.


    Merci de conserver les crédits envers Never-Utopia


    Une question ? Un souci avec le code ?


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



    Des bisous !
    Angel Argawaen
    Angel Argawaen
    MasculinAge : 28Messages : 14

    Sam 7 Nov 2015 - 15:48

    Merci elle est magnifique :à
    Vixen Smile
    Vixen Smile
    FémininAge : 30Messages : 9

    Jeu 12 Nov 2015 - 12:55

    Merci bien :)
    Bouffe Tout
    Bouffe Tout
    MasculinAge : 32Messages : 17

    Ven 13 Nov 2015 - 0:46

    Je test! Very Happy
    Elocha
    Elocha
    FémininAge : 74Messages : 255

    Ven 13 Nov 2015 - 14:55

    très chouette indeed !



    eLoChA.
    Roxane.D
    Roxane.D
    FémininAge : 26Messages : 29

    Ven 13 Nov 2015 - 17:25

    Merci
    Demily
    Demily
    FémininAge : 38Messages : 52

    Ven 13 Nov 2015 - 17:33

    Ta PA est très jolie. Merci du partage
    Neya
    Neya
    FémininAge : 25Messages : 164

    Ven 13 Nov 2015 - 22:03

    Merki
    Zoé
    Zoé
    FémininAge : 25Messages : 189

    Lun 16 Nov 2015 - 15:34

    mcii



    PA simple & neutre / 6 blocs  - Page 5 274643signaaaa
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Dim 6 Déc 2015 - 14:14

    Mirchi beaucoup!
    Mystick
    Mystick
    FémininAge : 39Messages : 100

    Mer 9 Déc 2015 - 16:03

    Merci :)
    Milaow
    Milaow
    FémininAge : 24Messages : 71

    Mer 9 Déc 2015 - 21:20

    Merci du partage :3
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Jeu 10 Déc 2015 - 6:01

    Merkii pour le code o/



    PA simple & neutre / 6 blocs  - Page 5 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    miriam94
    miriam94
    FémininAge : 30Messages : 168

    Sam 12 Déc 2015 - 22:47

    Merci, c'est beau :)



    PA simple & neutre / 6 blocs  - Page 5 24786310
    Ehlènoha
    Ehlènoha
    FémininAge : 35Messages : 27

    Dim 13 Déc 2015 - 2:13

    Merci !
    lacoste
    lacoste
    MasculinAge : 30Messages : 30

    Lun 21 Déc 2015 - 5:32

    merci
    Hancok
    Hancok
    FémininAge : 40Messages : 1492

    Lun 21 Déc 2015 - 10:47

    Coucou, merci beaucoup pour cette PA.




    PA simple & neutre / 6 blocs  - Page 5 A67g
    bubulle
    bubulle
    FémininAge : 37Messages : 76

    Lun 21 Déc 2015 - 23:14

    merci
    Valou712
    Valou712
    FémininAge : 41Messages : 23

    Ven 25 Déc 2015 - 17:56

    J'aime beaucoup simple et efficace !! Merci !!
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 31Messages : 69

    Dim 10 Jan 2016 - 13:05

    Merci :)



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    PA simple & neutre / 6 blocs  - Page 5 78216279872221
    Mohank
    Mohank
    MasculinAge : 29Messages : 20

    Dim 24 Jan 2016 - 21:28

    Merci vous êtes géniaux! ^^
    Mawie62
    Mawie62
    FémininAge : 29Messages : 125

    Sam 30 Jan 2016 - 9:27

    Merci pour la fiche :)



    PA simple & neutre / 6 blocs  - Page 5 Signat10
    Celuna
    Celuna
    FémininAge : 34Messages : 133

    Mar 23 Fév 2016 - 14:02

    Bonjour, Merci pour ce magnifique partage :heart:
    Darouine Lius
    Darouine Lius
    MasculinAge : 35Messages : 77

    Mar 23 Fév 2016 - 18:00

    Pas mal du tout :)
    Kitket
    Kitket
    FémininAge : 41Messages : 106

    Ven 26 Fév 2016 - 17:24

    Merci
    SweetieBay
    SweetieBay
    FémininAge : 32Messages : 146

    Sam 27 Fév 2016 - 4:43

    Merci d'avoir partagé.
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 13:33