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 simple & neutre / 6 blocs

    Henrykiki
    Henrykiki
    MasculinAge : 27Messages : 576

    le 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 !
    layna
    layna
    FémininAge : 27Messages : 68

    le Mar 5 Mai 2015 - 1:06

    Thanks
    Deed01
    Deed01
    MasculinAge : 42Messages : 340

    le Ven 8 Mai 2015 - 9:28

    merci Very Happy
    Livoire
    Livoire
    FémininAge : 21Messages : 32

    le Ven 8 Mai 2015 - 17:28

    Merci !
    Kianda
    Kianda
    MasculinAge : 19Messages : 88

    le Sam 9 Mai 2015 - 17:20

    Merci beaucoup !



    PA simple & neutre / 6 blocs  - Page 3 1416416855-kandiasigna
    North-AC
    North-AC
    FémininAge : 39Messages : 15

    le Sam 9 Mai 2015 - 18:14

    Merci beaucoup pour ce code, c'est vraiment pratique !
    Nighthayah
    Nighthayah
    FémininAge : 32Messages : 69

    le Sam 9 Mai 2015 - 20:33

    merciiiiiii beaucoup
    Fayzl4D
    Fayzl4D
    MasculinAge : 23Messages : 84

    le Mer 13 Mai 2015 - 12:56

    merci
    Gabriielle
    Gabriielle
    FémininAge : 28Messages : 42

    le Mer 13 Mai 2015 - 21:32

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

    le Ven 15 Mai 2015 - 22:21

    Merci
    Neymar
    Neymar
    MasculinAge : 21Messages : 139

    le Sam 16 Mai 2015 - 22:49

    Hawnsome o/
    Samluna
    Samluna
    FémininAge : 20Messages : 96

    le Mer 20 Mai 2015 - 21:24

    Aaaah j'adore ça me sauve la vie *_* Merci !!!




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    PA simple & neutre / 6 blocs  - Page 3 Tumblr_n4vso3dRJP1qf9mevo1_500
    Wolf Valley
    Wolf Valley
    FémininAge : 19Messages : 71

    le Mer 20 Mai 2015 - 21:44

    Magnifique
    Javarakita
    Javarakita
    FémininAge : 19Messages : 86

    le Ven 29 Mai 2015 - 19:19

    Merci beaucoup, c'est super beau !
    Anonymous
    Invité

    le Sam 30 Mai 2015 - 13:23

    Merci beaucoup :)
    Taiga
    Taiga
    MasculinAge : 29Messages : 45

    le Jeu 4 Juin 2015 - 18:41

    Merci beaucoup, vraiment sympathique comme PA !
    Lauria
    Lauria
    FémininAge : 18Messages : 39

    le Jeu 11 Juin 2015 - 18:28

    Merci ! C'est maginfique *-*
    Black Moon
    Black Moon
    FémininAge : 24Messages : 108

    le Jeu 11 Juin 2015 - 21:47

    C'est top merci !
    Mr. Shidokaz
    Mr. Shidokaz
    MasculinAge : 26Messages : 192

    le Dim 28 Juin 2015 - 0:34

    Merci pour cette page d'accueil simple mais complète ! Very Happy
    Orange Sanguine
    Orange Sanguine
    FémininAge : 23Messages : 85

    le Lun 29 Juin 2015 - 19:07

    Merci j'adore *-*



    PA simple & neutre / 6 blocs  - Page 3 Sans_t11
    Soleilou
    Soleilou
    FémininAge : 19Messages : 49

    le Ven 10 Juil 2015 - 19:15

    Mici ! :3
    didicmy
    didicmy
    FémininAge : 28Messages : 70

    le Ven 10 Juil 2015 - 23:21

    C'est vraiment joli, encore et comme toujours Wink Merci ^^
    Djeina
    Djeina
    FémininAge : 23Messages : 233

    le Dim 19 Juil 2015 - 23:26

    Très beau Very Happy Merci ^^
    Yovoed
    Yovoed
    FémininAge : 20Messages : 62

    le Lun 20 Juil 2015 - 20:22

    Merci ! ^^
    Dacina moe
    Dacina moe
    FémininAge : 41Messages : 171

    le Sam 25 Juil 2015 - 19:38

    J'adore merci
    avatar
    Little--Angel
    FémininAge : 23Messages : 46

    le Sam 25 Juil 2015 - 23:29

    J'aime beaucoup :p
    Contenu sponsorisé


      La date/heure actuelle est Ven 17 Jan 2020 - 20:02