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 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 !
    Maitre_Soda
    Maitre_Soda
    MasculinAge : 42Messages : 33

    le Ven 9 Déc 2016 - 13:25

    merci
    Louna Luna
    Louna Luna
    FémininAge : 23Messages : 147

    le Dim 11 Déc 2016 - 19:22

    Merci beaucoup !
    Plum
    Plum
    FémininAge : 53Messages : 21

    le Jeu 12 Jan 2017 - 23:09

    Merci pour ce code
    Princesa
    Princesa
    FémininAge : 30Messages : 10

    le Mar 24 Jan 2017 - 12:56

    Merci
    Mello
    Mello
    FémininAge : 22Messages : 52

    le Jeu 26 Jan 2017 - 2:52

    Merci!:)
    sturdya
    sturdya
    FémininAge : 21Messages : 34

    le Dim 29 Jan 2017 - 14:09

    Merci beaucoup !
    Nyptia
    Nyptia
    FémininAge : 27Messages : 37

    le Lun 13 Fév 2017 - 1:15

    Merci :)
    picka234
    picka234
    FémininAge : 54Messages : 528

    le Jeu 23 Mar 2017 - 9:31

    cheers cheers cheers merci



    PA simple & neutre / 6 blocs  - Page 8 Sign13
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Mer 26 Avr 2017 - 10:53

    Merci du partage
    Euterpe
    Euterpe
    FémininAge : 33Messages : 329

    le Dim 30 Avr 2017 - 14:59

    merci!
    Seiryu
    Seiryu
    FémininAge : 19Messages : 68

    le Dim 14 Mai 2017 - 2:10

    Merci
    wally the bully
    wally the bully
    MasculinAge : 20Messages : 58

    le Jeu 18 Mai 2017 - 16:24

    merci, je t'aime <3
    Manue
    Manue
    FémininAge : 38Messages : 58

    le Jeu 22 Juin 2017 - 10:59

    Merci :hudada:

    Enfin une PA qui fonctionne avec Forumprod ... Bon sang tu as des millions de merci de notre part !!!!
    INHA
    INHA
    FémininAge : 20Messages : 6

    le Jeu 22 Juin 2017 - 12:27

    Thank's Very Happy
    John:
    John:
    MasculinAge : 26Messages : 56

    le Lun 3 Juil 2017 - 2:03

    M A G N I F I Q U E

    Merci!
    Melle Lena
    Melle Lena
    FémininAge : 44Messages : 300

    le Dim 23 Juil 2017 - 7:29

    Merci très joli.
    Frozen
    Frozen
    FémininAge : 19Messages : 19

    le Ven 18 Aoû 2017 - 18:53

    merci beaucoup pour ce partage ! très jolie PA et très simple !
    Lelouch Vandemon
    Lelouch Vandemon
    MasculinAge : 27Messages : 2

    le Lun 21 Aoû 2017 - 15:31

    Merci beaucoup pour cette page d'accueil, je n'oublierai pas les crédits en l'utilisant pour mon forum ;D
    Cythère
    Cythère
    FémininAge : 30Messages : 36

    le Dim 27 Aoû 2017 - 20:15

    Merci :)
    Karthus
    Karthus
    FémininAge : 17Messages : 13

    le Lun 28 Aoû 2017 - 16:51

    Merci :'D Elle est super belle franchement !
    Orochimaru
    Orochimaru
    FémininAge : 29Messages : 209

    le Sam 23 Sep 2017 - 16:59

    Super Codage ^_^ Merci du prtage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    Dark Flame Master
    Dark Flame Master
    MasculinAge : 21Messages : 4

    le Lun 25 Sep 2017 - 15:32

    Mercii
    Qasiim
    Qasiim
    MasculinAge : 26Messages : 1

    le Mar 26 Sep 2017 - 19:31

    Merci enormement!
    phenixia74
    phenixia74
    FémininAge : 40Messages : 52

    le Ven 13 Oct 2017 - 15:31

    Merci beaucoup pour le partage ♥
    Calico
    Calico
    FémininAge : 24Messages : 15

    le Ven 13 Oct 2017 - 16:48

    merci!!
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:14