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 : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €

    PA Simple (News, Staff, Contexte & groupes)

    Henrykiki
    Henrykiki
    MasculinAge : 31Messages : 576

    Lun 29 Déc 2014 - 21:29

    Bonjour à tous,

    Voici un LS de PA style Attack on Titan hivernale.
    Elle vous est proposée suite à la demande de Mikasa.


    Aperçus : normale - survol du staff - en ligne


    Cette PA contient :

    • Un espace groupes pour 5 groupes
    • Un espace Staff + pseudo qui s'affiche au survol
    • Un espace News qui défilent + arrêt au survol.
    • Un espace Recrutement qui défilent + arrêt au survol.
    • Un espace Contexte.


    L'installation


    Création de la page html


    Rendez-vous sur votre panneau d'administration > modules > Gestion des pages HTML > Création en mode avancé. Donnez un titre a celle-ci : Pa-hivernale, par exemple, et collez-y le code ci-dessous :

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
       <meta charset="UTF-8">
       <title>Pa - Mikasa</title>
       <link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>

       <style>
          /* ici tous les textes avec la typo spéciale sont visés */
          #liens-nav a, #blocs td h2, ul#staffs li span {
             font-family: 'Rye', cursive;
          }

          /* pour ne pas devoir chercher tous les blocs qui ont la font */

          #pa {
             width: 800px; height: 400px;
             margin: 0 auto;
             background: url("http://i59.servimg.com/u/f59/18/77/81/63/pa_mod12.png") no-repeat;
             background-position: -2px; /*Ajustement du fond pour positionnement des blasons*/
             font-family: sans-serif;
             font-size: 12px;
             letter-spacing: .5px;
             position: relative;
          }

          #pa a {
             -webkit-transition: all .2s linear;
             -moz-transition: all .2s linear;
             -ms-transition: all .2s linear;
             transition: all .2s linear;
          }

          #liens-nav {
             text-align: center;
          }

          @-webkit-keyframes jingle {
             0% {-webkit-transform: rotate(-3deg);}
             33% {-webkit-transform: rotate(-0deg);}
             66% {-webkit-transform: rotate(3deg);}
             100% {-webkit-transform: rotate(0deg);}
          }

          @-moz-keyframes jingle {
             0% {-moz-transform: rotate(-3deg);}
             33% {-moz-transform: rotate(-0deg);}
             66% {-moz-transform: rotate(3deg);}
             100% {-moz-transform: rotate(0deg);}
          }

          @-ms-keyframes jingle {
             0% {-ms-transform: rotate(-3deg);}
             33% {-ms-transform: rotate(-0deg);}
             66% {-ms-transform: rotate(3deg);}
             100% {-ms-transform: rotate(0deg);}
          }

          @keyframes jingle {
             0% {transform: rotate(-3deg);}
             33% {transform: rotate(-0deg);}
             66% {transform: rotate(3deg);}
             100% {transform: rotate(0deg);}
          }

          #liens-nav a {
             font-size: 15px;
             color: #416139;
             text-decoration: none;
             display: block;
             padding-top: 70px; /* permet de faire croire que les blasons sont des liens */
             font-weight: normal;
          }

          #liens-nav a:hover {
             color: #811420;
             -webkit-animation: jingle .35s linear infinite;
             -moz-animation: jingle .35s linear infinite;
             -ms-animation: jingle .35s linear infinite;
             animation: jingle .35s linear infinite;      }

          #blocs {
             position: relative;
             bottom: -10px;
          }

          #blocs td {
             vertical-align: top;
             position: relative;
             padding: 5px;
          }

          #blocs td h2 {
             position: absolute;
             top: -15px; right: 0;
             margin: 0; padding: 0;
             font-size: 18px;
             font-weight: normal;
             display: block;
             width: 100%;
             color: #7e161e;
          }

          #blocs td.news, #blocs td.need {
             width: 150px; max-width: 150px;
             height: 80px; max-height: 80px;
          }

          #blocs td.contexte {
             width: 180px; max-width: 180px;
          }

          #blocs td.contexte, #blocs td.news, #blocs td.need {
             background: #f2f2f2;
             border-radius: 5px 0px 5px 5px;
             border-bottom: 1px solid lightgray;
             border-left: 1px solid lightgray;
          }

          #content-contexte {
             height: 200px;
             overflow-y: scroll;
             padding-right: 10px;
          }

          h2.center {   
             max-width: 220px;
             text-align: center;
             bottom: 0px !important;
             top: auto !important;
             left: 0;
          }

          h2.right {
             text-align: right;
             padding-right: 5px !important;
          }
          
          .news a, .need a {
             color: #000;
             text-decoration: none;
          }

          .news a:hover, .need a:hover {
             color: #7e161e;
          }
          .news p, .need p {
             padding: 5px 0;
             margin: 0;
             border-bottom: 1px solid #416139;
          }

          .news p strong, .need p strong{
             display: block;
          }

          ul#staffs {
             position: absolute;
             bottom: -16px;
             left: -8px;
             width: 225px;
             height: 105px;
             list-style-type: none;
             padding:0; margin: 0;
             text-align: center;
             overflow-y: auto;
          }

          ul#staffs li {
             width: 90px; height: 90px;
             overflow: hidden;
             background: orange;
             padding:0; margin: 0px 5px 5px;
             display: inline-block;
          }

          ul#staffs li span {
             position: absolute;
             top: -25px;
             display: inline-block;
             width: 90px;
             padding: 5px 0px;
             background: rgba(255,255,255,.7);
             color: #7e161e;
             -webkit-transition: top .2s ease-in-out;
             -moz-transition: top .2s ease-in-out;
             -ms-transition: top .2s ease-in-out;
             transition: top .2s ease-in-out;
          }

          ul#staffs li:hover span {
             position: absolute;
             top: 0px;
             display: inline-block;
             width: 90px; height: 14px;
             overflow: hidden;
             padding: 5px 0px;
             background: rgba(255,255,255,.7);
             color: #7e161e;
          }

          #credits {
             position: absolute;
             bottom: -20px; right: 0;
             text-align: right;
             font-family: sans-serif;
             font-size: 12px;
             padding: 3px 0;
             color: #99c6dd;
          }

          #credits a {
             padding-left: 20px;
             background: url("http://img4.hostingpics.net/pics/171045Ship.png") no-repeat left;
             background-size: 14px 14px;
             color: #7699ab !important;
             text-decoration: none !important;
             border: 0px !important;
          }
          
          #credits a:hover {
             color: #536b78 !important;
             background-position: 3px
          }
       </style>
    </head>
    <body>
       <div id="pa">
          <table align="center" width="710px" id="liens-nav">
             <tr>
                <td width="20%"><a href="1">Wall People</a></td>
                <td width="20%"><a href="1">Garnison</a></td>
                <td width="20%"><a href="1">Military Police</a></td>
                <td width="20%"><a href="1">Survey Corps</a></td>
                <td width="20%"><a href="1">Trainees squad</a></td>
             </tr>
          </table>
          
          <table align="center" width="740px" height="247px" id="blocs" cellspacing="20px">
             <tr>
                <td>
                   <!-- Laisser vide = espace au dessus de staff -->
                   <h2 class="center">STAFF</h2>
                   <!-- Juste le titre va dans cette case, le contenu c'est plus loin ! -->
                </td>
                <td class="news">
                   <h2 class="right">News</h2>
                   <marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px"  onmouseover="this.stop();" onmouseout="this.start();">

                      <!-- Pour rajouter des news, juste copier/coller une ligne ci-dessous  -->
                      <p><a href=""><strong>Le titre</strong> l'info de la news?</a></p>
                      <p><a href=""><strong>Le titre :</strong> l'info de la news?</a></p>

                   </marquee>
                </td>
                <td class="contexte" rowspan="2">
                   <h2 class="right">Contexte</h2>
                   <div id="content-contexte">
                      <!-- Collez ici votre contexte :  -->
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, atque, nulla, consequatur impedit sapiente nostrum nisi blanditiis illum et tempora molestias odio natus qui esse explicabo assumenda voluptatum sit minima.</p>
                      
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, rerum, ipsam dicta laborum dignissimos inventore sunt odit laudantium beatae reprehenderit itaque autem necessitatibus delectus iure magni soluta incidunt quidem consectetur?</p>
                   </div>
                </td>
             </tr>
             <tr>
                <td>
                   <!-- CONTENU DE LA CASE STAFF => ICI :  -->
                   <ul id="staffs">
                      <li>
                         <span class="name">Henrykiki</span>
                         <img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF"></li>
                      <li>
                         <span class="name">Name</span>
                         <img src="http://i59.servimg.com/u/f59/18/77/81/63/mikasa11.png" alt="STAFF">
                      </li>
                      <!-- <li>STAFF 3</li>
                      <li>STAFF 4</li> -->
                   </ul>

                </td>

                <td class="need">
                   <h2 class="right">We need</h2>
                   <marquee behavior="scroll" direction="up" scrollamount="1" width="150px" height="80px"  onmouseover="this.stop();" onmouseout="this.start();">

                      <!-- Pour rajouter un poste, juste copier/coller une ligne ci-dessous  -->
                      <p><a href=""><strong>Le poste :</strong> description ?</a></p>
                      <p><a href=""><strong>Le poste :</strong> description ?</a></p>

                   </marquee>
                </td>
                <!-- <td></td> -->
             </tr>
          </table>

          <div id="credits">
             PA réalisée sur <a href="http://www.never-utopia.com/t52279-henrikiyi-pa-style-attack-on-titan-fond-image-hivernale" target="_blank">Never-Utopia</a>.
          </div>
       </div>
    </body>
    </html>

    Enregistrez. Ensuite, copiez quelque part l'adresse internet de cette page fraichement crée car nous en aurons besoin dans quelques instants.

    Installation de la page d'accueil


    Rendez-vous à l'emplacement de votre page d'accueil (PA>Affichage>Page d'accueil>Généralités) et collez-y ce code pour introduire une iframe...

    Code:
    <iframe src="HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" frameborder="0" scrolling="no" style="width: 800px; height: 400px;"></iframe>

    Et donc, remplacez "HTTP://ADRESSE-DE-LA-PAGE-HTML-RECEMMENT-CREE" par l'adresse de la page html que vous avez créée, dont je vous ai dis de garder l'URL quelque part...

    Les images correspondant aux groupes sont intégrées dans le fond de la PA, et donc, dans l'image utilisée pour le background de #pa ! (voir l'image de fond)


    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 !


    Dernière édition par Henrykiki le Jeu 15 Jan 2015 - 13:21, édité 1 fois



    Des bisous !
    Nezumi-liet
    Nezumi-liet
    FémininAge : 34Messages : 11

    Dim 4 Jan 2015 - 0:13

    Merci ^^
    Mikasa
    Mikasa
    FémininAge : 26Messages : 162

    Lun 5 Jan 2015 - 1:40

    Merci beaucoup d'avoir pris du temps pour faire cela ^^



    PA Simple (News, Staff, Contexte & groupes) Miksa210
    Signa:
    Anonymous
    Invité

    Jeu 22 Jan 2015 - 20:17

    Merci :)
    Venise
    Venise
    FémininAge : 40Messages : 270

    Ven 23 Jan 2015 - 13:18

    merci
    Nîniel
    Nîniel
    FémininAge : 28Messages : 70

    Sam 24 Jan 2015 - 15:44

    Merci



    PA Simple (News, Staff, Contexte & groupes) 1384099300-nini-nu-signa
    BlackSo
    BlackSo
    MasculinAge : 25Messages : 31

    Dim 15 Fév 2015 - 19:06

    merci du partage
    Théine
    Théine
    MasculinAge : 43Messages : 24

    Sam 7 Mar 2015 - 19:39

    Merci ! .o/
    avatar
    Phénix'
    FémininAge : 22Messages : 95

    Mer 1 Avr 2015 - 14:19

    Merci
    Moon Heart
    Moon Heart
    FémininAge : 23Messages : 37

    Mer 1 Avr 2015 - 19:59

    c'est très jolie ^^
    Kuroo
    Kuroo
    FémininAge : 26Messages : 44

    Ven 17 Avr 2015 - 20:01

    Merci
    Célestine
    Célestine
    FémininAge : 26Messages : 51

    Lun 4 Mai 2015 - 1:02

    Merci ! Very Happy
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Jeu 21 Mai 2015 - 22:49

    Merci :)



    picka234
    picka234
    FémininAge : 59Messages : 636

    Mer 10 Juin 2015 - 17:43

    tres beau merci
    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Jeu 11 Juin 2015 - 20:21

    Merci !
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Mar 28 Juil 2015 - 13:14

    merci
    Liberty Grim
    Liberty Grim
    FémininAge : 26Messages : 128

    Sam 1 Aoû 2015 - 11:52

    Waw ! Merci beaucoup Very Happy
    PitchiPitchiPitch
    PitchiPitchiPitch
    FémininAge : 26Messages : 21

    Mer 26 Aoû 2015 - 20:20

    merci du partage :)
    Anonymous
    Invité

    Mer 26 Aoû 2015 - 21:20

    Merci ! (; ̄Д ̄)
    Oupsie
    Oupsie
    FémininAge : 33Messages : 9

    Sam 26 Sep 2015 - 19:53

    Merci =)
    Sneakazuha
    Sneakazuha
    FémininAge : 28Messages : 34

    Mar 13 Oct 2015 - 9:40

    J'adore, merci ♥
    Sneakazuha
    Sneakazuha
    FémininAge : 28Messages : 34

    Mar 13 Oct 2015 - 9:40

    J'adore, merci ♥
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Ven 18 Déc 2015 - 18:37

    merci :)
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 30Messages : 69

    Ven 1 Jan 2016 - 15:40

    Merci pour la page. Elle est très belle ! :)



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    PA Simple (News, Staff, Contexte & groupes) 78216279872221
    Moro-PM
    Moro-PM
    FémininAge : 21Messages : 149

    Jeu 21 Jan 2016 - 19:21

    Merci ! **
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:48