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.


    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 !
    ArcadeFire
    ArcadeFire
    FémininAge : 29Messages : 13

    Mar 19 Juil 2016 - 8:58

    Merci Very Happy
    br4nd0n
    br4nd0n
    Age : 30Messages : 50

    Lun 25 Juil 2016 - 15:24

    Très beau !



    PA simple & neutre / 6 blocs  - Page 7 Pourbrandonob6
    Kit by Adil94
    coconut groove
    coconut groove
    FémininAge : 37Messages : 112

    Jeu 11 Aoû 2016 - 19:05

    *.* Merci c'est pile ce qu'il me faut!!!
    witm
    witm
    FémininAge : 30Messages : 51

    Mer 17 Aoû 2016 - 16:05

    très joli, merci !
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Sam 20 Aoû 2016 - 23:33

    Merci !
    Lorenzo2704
    Lorenzo2704
    MasculinAge : 50Messages : 7

    Dim 21 Aoû 2016 - 12:47

    merci
    Balmung Lynren
    Balmung Lynren
    MasculinAge : 36Messages : 133

    Dim 21 Aoû 2016 - 18:25

    Merci



    PA simple & neutre / 6 blocs  - Page 7 Banbalmunglynren
    Gnuh
    Gnuh
    FémininAge : 26Messages : 87

    Jeu 1 Sep 2016 - 20:23

    Par-fait. :'3
    Merci à toi :)



    PA simple & neutre / 6 blocs  - Page 7 Untitl16
    charly45700
    charly45700
    MasculinAge : 28Messages : 31

    Sam 3 Sep 2016 - 11:05

    merci
    rpgharrypotter2016
    rpgharrypotter2016
    FémininAge : 31Messages : 106

    Dim 4 Sep 2016 - 1:11

    merci
    Yttel
    Yttel
    MasculinAge : 42Messages : 29

    Mar 6 Sep 2016 - 17:22

    Merci !
    Lughnassadh
    Lughnassadh
    FémininAge : 33Messages : 27

    Mar 6 Sep 2016 - 18:50

    Merci :)
    Lena Choux
    Lena Choux
    FémininAge : 28Messages : 30

    Mer 7 Sep 2016 - 23:54

    Merci c'est tout beau **
    Ifreann
    Ifreann
    FémininAge : 30Messages : 54

    Jeu 8 Sep 2016 - 18:58

    Merci beaucoup ! Je me grattais la tête à essayer de faire un truc propre depuis un bail...
    kaitorla
    kaitorla
    MasculinAge : 34Messages : 12

    Sam 10 Sep 2016 - 0:51

    merci ^^
    Presley♥Cash
    Presley♥Cash
    FémininAge : 33Messages : 80

    Ven 16 Sep 2016 - 19:09

    Merci ♥
    Chant
    Chant
    FémininAge : 23Messages : 68

    Dim 18 Sep 2016 - 0:09

    Mici :p
    Lapouche
    Lapouche
    FémininAge : 29Messages : 9

    Lun 19 Sep 2016 - 16:41

    Merci du partage!
    Emanon
    Emanon
    MasculinAge : 30Messages : 27

    Mar 20 Sep 2016 - 11:03

    Merci. =)
    ARTIFICIAL ANIMAL
    ARTIFICIAL ANIMAL
    FémininAge : 33Messages : 5

    Sam 15 Oct 2016 - 12:16

    merci :aww:
    Bryan1997
    Bryan1997
    MasculinAge : 27Messages : 51

    Mer 26 Oct 2016 - 10:47

    j'aime merci
    Ombresia
    Ombresia
    FémininAge : 29Messages : 46

    Ven 18 Nov 2016 - 19:19

    Merci !
    avatar
    Alancar
    MasculinAge : 27Messages : 57

    Mar 22 Nov 2016 - 2:08

    Muchas gracias :)
    Whisper
    Whisper
    FémininAge : 27Messages : 34

    Mer 23 Nov 2016 - 21:02

    C'est super sympa ! Merci :)
    Lestrange
    Lestrange
    FémininAge : 28Messages : 165

    Jeu 1 Déc 2016 - 18:58

    Pile ce que je cherchais pour un dossier *-* #SauvageDeVie \o/
    Peurfait ♥
    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 18:13