LS For Everyone
LS for everyone

Forum de Libre Service - Codage et Graphisme


    Pages d'accueil sous iframe

    Adèlys
    Adèlys
    Adèlys
    Admin


    Messages : 42
    Date d'inscription : 08/03/2018
    • Message n°1

    Pages d'accueil sous iframe Empty Pages d'accueil sous iframe

    Message par Adèlys Lun 12 Mar - 19:38


      PA sous iframe

    >> Comment faire ?


    Vous allez devoir copier le code et aller  :

    Panneau d'administration → Modules → HTML & JAVASCRIPT → Gestion des pages HTML → Création en mode avancé


    Ici, vous écrivez un titre, vous collez le code (et accessoirement le modifier à votre guise) puis vous cliquez sur valider. Ensuite, vous copiez le lien qui est apparu dans la Gestion des pages HTML correspondant à votre code/votre titre, vous allez dans :

    Panneau d'administration → Affichage → Page d'accueil → Généralités → Message sur la page d'accueil


    Puis vous collez votre url avec ce code :

    Code:
    <center><iframe src="LIEN DE VOTRE PAGE HTML" frameborder="0" width="LARGEUR DU CODE" height="HAUTEUR DU CODE"></iframe></center>

    Puis vous cliquez sur "Enregistrer".
    Vous retournez sur votre forum et tadaaa ! Vous voilà avec votre PA toute belle !



    Dernière édition par Adèlys le Ven 13 Avr - 22:09, édité 1 fois
    • Revenir en haut
    Adèlys
    Adèlys
    Adèlys
    Admin


    Messages : 42
    Date d'inscription : 08/03/2018
    • Message n°2

    Pages d'accueil sous iframe Empty Re: Pages d'accueil sous iframe

    Message par Adèlys Lun 12 Mar - 19:57

    Lien vers l'aperçu : www

    Aperçu en image (sans hover) :


    Le code à mettre dans une page HTML :

    Code:
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8"/>
     
        <style type="text/css">
       
          body {
      margin: 0;
      padding: 0;
      width: 70%;
      height: 474px;
          overflow:hidden;
          }
     
          .pa-tableau {
      width: 1019px;
      background-color: rgb(154,204,255);
      border-spacing: 10px;
      box-sizing: border-box;
      text-align: left;
      font-family: Georgia;
      border: none;
      table-layout: fixed;
      margin: 0;
    }
          .pa-titre1 {
      background: white;
      padding: 5px;
      font-family: arial;
      text-transform: uppercase;
      font-weight: bold;
      color: #9accff;
      font-size: 20px;
      text-align: center;
    }
          .pa-nouveau {
          background: white;
          padding: 5px;
          height: 60px;
          overflow:auto;
          font-size: 12px;
          }
         
          .pa-staff {
          background: white;
          padding: 5px;
          }
         
          .pa-contexte {
          background: white;
          padding: 5px;
          font-family: Georgia;
          color: black;
          font-size: 13px;
          text-align: justify;
          overflow:auto;
          margin:0;
          height:220px;
          }
         
          .pa-lien {
          padding: 5px;
          font-size: 15px;
          text-align: justify;
          margin:0;
          }
         
          .pa-eventint {
          background: white;
          padding: 5px;
          font-family: Georgia;
          color: black;
          font-size: 13px;
          text-align: justify;
          overflow:auto;
          margin:0;
          height:86px;
          }
         
          a:link
    {
     text-decoration:none;
    }
         
          .pa-glisse-cadre {
      position: relative;
      overflow: hidden;
    }
    .pa-glisse-img {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      transition: top 0.5s ease-out;
    }
    .pa-glisse-cadre:hover .pa-glisse-img {
      top: -100%;
    }
         
          .pa-glissecadre {
      position: relative;
      overflow: hidden;
    }
         
    .pa-glisseimg {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      transition: bottom 0.5s ease-out;
    }

    .pa-glissecadre:hover .pa-glisseimg {
      bottom: -100%;
    }
     
          .pa-fondu-cadre {
      height: 85px;
      width: 85px;
      display: inline-block;
      vertical-align: top;
      margin: 3px;
    }
    .pa-fondu-contenu {
      height: 85px;
      background: rgba(0,0,0,0.6);
      color: white;
      padding: 10px 5px;
      box-sizing: border-box;
      opacity: 0;
      transition: opacity 0.5s ease-out;
    }
    .pa-fondu-cadre:hover .pa-fondu-contenu {
      opacity: 1;
    }
    .pa-fondu-contenu a {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 100%;
      background: white;
      margin: 5px;
    }
         
          .PA_lien {color:#FFFFFF!important;font-family:arial;text-transform:uppercase;font-weight:bold;transition: color 0.5s ease-in-out;}
          .PA_lien:hover {color:#CEF6E3!important;}
         
          .PA_TOP {filter: grayscale(100%);transition: filter 0.5s ease-in-out;}
          .PA_TOP:hover {filter:none;}
         
        </style>
     
      </head>
      <body>
     
        <img src="http://zupimages.net/up/17/22/1vu6.png" style="display:block;"/>
     
        <table class="pa-tableau">
          <tr>
            <td width="34%">
         
              <div class="pa-titre1">staff</div>
              <div class="pa-staff">
                <center><div class="pa-fondu-cadre" style="background: url(http://www.zupimages.net/up/17/38/hfmm.png);">
      <div class="pa-fondu-contenu">
        Pseudo
        <a href="LIEN VERS LE MP">MP</a>
      </div>
    </div> <div class="pa-fondu-cadre" style="background: url(http://zupimages.net/up/17/07/d5ge.jpg);">
      <div class="pa-fondu-contenu">
        Pseudo
        <a href="LIEN VERS LE MP">MP</a>
      </div>
    </div>
                  <div class="pa-fondu-cadre" style="background: url(http://zupimages.net/up/17/07/opn0.jpg);">
      <div class="pa-fondu-contenu">
        Pseudo
        <a href="LIEN VERS LE MP">MP</a>
      </div>
    </div>
                 
                </center></div>
         
              <div class="pa-titre1">Nouveautés</div>
              <div class="pa-nouveau">
                <strong><font color="red">NEW</font> - le 00/00/00 :</strong> New plus récente.<br/>
                <strong>♫ - le 00/00/00 :</strong> New plus ancienne<br />           
               
              </div>
              <br/>
         
         
              <div class="pa-titre1">Nos top-partenaires</div>
              <div class="pa-partenaires">
                <br /><center>
                <a href="URL DU FORUM" target="_blank"><img src="https://zupimages.net/up/18/11/h7g1.png" class="PA_TOP"/></a> 
                <a href="URL DU FORUM" target="_blank"><img src="https://zupimages.net/up/18/11/h7g1.png" class="PA_TOP"/></a>   
              <a href="URL DU FORUM" target="_blank"><img src="https://zupimages.net/up/18/11/h7g1.png" class="PA_TOP"/></a> 
                <a href="URL DU FORUM" target="_blank"><img src="https://zupimages.net/up/18/11/h7g1.png" class="PA_TOP"/></a> 
                <a href="URL DU FORUM" target="_blank"><img src="https://zupimages.net/up/18/11/h7g1.png" class="PA_TOP"/></a> 
              <a href="URL DU FORUM" target="_blank"><img src="https://zupimages.net/up/18/11/h7g1.png" class="PA_TOP"/></a>    </center></div>
         
            </td>
            <td width="25%">
             
       
              <div class="pa-titre1">Contexte</div>
              <div class="pa-contexte">
    Ici le contexte<center>
                </center><br/><a href="URL VERS LE CONTEXTE" target="_blank">suite du contexte ici...</a>
              </div>
              <br />
              <div class="pa-titre1">liens</div>
              <div class="pa-lien"><a href="LIEN 1" target="_blank"><span class="PA_lien">règlement</span></a>                 
                <a href="LIEN 2" target="_blank"><span class="PA_lien">Groupes</span></a>
                <br/>
                <a href="LIEN 3" target="_blank"><span class="PA_lien">Pour débuter</span></a>                   
                <a href="LIEN 4" target="_blank"><span class="PA_lien">F.A.Q.</span></a>
                <br/>
                <a href="LIEN 5" target="_blank"><span class="PA_lien">prédéfinis</span></a>        &nbsp;
                <a href="LIEN 6" target="_blank"><span class="PA_lien">partenariats</span></a>
                </div>
             
            </td>
            <td width="36%">
             
          <div class="pa-glisse-cadre">
            <img class="pa-glisse-img" src="https://i.pinimg.com/564x/fa/3f/db/fa3fdb92d8b875bbb8a8e3dcd2ab3e5a.jpg" height="122px" width="363px"/>
              <div class="pa-titre1">
                INTRIGUE
              </div>
              <div class="pa-eventint"><center><span style="color:#6699ff"><b>TITRE</b></span></center>
    <br/>
       
                bla bla résumé de l'event


                <br/><br/> <a href="LIEN VERS LES INTRIGUES" target="_blank">toutes les intrigues ici...</a>
              </div>
              </div>
         
              <div>
                <br/><center>
                <a href="LIEN 1 VOTE" target="_blank"><img src="http://www.zupimages.net/up/17/20/jlu0.jpg" alt="" /></a>
                <a href="LIEN 2 VOTE" target="_blank"><img src="http://zupimages.net/up/17/20/1lw2.jpg" alt="" /></a>
                <a href="LIEN 3 VOTE" target="_blank"><img src="http://zupimages.net/up/17/20/slby.jpg" alt="" /></a>
                <a href="LIEN 4 VOTE" target="_blank"><img src="http://zupimages.net/up/17/20/bxgg.jpg" alt="" /></a>
                <a href="LIEN 5 VOTE" target="_blank"><img src="http://zupimages.net/up/17/20/56d2.jpg" alt="" /></a>
                </center><br/>
              </div>
         
              <div class="pa-glissecadre">
            <img class="pa-glisseimg" src="https://i.pinimg.com/564x/13/0e/0c/130e0c7505923d68a28a4e461a824531.jpg"/>
              <div class="pa-titre1">événement</div>
              <div class="pa-eventint">
              Résumé de l'event
                <br/><br/> <a href="LIEN VERS L'EVENT" target="_blank">Event en cours ici...</a></div>
              </div>
         
            </td>
          </tr>
        </table>
     
      </body>
    </html>
    • Revenir en haut

      Sujets similaires

      -
      La date/heure actuelle est Jeu 9 Mai - 18:42


      Partenaires