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.

Le Deal du moment : -17%
Casque de réalité virtuelle Meta Quest 2 ...
Voir le deal
249.99 €

    PA simple & neutre / 6 blocs

    Henrykiki
    Henrykiki
    MasculinAge : 31Messages : 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 !
    Otulissa
    Otulissa
    FémininAge : 27Messages : 24

    Dim 26 Juil 2015 - 13:41

    J'aime bien cette PA, elle est simple et se marie avec tout ^^ merci du partage !
    avatar
    Hop80
    MasculinAge : 34Messages : 138

    Lun 27 Juil 2015 - 0:57

    Vraiment sympa merci
    Nutop
    Nutop
    FémininAge : 21Messages : 254

    Mer 29 Juil 2015 - 12:09

    C'est chrè joli ^^
    Alors je poste pour voir ce magnifique code, meme si je ne l'utilieri pas




    PA simple & neutre / 6 blocs  - Page 4 Mini_597402Sceaufinal

    mon-etoile
    mon-etoile
    FémininAge : 35Messages : 140

    Mar 11 Aoû 2015 - 15:39

    Merci
    Anonymous
    Invité

    Mar 11 Aoû 2015 - 16:19

    Merci O(≧∇≦)O
    Tsukasa
    Tsukasa
    MasculinAge : 31Messages : 52

    Mer 12 Aoû 2015 - 17:21

    Merci beaucoup, c'est superbe :hug2:
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Jeu 20 Aoû 2015 - 19:09

    Merci du partage ♥
    Draly
    Draly
    FémininAge : 31Messages : 119

    Ven 21 Aoû 2015 - 15:36

    Simple, sympa, j'aime bien.:p Continue comme ça surtout.^^
    Heavensky
    Heavensky
    FémininAge : 29Messages : 66

    Ven 21 Aoû 2015 - 16:19

    Merci ^^ C'est sympa comme PA. *.*
    Crystal ZA
    Crystal ZA
    FémininAge : 27Messages : 32

    Sam 22 Aoû 2015 - 1:44

    Merci :)
    Romann
    Romann
    FémininAge : 30Messages : 183

    Jeu 27 Aoû 2015 - 22:53

    merci



    PA simple & neutre / 6 blocs  - Page 4 Unicor11
    Hopefox
    Hopefox
    FémininAge : 26Messages : 36

    Mar 8 Sep 2015 - 15:30

    Merci beaucoup ! Very Happy
    Faucon
    Faucon
    FémininAge : 24Messages : 64

    Mar 8 Sep 2015 - 18:23

    Merci ♥
    Tinkky
    Tinkky
    FémininAge : 33Messages : 104

    Mer 9 Sep 2015 - 15:24

    Vraiment Jolie. Merci du partage ^_^
    Neya
    Neya
    FémininAge : 24Messages : 164

    Lun 12 Oct 2015 - 17:24

    Merci !
    Anonymous
    Invité

    Lun 12 Oct 2015 - 21:05

    merci!
    Lunyh
    Lunyh
    FémininAge : 23Messages : 41

    Dim 18 Oct 2015 - 2:22

    Merci. ♥
    avatar
    Etoile*
    FémininAge : 32Messages : 82

    Lun 19 Oct 2015 - 19:11

    j'adore, merci beaucoup :)
    LOUVE ☽
    LOUVE ☽
    FémininAge : 33Messages : 53

    Dim 1 Nov 2015 - 0:17

    Merci beaucoup Very Happy
    Argy
    Argy
    FémininAge : 25Messages : 98

    Lun 2 Nov 2015 - 18:42

    Merci beaucoup ! ♥
    louchielulue
    louchielulue
    FémininAge : 33Messages : 32

    Mar 3 Nov 2015 - 13:40

    merci
    Roxane.D
    Roxane.D
    FémininAge : 25Messages : 29

    Mer 4 Nov 2015 - 21:43

    Merci beaucoup
    Lessien
    Lessien
    FémininAge : 41Messages : 163

    Jeu 5 Nov 2015 - 12:31

    Merci :)
    Nezzoon
    Nezzoon
    FémininAge : 24Messages : 66

    Ven 6 Nov 2015 - 21:03

    Merci !
    Luunalight
    Luunalight
    FémininAge : 33Messages : 98

    Sam 7 Nov 2015 - 14:44

    Merci beaucoup ♥
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 6:25