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 :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    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 !
    Shide
    Shide
    FémininAge : 35Messages : 60

    Dim 28 Fév 2016 - 13:29

    merci j'adore
    Gloomi
    Gloomi
    FémininAge : 28Messages : 2

    Dim 28 Fév 2016 - 14:58

    Page d'accueil sympa et aérée comme je les aimes.
    Merci !! :friends:
    Thanos
    Thanos
    MasculinAge : 28Messages : 84

    Mer 2 Mar 2016 - 3:22

    Merci
    tsuki59
    tsuki59
    FémininAge : 33Messages : 6

    Mar 15 Mar 2016 - 17:47

    Merci, c'est simple et jolie =)
    Azorus
    Azorus
    MasculinAge : 23Messages : 35

    Mer 16 Mar 2016 - 18:45

    :yay:



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 56Messages : 167

    Dim 20 Mar 2016 - 17:32

    Bravo jolie travaille!
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 32Messages : 64

    Mar 22 Mar 2016 - 19:09

    superbe




    PA simple & neutre / 6 blocs  - Page 6 478753Chantal
    Zarwins
    Zarwins
    FémininAge : 28Messages : 155

    Dim 27 Mar 2016 - 7:24

    Merci :O



    PA simple & neutre / 6 blocs  - Page 6 121217030106243656
    Loona
    Loona
    FémininAge : 57Messages : 22

    Lun 11 Avr 2016 - 12:54

    Merci beaucoup.



    PA simple & neutre / 6 blocs  - Page 6 Signat10
    Lily Andrew
    Lily Andrew
    FémininAge : 21Messages : 17

    Mar 12 Avr 2016 - 11:12

    Merci beaucoup !
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Lun 18 Avr 2016 - 17:59

    merci !
    marie-noelle
    marie-noelle
    FémininAge : 67Messages : 112

    Ven 22 Avr 2016 - 1:14

    merci beaucoup
    RPG Maker
    RPG Maker
    FémininAge : 30Messages : 53

    Sam 30 Avr 2016 - 20:05

    Très joli, merci. ^^
    Edward Speleers
    Edward Speleers
    MasculinAge : 36Messages : 460

    Mer 18 Mai 2016 - 19:03

    C'est tout ce qu'il me faut - merci



    PA simple & neutre / 6 blocs  - Page 6 Edkidd11
    Mabari
    Mabari
    FémininAge : 32Messages : 5

    Mer 25 Mai 2016 - 13:33

    Merci!
    Qazea
    Qazea
    MasculinAge : 28Messages : 206

    Mer 25 Mai 2016 - 15:58

    S.P.L.E.N.D.I.D.E !
    Ashem
    Ashem
    FémininAge : 39Messages : 255

    Jeu 26 Mai 2016 - 18:27

    merciiiiiiiiiiiii
    SectumSempra
    SectumSempra
    FémininAge : 27Messages : 81

    Ven 27 Mai 2016 - 16:06

    Merci beaucoup :coeur:
    Mistiny
    Mistiny
    FémininAge : 21Messages : 23

    Mer 1 Juin 2016 - 11:54

    J'aime beaucoup, merci !
    Dearborn
    Dearborn
    FémininAge : 30Messages : 112

    Lun 13 Juin 2016 - 19:37

    Merci!
    Tomboy.
    Tomboy.
    FémininAge : 28Messages : 5

    Jeu 16 Juin 2016 - 20:35

    J'aime beaucoup, merci :)
    Anonymous
    Invité

    Mar 5 Juil 2016 - 19:13

    Merci beaucoup, je vais essayer cette belle PA dès maintenant !
    ShiShi_Chan
    ShiShi_Chan
    MasculinAge : 35Messages : 51

    Sam 16 Juil 2016 - 17:15

    Merki ! Good Job :3
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Dim 17 Juil 2016 - 1:03

    Super merci beaucoup !!
    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 45Messages : 92

    Dim 17 Juil 2016 - 15:41

    Merci beaucoup pour le partage ! :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:35