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

    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 !
    Kahlan
    Kahlan
    FémininAge : 33Messages : 371

    le Jeu 15 Jan 2015 - 19:00

    Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii :-) Tu as assuré !
    Anonymous
    Invité

    le Jeu 22 Jan 2015 - 20:09

    Merci de nouveau Henry ^^
    molière
    molière
    MasculinAge : 19Messages : 25

    le Ven 23 Jan 2015 - 23:12

    également merci! Razz
    Synny
    Synny
    FémininAge : 18Messages : 55

    le Sam 24 Jan 2015 - 8:42

    J'aime. *^* Merci !
    Hayate747
    Hayate747
    MasculinAge : 30Messages : 196

    le Sam 24 Jan 2015 - 10:56

    Merci !!
    Ryukaï
    Ryukaï
    MasculinAge : 21Messages : 628

    le Sam 24 Jan 2015 - 19:30

    Félicitation!! c'est trop de la balle!!



    PA simple & neutre / 6 blocs  15796010 PA simple & neutre / 6 blocs  14749110
    Freshdaw
    Freshdaw
    FémininAge : 24Messages : 14

    le Dim 25 Jan 2015 - 22:10

    Merci ! :)
    Filou
    Filou
    FémininAge : 28Messages : 162

    le Dim 25 Jan 2015 - 23:11

    J'ai du mal à comprendre comment vous arriver à mettre une vidéo sur une PA °-°
    Joli travail ! :3
    Pollux
    Pollux
    FémininAge : 29Messages : 97

    le Dim 1 Fév 2015 - 1:17

    Merciii
    Spliff
    Spliff
    MasculinAge : 27Messages : 26

    le Dim 1 Fév 2015 - 1:48

    Merci pour cette PA c'est good !
    Miss Tigri
    Miss Tigri
    FémininAge : 25Messages : 89

    le Lun 2 Fév 2015 - 15:29

    Merci beaucoup !
    ELLAENYS
    ELLAENYS
    FémininAge : 34Messages : 127

    le Lun 2 Fév 2015 - 16:41

    Merci beaucoup !



    PA simple & neutre / 6 blocs  478222tumblrm03ndpsPY21qb5heyo3r2500
    Haniwa
    Haniwa
    FémininAge : 25Messages : 206

    le Mer 4 Fév 2015 - 16:26

    Merci
    PrincesseÔ
    PrincesseÔ
    FémininAge : 22Messages : 220

    le Ven 6 Fév 2015 - 20:21

    J'aime ! Merci ! :)
    damon w salvatore
    damon w salvatore
    FémininAge : 31Messages : 109

    le Sam 7 Fév 2015 - 17:01

    merci
    Err0r
    Err0r
    FémininAge : 26Messages : 134

    le Lun 9 Fév 2015 - 1:21

    sympa *-*



    PA simple & neutre / 6 blocs  150519095409324327
    Rara
    Rara
    FémininAge : 23Messages : 87

    le Mar 10 Fév 2015 - 0:56

    Merci!
    Noruenu
    Noruenu
    FémininAge : 27Messages : 123

    le Mar 10 Fév 2015 - 5:15

      Merci ! :B
    Obsidienne*
    Obsidienne*
    FémininAge : 25Messages : 13

    le Mar 10 Fév 2015 - 17:57

    Très jolie merci Very Happy
    Rogue Titan
    Rogue Titan
    FémininAge : 24Messages : 52

    le Mer 11 Fév 2015 - 15:41

    Merci pour la PA
    cosmos-chann
    cosmos-chann
    FémininAge : 22Messages : 115

    le Jeu 12 Fév 2015 - 18:02

    merciiii !
    Ukrysis
    Ukrysis
    FémininAge : 23Messages : 64

    le Jeu 12 Fév 2015 - 22:53

    Merci beaucoup pour cette PA simple mais très bien construite et efficace, je me permets de l'utiliser pour mon propre forum. Vous aurez droit à une place dans nos crédits. (En plus de ceux déjà sur le codage, bien évidemment). Bonne soirée !
    Kiki*
    Kiki*
    FémininAge : 23Messages : 32

    le Ven 13 Fév 2015 - 14:27

    Merci !
    Nathouille
    Nathouille
    FémininAge : 28Messages : 70

    le Dim 15 Fév 2015 - 19:22

    Je vais essayer, merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 6 Déc 2019 - 2:00