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.

Le Deal du moment : -20%
Figurine Herbizarre N°76 – Collection Super ...
Voir le deal
11.99 €

    PA en image de fond /!\Templates!/!\

    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Lun 30 Juin 2014 - 23:35

    Rappel du premier message :

    Page d'accueil



    Ceci est un code de PA crée suite à la Demande de Flower_*, ici.

    CSS3 & HTML5 ▬ phpBB2 ▬ Ce que ça donne


    L'image de fond n'est pas fournie, et il se peut que vous ayez, selon votre image, besoin de changer les positions! Notez également qu'il faut toucher aux templates!!!
    L'image en exemple fait 750*450px (les dimensions peuvent être changées dans le CSS)


    Les effets


    Infobulle sur els groupes pour marquer le nombre de points. Au passage de la souris sur les images du staff, un nouveau Nom & Prénom et rang s'affichent. Effets sur les liens.
    La PA est donc définie en plusieurs blocs: celui de l'histoire, celui de "en ce moment", celui du staff, celui du groupe et enfin celui de nouveautés/liens utiles (qui cmpte comme un seul bloc). Pour ne pas avoir à changer les positions, tentez davoir une structure de PA assez similaire à l'exemple.

    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_body /!\ Mettez juste à la place de la PA, ne remplacez pas le template par ce code! Donc entre BEGIN et END de message_admin_index (balises présentes dans le code) /!\ :
    Code:
    <!-- BEGIN message_admin_index -->
    <div id="la_pa">
      <!-- BEGIN message_admin_titre -->
      <!-- END message_admin_titre -->
      <!-- BEGIN message_admin_txt -->
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
    </div>
    <!-- END message_admin_index -->

    Code HTML à placer dans Affichage -> Page d'accueil -> Généralités :
    Code:
    <script type="text/javascript">
            //<!--
                    function change_onglet_pa(name)
                    {
                            document.getElementById('onglet_pa_'+anc_onglet_pa).className = 'staffeux_inactif';
                            document.getElementById('onglet_pa_'+name).className = 'staffeux_actif';
                            document.getElementById('contenu_onglet_pa_'+anc_onglet_pa).style.opacity = '0';
                            document.getElementById('contenu_onglet_pa_'+name).style.opacity = '1';
                            anc_onglet_pa = name;
                    }
            //-->
    </script> <script type="text/javascript">
            //<!--
                    var anc_onglet_pa = 'staff_un';
                    change_onglet_pa(anc_onglet_pa);
            //-->
    </script>
    <div id="bloc_histoire">
     
      <h1>
          Notre histoire
      </h1>
     
      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisl tellus, iaculis ac nunc sed, aliquet vulputate felis. Proin euismod turpis vel cursus ullamcorper. Quisque lacus mauris, sollicitudin a pretium non, feugiat non neque. Ut posuere hendrerit suscipit. Aenean non mattis enim. Sed arcu arcu, iaculis vel tortor at, auctor consequat ante. Morbi eu imperdiet tortor. Praesent non placerat eros.<br /><br />Nunc laoreet enim nec purus tempus bibendum. Etiam non hendrerit justo. Nam feugiat diam eu felis vulputate, sit amet tempus massa fringilla. Integer id arcu eget leo venenatis aliquet nec sit amet elit. Sed adipiscing, nibh et tempus eleifend, felis neque aliquam urna, et lobortis mi ipsum sit amet neque. Curabitur vitae justo suscipit, auctor metus commodo, iaculis lectus. Nam risus eros, viverra sit amet quam nec, sodales molestie nibh. Duis sagittis felis eu tortor placerat dictum. Aliquam cursus iaculis ultrices. Quisque eget justo nunc. Nam ultricies, nunc et eleifend vestibulum, libero purus tincidunt magna, hendrerit euismod arcu erat vitae quam. Nam lacus sapien, rutrum eget feugiat luctus, porttitor nec mauris. Nulla ornare, quam ac varius fermentum, mauris mauris luctus enim, ut tristique dui sem vulputate velit. <a href="#">La suite...</a>
      </p>
     
      <div id="histoire_separateur">
          <img src="http://oi61.tinypic.com/2h4m3c5.jpg" /><img src="http://oi61.tinypic.com/2h4m3c5.jpg" /><img src="http://oi61.tinypic.com/2h4m3c5.jpg" />
      </div>
     
      <div id="contenu_staff">
         
          <div class="contenu_onglet_pa" id="contenu_onglet_pa_staff_un">
           
            <h3>
                Nom & Prénom 1
            </h3>
              Rang
          </div>
         
          <div class="contenu_onglet_pa" id="contenu_onglet_pa_staff_deux">
           
            <h3>
                Nom & Prénom 2
            </h3>
              Rang
          </div>
         
          <div class="contenu_onglet_pa" id="contenu_onglet_pa_staff_trois">
           
            <h3>
                Nom & Prénom 3
            </h3>
              Rang
          </div>
         
          <div class="contenu_onglet_pa" id="contenu_onglet_pa_staff_quatre">
           
            <h3>
                Nom & Prénom 4
            </h3>
              Rang
          </div>
         
          <div class="contenu_onglet_pa" id="contenu_onglet_pa_staff_cinq">
           
            <h3>
                Nom & Prénom 5
            </h3>
              Rang
          </div>
         
          <div class="contenu_onglet_pa" id="contenu_onglet_pa_staff_six">
           
            <h3>
                Nom & Prénom 6
            </h3>
              Rang
          </div>
         
      </div>
    </div>
    <div id="bloc_staff">
        <span class="staffeux_inactif" id="onglet_pa_staff_un" onmouseover="javascript:change_onglet_pa('staff_un');"> </span><span class="staffeux_inactif" id="onglet_pa_staff_deux" onmouseover="javascript:change_onglet_pa('staff_deux');"></span><span class="staffeux_inactif" id="onglet_pa_staff_trois" onmouseover="javascript:change_onglet_pa('staff_trois');"></span><span class="staffeux_inactif" id="onglet_pa_staff_quatre" onmouseover="javascript:change_onglet_pa('staff_quatre');"></span><span class="staffeux_inactif" id="onglet_pa_staff_cinq" onmouseover="javascript:change_onglet_pa('staff_cinq');"></span><span class="staffeux_inactif" id="onglet_pa_staff_six" onmouseover="javascript:change_onglet_pa('staff_six');"></span>
    </div>
    <div id="bloc_actuellement">
     
      <h1>
          En ce moment...
      </h1>
     
      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisl tellus, iaculis ac nunc sed, aliquet vulputate felis. Proin euismod turpis vel cursus ullamcorper. Quisque lacus mauris, sollicitudin a pretium non, feugiat non neque. Ut posuere hendrerit suscipit. Aenean non mattis enim. Sed arcu arcu, iaculis vel tortor at, auctor consequat ante. Morbi eu imperdiet tortor. Praesent non placerat eros.<br /><br />Nunc laoreet enim nec purus tempus bibendum. Etiam non hendrerit justo. Nam feugiat diam eu felis vulputate, sit amet tempus massa fringilla. Integer id arcu eget leo venenatis aliquet nec sit amet elit. Sed adipiscing, nibh et tempus eleifend, felis neque aliquam urna, et lobortis mi ipsum sit amet neque. Curabitur vitae justo suscipit, auctor metus commodo, iaculis lectus. Nam risus eros, viverra sit amet quam nec, sodales molestie nibh. Duis sagittis felis eu tortor placerat dictum. Aliquam cursus iaculis ultrices. Quisque eget justo nunc. Nam ultricies, nunc et eleifend vestibulum, libero purus tincidunt magna, hendrerit euismod arcu erat vitae quam. Nam lacus sapien, rutrum eget feugiat luctus, porttitor nec mauris. Nulla ornare, quam ac varius fermentum, mauris mauris luctus enim, ut tristique dui sem vulputate velit. <a href="#">La suite...</a>
      </p>
    </div>
    <div id="bloc_news">
     
      <div id="partie_gauche_news">
         
          <h2 class="gauche">
              Nouveautés
          </h2>
         
          <p>
           
            <marquee style="height: 74px;" behavior="scroll" scrollamount="1" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
                <span class="une_news"><span class="sa_date">XX</span> - la nouvelle <a href="#">son lien</a></span> <span class="une_news"><span class="sa_date">XX</span> - la nouvelle <a href="#">son lien</a></span> <span class="une_news"><span class="sa_date">XX</span> - la nouvelle <a href="#">son lien</a></span> <span class="une_news"><span class="sa_date">XX</span> - la nouvelle <a href="#">son lien</a></span> <span class="une_news"><span class="sa_date">XX</span> - la nouvelle <a href="#">son lien</a></span>
            </marquee>
           
          </p>
         
      </div>
     
      <div id="news_separateur">
          <img src="http://oi61.tinypic.com/2h4m3c5.jpg" /><img src="http://oi61.tinypic.com/2h4m3c5.jpg" /><img src="http://oi61.tinypic.com/2h4m3c5.jpg" />
      </div>
     
      <div id="partie_droite_news">
         
          <p>
              <a href="#">Petit lien</a> <a href="#">Petit lien</a> <a href="#">Petit lien</a> <a href="#">Petit lien</a> <a href="#">Petit lien</a> <a href="#">Petit lien</a>
          </p>
         
          <h2 class="droite">
              Liens utiles
          </h2>
         
      </div>
    </div>
    <div id="bloc_groupes">
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
     
      <div class="conteneur_staff">
         
          <div class="points_groupe">
              X Points
          </div>
         
      </div>
    </div>

    Le CSS:
    Code:
    /********** DÉBUT PA **********/
    /* Crée la PA et la place */
    #la_pa {
      position: relative;
      /* Taille */
      width: 750px;
      height: 450px;
      margin: auto;
      /* Image de fond */
      background-image: url('VOTRE_IMAGE_DE_FOND_ICI');
      background-position: top left;
      background-repet: no-repeat;
    }

    /* Met en forme tous les titre (h1) de la pa */
    #la_pa h1 {
      margin: 0;
      background: none;
      font-weight: normal;
      width: 100%;
      text-align: center;
      font-size: 15pt;
      margin-top: -13px;
    }

    /* Met en forme tous les titres (h2) de la PA */
    #la_pa h2 {
      margin: 0;
      background: none;
      font-weight: normal;
      font-size: 13pt;
    }

    /* Positionnement du bloc histoire */
    #bloc_histoire {
      position: absolute;
      top: 100px;
      left: 45px;
      width: 300px;
      height: 245px;
    }

    /* Mise en forme du paragraphe contenant l'histoire */
    #bloc_histoire p {
      /* Taille */
      width: 273px;
      height: 108px;
      padding: 5px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

    /* Met en forme les liens dans le paragraphe d'histoire */
    #bloc_histoire p a {
      text-decoration: none !important;
      font-weight: bold;
      /* Couleur */
      color: white;
      transition: all ease 1s;
    }

    /* Mise en forme du lien dans le paragraphe d'histoire au passage de la souris */
    #bloc_histoire p a:hover {
      text-decoration: none !important;
      /* Couleur */
      color: black;
      transition: all ease 1s;
    }

    /* Sépare le paragraphe histoire avec le contenu des onglets de staff */
    #histoire_separateur {
      width: 100px;
      height: 33px;
      margin: auto;
      overflow: hidden;
    }

    /* Mise en forme du contenu du staff (bloc) */
    #contenu_staff {
      /* Obligatoire */
      position: relative;
      /* Taille */
      width: 279px;
      height: 62px;
      margin: auto;
      /* Obligatoire */
      overflow: hidden;
    }

    /* Met en forme le contenu des onglets des staff */
    .contenu_onglet_pa {
      position: absolute;
      top: 0;
      left: 0;
      width: 269px;
      height: 52px;
      padding: 5px;
      overflow: auto;
      text-align: center;
      opacity: 0;
      transition: all ease 1s;
    }

    /* Met en forme le Pseudo d staff */
    .contenu_onglet_pa h3 {
      margin: 0;
      font-weight: normal;
      background: none;
      width: 100%;
      text-align: center;
      font-size: 13pt;
    }

    /* Positionne le bloc du staff */
    #bloc_staff {
      position: absolute;
      bottom: 35px;
      left: 40px;
      /* Taille */
      width: 325px;
      height: 60px;
    }

    /* Permet de placer chaque image du staff */
    .staffeux_inactif, .staffeux_actif {
      display: inline-block;
      vertical-align:top;
      /* Taille */
      width: 36px;
      height: 45px;
      margin-top: 10px;
      /* Marges permettant de les mettre à la bonne place */
      margin-left: 6px;
      margin-right: 11px;
      overflow: hidden;
    }

    /* Préparation pour l'effet sur l'image du staff active */
    .staffeux_inactif {
      box-shadow: 0px 0px 0px white;
      transition: all ease 1s;
    }


    /* Effet sur l'image du staff active */
    .staffeux_actif {
      box-shadow: 0px 0px 5px white;
      transition: all ease 1s;
    }

    /* Image du 1er membre du staff */
    #onglet_pa_staff_un {
      background-image: url('http://i39.servimg.com/u/f39/09/03/38/36/ilae7t10.png');
      background-position: center;
      background-size: auto 45px;
    }

    /* Image du 2ième membre du staff */
    #onglet_pa_staff_deux {
      background-image: url('http://i39.servimg.com/u/f39/09/03/38/36/ilae7t10.png');
      background-position: center;
      background-size: auto 45px;
    }

    /* Image du 3ième membre du staff */
    #onglet_pa_staff_trois {
      background-image: url('http://i39.servimg.com/u/f39/09/03/38/36/ilae7t10.png');
      background-position: center;
      background-size: auto 45px;
    }

    /* Image du 4ième membre du staff */
    #onglet_pa_staff_quatre {
      background-image: url('http://i39.servimg.com/u/f39/09/03/38/36/ilae7t10.png');
      background-position: center;
      background-size: auto 45px;
    }

    /* Image du 5ième membre du staff */
    #onglet_pa_staff_cinq {
      background-image: url('http://i39.servimg.com/u/f39/09/03/38/36/ilae7t10.png');
      background-position: center;
      background-size: auto 45px;
    }

    /* Image du 6ième membre du staff */
    #onglet_pa_staff_six {
      background-image: url('http://i39.servimg.com/u/f39/09/03/38/36/ilae7t10.png');
      background-position: center;
      background-size: auto 45px;
    }

    /* Place le bloc actuellement */
    #bloc_actuellement {
      position: absolute;
      top: 102px;
      right: 55px;
      /* Taille */
      width: 300px;
      height: 140px;
    }

    /* Met en forme le paragraphe d'actuellement */
    #bloc_actuellement p {
      width: 254px;
      height: 103px;
      padding: 5px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

    /* Met en forme les liens d'actuellement */
    #bloc_actuellement p a {
      text-decoration: none !important;
      font-weight: bold;
      color: white;
      transition: all ease 1s;
    }

    /* Au passage de la souris */
    #bloc_actuellement p a:hover {
      text-decoration: none !important;
      color: black;
      transition: all ease 1s;
    }

    /* Place le bloc des news */
    #bloc_news {
      position: absolute;
      top: 251px;
      right: 55px;
      width: 300px;
      height: 92px;
    }

    /* Mise en forme de la partie fauche */
    #partie_gauche_news {
      display: inline-block;
      vertical-align: middle;
      /* Taille */
      width: 130px;
      height: 92px;
    }

    /* Mise en forme du paragraphe des nouvelles */
    #partie_gauche_news p {
      display: block;
      width: 115px;
      height: 74px;
      margin: auto;
      overflow: hidden;
    }

    /* Mise ne forme d'une news: permet de les séparer */
    .une_news {
      display: block;
      margin-bottom: 2px;
    }

    /* Mise en forme de la date d'une news */
    .une_news .sa_date {
      color: white;
      font-style: italic;
    }

    /* Mise en forme du lien d'une news */
    .une_news a {
      color: black;
      font-weight: bold;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Au passage de la souris */
    .une_news a:hover {
      color: white;
      text-decoration: none !important;
      transition: all ease 1s;
    }
     
    /* Séparation entre les news et les liens */
    #news_separateur {
      display: inline-block;
      vertical-align: middle;
      width: 33px;
      height: 92px;
      overflow: hidden;
    }

    /* Permet de rendre les images plus proches en hauteur */
    #news_separateur img {
      display: block;
      margin-bottom: -3px;
    }

    /* Mise en forme de la partie droite des news */
    #partie_droite_news {
      display: inline-block;
      vertical-align: middle;
      /* Taille */
      width: 120px;
      height: 92px;
    }

    /* Mise en forme du paragrahe des liens */
    #partie_droite_news p {
      display: block;
      width: 115px;
      height: 77px;
      padding-top: 10px;
      margin-top: 10px;
      margin: auto;
      overflow: auto;
    }

    /* Mise en forme des liens rapides */
    #partie_droite_news p a {
      display: block;
      width: 100%;
      text-align: center;
      color: black;
      letter-spacing: 0px;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Au passage de la souris */
    #partie_droite_news p a:hover {
      letter-spacing: 2px;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Permet de placer le titre de gauche des news */
    h2.gauche {
      width: 100%;
      text-align: left;
      margin-top: -10px !important;
    }

    /* Permet de placer le titre de droite des news */
    h2.droite {
      width: 100%;
      text-align: right;
      margin-top: -5px !important;
    }

    /* Place les groupes */
    #bloc_groupes {
      position: absolute;
      bottom: 30px;
      right: 30px;
      width: 330px;
      height: 65px;
    }

    /* Crée un bloc pour chaque groupe */
    .conteneur_staff {
      position: relative;
      display: inline-block;
      vertical-align: top;
      /* Taille */
      width: 40px;
      height: 62px;
      /* Espace qui sépare chaque groupe sur la droite */
      margin-left: 2px;
    }

    /* Mise en forme de l'infobulle de points pour les groupes */
    .conteneur_staff .points_groupe {
      position: absolute;
      /* Position */
      top: 65px;
      left: 5px;
      /* Taille */
      width: 50px;
      height: 10px;
      padding: 5px;
      text-align: center;
      font-weight: bold;
      /* Pour qu'elle ne s'affiche pas */
      opacity: 0;
      visibility: hidden;
      transition: all ease 1s;
    }

    /* Infobulle au passage de la souris (apparition) */
    .conteneur_staff:hover .points_groupe {
      opacity: 1;
      visibility: visible;
      transition: all ease 1s;
    }
    /********** FIN PA **********/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.



    Angy38
    Angy38
    FémininAge : 50Messages : 232

    le Lun 6 Oct 2014 - 11:18

    Merci



    PA en image de fond /!\Templates!/!\ - Page 2 Jvie
    Nasu
    Nasu
    FémininAge : 23Messages : 70

    le Mar 7 Oct 2014 - 9:57

    Superbe. *-*
    ~Nodoka~
    ~Nodoka~
    FémininAge : 23Messages : 185

    le Ven 10 Oct 2014 - 16:53

    merci
    Merino
    Merino
    MasculinAge : 25Messages : 55

    le Sam 18 Oct 2014 - 14:58

    Merci d'avance! :)
    misssrubi
    misssrubi
    FémininAge : 29Messages : 66

    le Dim 19 Oct 2014 - 1:11

    Merci pour cette magnifique PA ♥



    PA en image de fond /!\Templates!/!\ - Page 2 Green_10
    Doo
    Doo
    FémininAge : 29Messages : 42

    le Ven 24 Oct 2014 - 21:31

    merci ♥♥
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 20Messages : 298

    le Sam 25 Oct 2014 - 11:20

    Superbe, merci *o*



    Just want to be yours.
    Nevr0z
    Nevr0z
    FémininAge : 31Messages : 74

    le Dim 26 Oct 2014 - 1:52

    Merci :) !
    louchielulue
    louchielulue
    FémininAge : 29Messages : 32

    le Jeu 30 Oct 2014 - 10:15

    merci Very Happy
    Nonze
    Nonze
    MasculinAge : 26Messages : 85

    le Dim 2 Nov 2014 - 12:15

    merci
    Suika
    Suika
    FémininAge : 25Messages : 30

    le Lun 3 Nov 2014 - 11:01

    trop bien, merci!
    Celska
    Celska
    FémininAge : 25Messages : 38

    le Lun 3 Nov 2014 - 16:51

    Mon dieu, trop bien, ça faisait tellement longtemps que je voulais en faire une ! *^* Merci à toi !



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    Dahlia
    Dahlia
    FémininAge : 23Messages : 32

    le Lun 3 Nov 2014 - 22:48

    merci du partage <3
    Presley♥Cash
    Presley♥Cash
    FémininAge : 29Messages : 80

    le Sam 8 Nov 2014 - 23:55

    Merci ♥
    Fame
    Fame
    MasculinAge : 30Messages : 240

    le Sam 20 Déc 2014 - 7:05

    Merci
    Chèlha
    Chèlha
    FémininAge : 27Messages : 121

    le Sam 20 Déc 2014 - 19:11

    Merci, c'est super !
    Aurifereis
    Aurifereis
    MasculinAge : 27Messages : 39

    le Mar 23 Déc 2014 - 14:17

    Merci du partage
    Sweet Angel
    Sweet Angel
    FémininAge : 37Messages : 153

    le Mer 24 Déc 2014 - 11:09

    Intéressant, thanks
    castamere rains
    castamere rains
    FémininAge : 24Messages : 16

    le Ven 26 Déc 2014 - 17:12

    depuis le temps que je recherche ça merci!
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 28Messages : 64

    le Sam 10 Jan 2015 - 0:31

    superbe Very Happy




    PA en image de fond /!\Templates!/!\ - Page 2 478753Chantal
    MxPrime2
    MxPrime2
    MasculinAge : 26Messages : 81

    le Sam 10 Jan 2015 - 1:47

    Merci beaucoup !
    British Cookie
    British Cookie
    FémininAge : 29Messages : 34

    le Mar 13 Jan 2015 - 18:10

    merci !
    F.a.m.e
    F.a.m.e
    MasculinAge : 30Messages : 12

    le Ven 13 Fév 2015 - 17:39

    Merci beaucoup pour le partage Very Happy
    Valeriane
    Valeriane
    FémininAge : 35Messages : 29

    le Dim 1 Mar 2015 - 12:51

    merci
    Tempy
    Tempy
    FémininAge : 22Messages : 76

    le Sam 7 Mar 2015 - 14:36

    Merci beaucoup du code !
    Contenu sponsorisé


      La date/heure actuelle est Lun 3 Aoû 2020 - 23:16