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.


6 résultats trouvés pour page_accueil

Cheshire Cat

Page d'accueil Rose/Violet/Blanc pastel - Dim 19 Fév 2017 - 14:48



Bonjour à vous tous !
Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:


Optimisé pour tous les navigateurs - Toutes versions

Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et copiez le code qui va suivre dans votre feuille de style
Code:
/* Commande de Page d'accueil par Cheshire Cat */
      .inline{
         display:inline-block;
         vertical-align:top;
      }
      .PA{
         background-color:#f1ead6;
         width:800px;
         margin:20px auto;
         padding:10px 20px 20px 20px;
         box-sizing:border-box;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:30px;
         font-family:calibri;
         font-size:13px;
         color:#674b4b;
      }
      .PA a{
         color:#de8585;
         transition:all 400ms;
      }
      .PA a:hover{
         color:#8a4c4c;
      }
      .PA h1{
         margin:0 -20px 10px;
         padding-bottom:10px;
         text-align:center;
         font-weight:normal;
         font-size:40px;
         border-bottom:2px solid #b79f9f;
         font-family:'Montez';
      }
      .PA h2{
         margin:0 20px 10px;
         text-align:center;
         font-weight:normal;
         font-size:30px;
         border-bottom:2px solid #b79f9f;
         font-family:'Montez';
      }
      .PA-Gauche{
         width:250px;
      }
      .contexte{
         height:240px;
         margin-bottom:20px;
         padding:10px;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         overflow:auto;
         text-align:justify;
         line-height:16px;
      }
      .PA-Droite{
         width:480px;
         margin-left:20px;
      }
      .staff-votes{
         width:235px;
         margin-right:20px;
      }
      .staff{
         padding:0 10px;
         margin-bottom:10px;
      }
      .infobulle{
         position:relative;
         width:100px;
         height:100px;
         overflow:hidden;
         border-radius:10px;
         background-color:#EFEFEF;
         box-shadow:1px 1px 3px #b1a9a9;
      }
      .infobulle:first-of-type{
         margin-right:10px;
      }
      .infobulle > img{
         width:100%;
      }
      .infobulle div{
         position:absolute;
         top:100px;
         left:0;
         width:100px;
         height:100px;
         padding:10px;
         box-sizing:border-box;
         background-color:#fbf7f7;
         text-align:center;
         font-size:15px;
         line-height:25px;
         opacity:0;
         transition:all 600ms;
      }
      .infobulle:hover div{
         top:0;
         opacity:0.9;
      }
      .votes{
         text-align:center;
         font-size:0;
      }
      .votes img{
         margin:0 3px;
      }
      .nouveautes{
         width:200px;
         height:190px;
         margin-bottom:10px;
         padding:10px;
         overflow:auto;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         text-align:justify;
         line-height:20px;
      }
      .partenaires{
         padding:10px;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         text-align:center;
         line-height:17px;
      }
      #boxe_defil {
         position:relative;
         height:31px;
         overflow:hidden;
      }
      #defile {
         position:absolute;
         margin-top:1px;
         background-color:transparent;
      }
      .credits{
         font-size:10px;
         padding:0 20px;
      }


Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et collez-le dans la zone.
Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montez" />      
<div class="PA">
        
 <h1>
 Namaste {USERNAME}
 </h1>
        
 <div class="inline PA-Gauche">
            
 <h2>
 Contexte
 </h2>
            
 <div class="contexte">
               En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine. Ses nombreuses pattes, lamentablement grêles par comparaison avec la corpulence qu’il avait par ailleurs, grouillaient désespérément sous ses yeux. « Qu’est-ce qui m’est arrivé ? » pensa-t-il. Ce n’était pas un rêve.            
 </div>
            
 <div class="credits">
               ©️ PA codée par Cheshire Cat de <a href="http://epicode.bbactif.com/">Epicode</a> et <a href="http://www.never-utopia.com">N-U</a><br />            
 </div>
        
 </div>
        
 <div class="inline PA-Droite">
            
 <div class="inline staff-votes">
              
 <h2>
 Staff
 </h2>
              
 <div class="staff">
                  
 <div class="infobulle inline">
                     <img alt="Pseudo" src="https://i37.servimg.com/u/f37/19/61/08/98/avamoi10.jpg" />                    
 <div>
                        Alrun<br />                        Fondatrice<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
 </div>
                  
 </div>
                  
 <div class="infobulle inline">
                     <img alt="Pseudo" src="http://img11.hostingpics.net/pics/675085toto.png" />                    
 <div>
                        Tomgoku<br />                        Fondateur<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
 </div>
                  
 </div>
              
 </div>
              
 <h2>
 Top-sites
 </h2>
              
 <div class="votes">
                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>              
 </div>
            
 </div>
            
 <div class="inline">
              
 <h2 class="">
 Nouveautés
 </h2>
              
 <div class="nouveautes">
               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />              
 </div>
            
 </div>
            
 <h2>
 Partenaires
 </h2>
            
 <div class="partenaires">
              
 <div id="boxe_defil">
                  
 <div id="defile">
                     <a href="http://feminin-pluriel.discutland.net/"><img title="Féminin Pluriel" alt="Féminin Pluriel" src="http://img110.xooimage.com/files/d/b/6/logo-5185e32.gif" /></a>                     <a href="http://www.ouaf-ouaf-pub.com/"><img title="Ouaf Ouaf Pub" alt="Ouaf Ouaf Pub" src="http://image.noelshack.com/fichiers/2016/42/1476784253-oop-kit88.gif" /></a>                     <a href="http://voyances-ombeline.forumgratuit.be/"><img title="Au delà des voyances" alt="Au delà des voyances" src="http://i18.servimg.com/u/f18/11/27/81/85/logo_811.png" /></a>                     <a href="http://dream-pub.forumactif.fr/"><img title="Dream Pub" alt="Dream Pub" src="http://i68.tinypic.com/2n9hnrc.jpg" /></a>                     <a href="http://lecture-publicites.forumactif.com/"><img title="Lecture et publicités" alt="Lecture et publicités" src="https://i37.servimg.com/u/f37/19/58/81/65/logo_810.png" /></a>                  
 </div>
              
 </div>
               <script type="text/javascript">
               var defile;// l'element a deplacer
               var psinit = 480; // position horizontale de depart
               var pscrnt = psinit;      
               function texteDefile() {
                  if (!defile) defile = document.getElementById('defile');
                  if (defile) {
                     if(pscrnt < ( - defile.offsetWidth) ){
                        pscrnt = psinit;
                           } else {
                     pscrnt+= -1; // pixel par deplacement
                  }
                     defile.style.left = pscrnt+"px";
                  }
               }
               window.setInterval("texteDefile()",20); // delai de deplacement
               </script>            
 </div>
        
 </div>
      
</div>


Vous avez le droit de poster pour dire un p'tit "merci", ça fait toujours plaisir ! Very Happy

Kanae

PA [À plat et Transparence] - Lun 7 Nov 2016 - 17:09

Page d'Accueil - À plat et Transparences




Bonjour à tous !

Aujourd'hui, je vous propose l'installation d'une Page d'Accueil passe-partout, capable de s'adapter à un grand nombre de thèmes presque sans aucune modification !

PHPB2 ▬ CSS3, HTML5 & Templates ▬ Code mis sous hide ▬ Aperçu


Cette Page d'Accueil va venir jouer sur de la transparence et des polices neutres, une organisation simple et fonctionnelle. Elle permettra également de dévoiler des informations sur les admins en hover, de cliquer sur les forums partenaires, et de personnaliser la couleur du "menu" des liens utiles du forum. Oui oui, tout ça à la fois... Elle est donc très adaptable et fait la part belle à l'image de fond.

Spoiler:



L'installation de cette PA n'exigera de vous aucune compétence graphique, mais dans la mesure où elle comporte des images transparentes, il vous faudra les redessiner si vous souhaitez les modifier. Tous les autres éléments reposent sur du CSS.


C'est parti pour l'installation !
Pour voir le code, merci de laisser un commentaire constructif résumant votre avis sur ma création ! Par respect pour les nombreuses nuits passées à coder cette PA, merci de ne pas retirer les crédits.


Fyraliel

PA Clap de Film - Mer 4 Nov 2015 - 18:34



Coucou tout le monde ^^

Je vous propose une jolie PA en forme de clap de film suite à la demande de Nausicäa Kaer.
Voici un petit Screenshot pour vous montrer à quoi cela ressemble ^^

Merci de laisser le crédit surtout après avoir fait l'effort de le rendre discret ^^

Enjoy !


Pour pouvoir ajouter une PA à votre forum il faudra avant tout que vous soyez au moins admin du forum.

Le code qui suit est à mettre dans le panneau d'administration > onglet Affichage > colone de gauche Couleurs > onglet Feuille de Style CSS

Code:

.PA_totale {
    position: relative;
    height: 587px;
    width: 900px;
    padding-top: 100px;
    background: url(http://nsa37.casimages.com/img/2015/10/07/15100704212978660.png);
}
.PA_totale > a{
    position: absolute;
    top: 22px; left: 225px;
    color: #A9916F;
    -webkit-transform: rotate(48deg);
    transform: rotate(48deg);
    font-size: 11px;
}
.PA_totale *::-webkit-scrollbar-thumb {
    background: #5E4E39;
}
.PA_totale *::-webkit-scrollbar-track {
 background: #CCBDAB;
}
.PA_totale *::-webkit-scrollbar {
    width: 7px;
}
.cadre_contexte {
    height: 190px;
    width: 815px;
    margin: 35px auto 0;
    position: relative;
    font: 30px 'Kaushan Script';
    color: #CCBDAB;
    text-align: left;
}
.texte_contexte {
    position: absolute;
    height: 150px;
    width: 800px;
    top : 45px; left : 0;
    font: 15px 'Droid Serif';
    color: #DDD3C7;
    overflow: auto;
    text-align: justify;
    padding: 5px;
    -webkit-transition: 1s all;
    transition: 1s all;
}
#texte1{
    opacity: 1;
}
#texte2{
    opacity: 0;
}
#texte2:target{
    opacity: 1;
}
#texte2:target ~ #texte1{
    opacity: 0;
}
.tour_point {
    position: absolute;
    right: -10px;
    top: 50px;
}
.point {
    display: block;
    height: 6px;
    width: 6px;
    background: #CCBDAB;
    border-radius: 10px;
    margin-top: 40px;
}
.cadre_actu{
    height: 90px;
    width: 815px;
    margin: 20px auto 0;
    font: 30px 'Kaushan Script';
    color: #CCBDAB;
    text-align: left;
}
.texte_actu{
    height: 95px;
    width: 800px;
    font: 15px 'Droid Serif';
    margin-top: -5px;
    color: #DDD3C7;
    overflow: auto;
    text-align: justify;
    padding: 5px;
}
.cadre_staff{
    height: 65px;
    width: 790px;
    position: relative;
    top: 70px;
    font: 13px 'Droid Serif';
    color: #CCBDAB
}
.cadre_staff img{
    height: 60px;
    width: 60px;
    margin: 4px 0 0 10px;
}
.cadre_staff span{
    display: inline-block;
    vertical-align: middle;
    height: 60px;
}
.top_site{
    height: 90px;
    width: 235px;
    position: relative;
    top: 80px;
    display: inline-block;
}
.top_site img{
    height: 31px;
    width: 88px;
    margin: 8px 0 0 20px;
}
.musica{
    height: 85px;
    width: 265px;
    position: relative;
    top: 82px; left: 6px;
    display: inline-block;
}
.liens_utiles{
    height: 85px;
    width: 285px;
    position: relative;
    top: 82px;
    display: inline-block;
    text-align: center;
    font: 17px 'Droid Serif';
    overflow: auto;
}
.liens_utiles a{
    display: block;
}


Le code qui suite est à mettre dans le Panneau d'administration > onglet Affichage > colone de gauche Généralité

Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif|Kaushan+Script" />
<div class="PA_totale">
    <a href="http://www.never-utopia.com/"> (c) Fyraliel </a>    
 <div class="cadre_contexte">
 Contexte  
 <div id="texte2" class="texte_contexte">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam arcu, dictum ac dignissim sed, aliquam nec eros. Suspendisse potenti. Praesent ac nisl ac sapien imperdiet aliquam sit amet a mi. Aliquam sodales, nibh sed feugiat semper, mi dui maximus felis, vitae dapibus est dolor non lacus. Vivamus aliquam dui ac tortor ornare euismod. Aliquam sed facilisis est. Morbi id lectus ultrices enim rutrum laoreet. Proin eget lectus scelerisque, sollicitudin justo dapibus, tempus est. Mauris et neque porta, suscipit mi ac, semper tortor. Ut interdum vitae elit laoreet lobortis. Cras dictum mollis eleifend. Sed in elit vel ante semper venenatis sit amet a risus.
 </div>
        
 <div id="texte1" class="texte_contexte">
 Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae. Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.
 </div>
        
 <div class="tour_point">
            <a href="#texte1">
 <span class="point">
 </span></a>            <a href="#texte2">
 <span class="point">
 </span></a> 
 </div>
    
 </div>
    
 <div class="cadre_actu">
 Actualité    
 <div class="texte_actu">
 Praesent consectetur nibh quis viverra facilisis. Proin ultricies, dolor mollis molestie accumsan, sapien tellus tincidunt erat, a efficitur nisl justo a metus. Aliquam tempor, est id condimentum commodo, nisl libero feugiat sem, in vehicula felis tortor a risus. Donec egestas lacinia augue vel elementum. Nam accumsan lectus quis arcu fermentum, in blandit risus dignissim. Donec in augue maximus, malesuada tortor ac, convallis orci. Morbi quis vulputate velit, vitae porta lorem. Vestibulum tristique erat eu lectus aliquet, hendrerit tristique sapien lobortis. Pellentesque viverra a quam vel suscipit.
 </div>
 </div>
    
 <div class="cadre_staff">
 <img src="http://ecx.images-amazon.com/images/I/41HvkfoCaRL._AC_SX60_CR,0,0,60,60_.jpg" /> <span>pseudo1</span>    <img src="https://i.vimeocdn.com/portrait/8284582_60x60.jpg" /> <span>pseudo2</span>    <img src="http://fr.web.img5.acsta.net/c_60_60/avatar/FR/1/4/5/Z20111208150552540635541/img/4rclfxgv.ve2.jpg" /> <span>pseudo3</span>    <img src="http://0.gravatar.com/avatar/fa1faaa25e9b175ec5c36991ff82ef1f?s=60&d=identicon&r=G" /> <span>pseudo4</span>        <img src="http://www.eteks.com/coursjava/images/ImageTableau.jpg" /> <span>pseudo5</span>        <img src="http://piglab.fr/site/imgcarre/tafs_0007_batgumfizz.jpg" /> <span>pseudo6</span>    
 </div>
    
 <div class="top_site">
 <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/213378miniban3.jpg" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/889072miniban11.gif" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img11.hostingpics.net/pics/852212logo2.gif" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" /></a>
 </div>
    
 <div class="musica">
 <iframe style="width: 265px; height: 85px;" ;="" src="//www.youtube.com/embed/8zj-UWmPqzU" allowfullscreen="" frameborder="0">
 </iframe>
 </div>
    
 <div class="liens_utiles">
        <a href="#">Lien 1</a>        <a href="#">Lien 2</a>        <a href="#">Lien 3</a>        <a href="#">Lien 4</a>        <a href="#">Lien 5</a>        <a href="#">Lien 6</a>        <a href="#">Lien 7</a>        <a href="#">Lien 8</a>    
 </div>
</div>


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.

Loukoum

PA avec Onglets - Ven 25 Sep 2015 - 12:13



Bonjour / Bonsoir chers amis de Never-Utopia!  :hug:  


Me voici ici pour vous laisser un petit code assez sympa de Page d'Accueil, codé par mes petites mains de A à Z!  :artiste:
Vous comprendrez donc que le crédit "PA de Loukoum sur Never-Utopia" est à laisser sous peine de mort...  :bandit:

A savoir que cette PA est une page HTLM, il faut donc être à l'aise avec ce genre de codes! A savoir aussi que votre page HTLM ne devra être modifiée qu'à l'aide de ce bouton Tag page_accueil sur Never Utopia - graphisme, codage et game design Editer-html et non de celui ci Tag page_accueil sur Never Utopia - graphisme, codage et game design Editer.
:nanere:   Donc si vous êtes déjà perdu, passez votre chemin.

Pour ceux qui sont trop fort  :cowboy:  nous allons passer au visuel =D
Et pour que tout soit parfait, voici la PA en pleine application ici =D

Donc pour ceux qui se sentent pousser des ailes, voilà les codes  :wesh:

Etape 1 - Notre PA
Voici donc le plus gros, la vrai PA!

Vous devez donc créer une nouvelle page HTLM (PA > Module > Gestion des Pages HTLM), mais faites bien attention à cliquer sur "Création en mode avancé (HTLM)" et non sur "Création en mode simple (WYSIWYG)"!!!

/!\ Les images pour les sabliers sont en 70x70. Si vous êtes à l'aise avec les codes, vous pouvez changer la taille. Mais si ce n'est pas le cas, comme il y a beaucoup de changement à faire, gardez cette taille (ou demandez de l'aide si vraiment vous voulez changer je vous mangerais pas)

Pour le contexte, il y a de quoi intégrer une vidéo. Pensez à mettre le lien mais aussi à changer la taille, qui est pour le moment réglé à 0x0!
Code:
<!DOCTYPE html>
<html>
<head>
  <base target="_blank" />
  <meta charset="UTF-8" />
  <title>Titre</title>
  <style>
/*Effet sur les mots soulignés*/
u {
  border-bottom: 2px dotted;
  border-color: #1d0e14;
  text-decoration: none;
}

/*Effet sur les mots en italique*/
i {
  border-bottom: none;
  color: #ad8c62;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}

/*Effets sur vos liens*/
a,a:link,a:visited,a:hover {
  text-decoration: none;
}

a {
  color: #C0A27B;
  font-family: Georgia;
  font-size: 10px;
  text-decoration: none;
}

a:hover {
  color: #00FFBF;
  font-size: 10px;
  font-family: Georgia;
  text-decoration: none;
}

a.lien,a.lien:link,a.lien:visited,a.lien:hover {
  text-decoration: none;
}

a.lien {
  font-size: 10px;
  font-family: Georgia;
  color: #C0A27B;
  text-shadow: 1px 1px 1px #000;
  text-decoration: none;
}

a.lien:hover {
  font-size: 10px;
  font-family: Georgia;
  color: #00FFBF;
  text-shadow: 1px 1px 1px #000;
  font-weight: bolder;
  text-decoration: none;
}

/*Affichage des Titres de votre PA*/
.titre {
  background: #E5D5BA;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Les styles des différents cadres. Vous pouvez tout changer SAUF la taille, soit width et height*/
.staff {
  background: #E5D5BA;
  width: 310px;
  height: 140px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  padding: 10px;
}

/*Ces "info" sont les infobulles, vous pouvez donc changer la couleur et la taille. Normalement la position d'affichage ne doit pas être changée! L'info1 et info2 sont pour le Staff, et la 4 pour les Scénarios*/
.info1 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info1:hover {
  z-index: 25;
}

.info1 span {
  display: none;
}

.info1:hover span {
  display: block;
  position: absolute;
  top: -41px;
  left: -3px;
  width: 105px;
  height: 50px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
  border-radius: 20%;
}

/*Ceci concerne l'image des infobulles*/
.imgwidget {
  border-radius: 20%;
  width: 100px;
  height: 50px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.info2 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info2:hover {
  z-index: 25;
}

.info2 span {
  display: none;
}

.info2:hover span {
  display: block;
  position: absolute;
  top: -21px;
  left: 0;
  width: 100px;
  height: 30px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget1 {
  width: 100px;
  height: 30px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

/*Ici on retrouve un code identique à notre complément de PA, alors touchez uniquement la même chose que tout à l'heure*/
.onglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

.onglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

.onglet_1 {
  background: #E5D5BA;
}

.contenu_onglet {
  background: #E5D5BA;
  display: none;
  width: 300px;
  height: 146px;
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

.wanted {
  background: #E5D5BA;
  width: 320px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
}

.info4 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info4:hover {
  z-index: 25;
}

.info4 span {
  display: none;
}

.info4:hover span {
  display: block;
  position: absolute;
  top: -2em;
  left: -2em;
  width: 150px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  border: 2px solid #1d0e14;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget2 {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.imgwidget2:hover {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.tops {
  width: 141px;
  background: #E5D5BA;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.news {
  background: #E5D5BA;
  width: 141px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.meteo {
  background: #E5D5BA;
  width: 320px;
  height: 110px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.imgwidget3 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.systeme_paonglets {
  width: 300px;
  margin: auto;
  text-align: center;
}

.paonglets {
  text-align: center;
}

/*Le style d'affichage des paonglets*/
.paonglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Ne pas toucher*/
.paonglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

/*Ne pas toucher*/
.paonglet_1 {
  background: #E5D5BA;
}

/*Le style d'affichage du contenu des paonglets*/
.contenu_paonglet {
  margin: auto;
  background: #E5D5BA;
  display: none;
  width: 300px;
/*Ne pas toucher*/
  height: 105px;
/*Ne pas toucher*/
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

/*Les codes qui suivent sont pour mon paonglet "Sablier", permettant de donner cet effet glissé sur les images et l'apparition du texte en dessous*/
.cate2 {
  width: 70px;
  height: 70px;
  overflow: hidden;
}

.cate2_img {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  margin-left: 0;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  background-color: #ad8c62;
}

.cate2:hover .cate2_img {
  margin-left: 70px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.cate2_description {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70x;
  margin-top: -70px;
  text-align: center;
  font-size: 11px;
  color: #FAF6F2;
  padding: 2px;
  overflow: auto;
}

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px;
/*largeur de la scrollbar verticale*/
  height: 5px;
/*hauteur de la scrollbar horizontale*/
  background-color: #ad8c62;
}

::-webkit-scrollbar-track {
  background-color: #ad8c62;
/*couleur du fond de la scrollbar*/
}

::-webkit-scrollbar-thumb {
/*la petite bande qui monte/descend*/
  background-color: /*couleur de l'ascenseur*/
#1d0e14;
}
  </style>
</head>
<body>
  <table align="center">
    <tr>
      <td>
        <div class="titre">
          Staff
        </div>
        <div class="staff">
          <span class="info1"><img class="imgwidget" src="IMAGE1" /> <span>TEXTE1 <a href="LIEN1" target="_blank">Profil</a> // <a href="LIEN1" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE2" /> <span>TEXTE2 <a href="LIEN2" target="_blank">Profil</a> // <a href="LIEN2" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE3" /> <span>TEXTE3 <a href="LIEN3" target="_blank">Profil</a> // <a href="LIEN3" target="_blank">MP</a></span></span><br />
          <span class="info1"><img class="imgwidget" src="IMAGE4" /> <span>TEXTE4 <a href="LIEN4" target="_blank">Profil</a> // <a href="LIEN4" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE5" /> <span>TEXTE5 <a href="LIEN5" target="_blank">Profil</a> // <a href="LIEN5" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE6" /> <span>TEXTE6 <a href="LIEN6" target="_blank">Profil</a> // <a href="LIEN6" target="_blank">MP</a></span></span><br />
          <div style="text-align: center;">
            <span class="info2"><img class="imgwidget1" src="IMAGE7" /> <span>TEXTE7 <a href="LIEN7" target="_blank">Profil</a> // <a href="LIEN7" target="_blank">MP</a></span></span>
            <span class="info2"><img class="imgwidget1" src="IMAGE8" /> <span>TEXTE8 <a href="LIEN8" target="_blank">Profil</a> // <a href="LIEN8" target="_blank">MP</a></span></span>
          </div>
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
        <div class="systeme_onglets">
          <div align="center" class="onglets">
            <span class="onglet_1 onglet" id="onglet_NomOnglet1" onclick="javascript:change_onglet('NomOnglet1');"> Contexte </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet2" onclick="javascript:change_onglet('NomOnglet2');"> Chronologie </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet3" onclick="javascript:change_onglet('NomOnglet3');"> Nos écoles </span> 
          </div>
          <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
              <!-- Debut 1er onglet -->
              <iframe allowfullscreen="" frameborder="0" src="LIEN%20VIDEO" style="width: 0px; height: 0px; float:left;"></iframe> ICI VOTRE CONTEXTE
            </div><!-- Fin 1er onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
              <!-- Debut 2em onglet -->
              ICI VOTRE CHRONO SI VOUS EN AVEZ UNE
            </div><!-- Fin 2em onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
              <!-- Debut 3em onglet -->
              SI COMME NOUS VOUS AVEZ D'AUTRES FORUMS OU ALORS TROUVEZ UNE UTILITE A CET ONGLET, OU SUPPRIMEZ LE TOUT SIMPLEMENT ^^
            </div><!-- Fin 3em onglet -->
            <script type="text/javascript">
            //<!--
                var anc_onglet = 'NomOnglet1';
                change_onglet(anc_onglet);
            //-->
            </script>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          On les veux
        </div>
        <div class="wanted">
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE1" /> <span>TEXTE1<br />
            <a class="postlink" href="LIEN1" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE2" /> <span>TEXTE2<br />
            <a class="postlink" href="LIEN2" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE3" /> <span>TEXTE3<br />
            <a class="postlink" href="LIEN3" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE4" /> <span>TEXTE4<br />
            <a class="postlink" href="LIEN4" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE5" /> <span>TEXTE5<br />
            <a class="postlink" href="LIEN5" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE6" /> <span>TEXET6<br />
            <a class="postlink" href="LIEN6" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE7" /> <span>IMAGE7<br />
            <a class="postlink" href="LIEN7" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE8" /> <span>TEXTE8<br />
            <a class="postlink" href="LIEN8" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <a class="postlink" href="LIEN" rel="nofollow" target="_blank">Découvrir plus de prédéfinis</a>
        </div>
      </td>
      <td>
        <table>
          <tr>
            <td>
              <div class="titre">
                Nos tops-sites
              </div>
              <div class="tops">
                VOS TOP SITES
              </div>
            </td>
            <td>
              <div class="titre">
                News
              </div>
              <div class="news">
                <span style="color: #E7D197;">¤ DATE -</span> VOTRE SUPER NOUVELLE
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          Météo
        </div>
        <div class="meteo">
          <img class="imgwidget3" src="LIEN" style="float:left;" /> ICI SI VOUS VOULEZ METTRE LA METEO ET LA DATE A LAQUELLE SE DEROULE VOTRE RPG, VOUS POUVEZ =D
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script>
        <div class="systeme_paonglets">
          <span class="paonglet_1 paonglet" id="paonglet_NomPaonglet1" onclick="javascript:change_paonglet('NomPaonglet1');"> Partenaires </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet2" onclick="javascript:change_paonglet('NomPaonglet2');"> Crédits </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet3" onclick="javascript:change_paonglet('NomPaonglet3');"> Sabliers </span>
          <div class="contenu_paonglets">
            <!-- Debut 1er paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet1">
              Ici la liste de vos partenaires.
            </div><!-- Fin 1er paonglet -->
            <!-- Debut 2em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet2">
              La PA a été réalisée par <a href="http://mondeandmagiev5.forumactif.org/" target="_blank">Loukoum</a> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.<br />
              Ici le reste de vos crédits
            </div><!-- Fin 2em paonglet -->
            <!-- Debut 3em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet3">
              <table>
                <tr>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE1" /></div>
                      <div class="cate2_description">
                        TEXTE 1
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE2" /></div>
                      <div class="cate2_description">
                        TEXTE 2
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE3" /></div>
                      <div class="cate2_description">
                        TEXTE 3
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE4" /></div>
                      <div class="cate2_description">
                        TEXTE 4
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
              <div style="text-align: center;">
                ICI UN PETIT TEXTE SI VOUS LE VOULEZ
              </div>
            </div><!-- Fin 3em paonglet -->
          </div>
          <script type="text/javascript">
          //<!--
                var anc_paonglet = 'NomPaonglet1';
                change_paonglet(anc_paonglet);
          //-->
          </script>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>



Etape 2 - Mettre la PA en place
Pour cela il vous suffit d'aller dans: PA > Affichage > Généralités, et de copier ce code =D
Code:
 
<div style="font-size: 40px; font-family: Mistral; text-align: center;">
                             Bienvenue sur TITRE DE VOTRE FORUM, {USERNAME} !                         
</div><br /><br /> 
<div style="font-size: 18px; font-family: 'Monotype Corsiva'; text-align: center;">
                             <a href="LIEN" class="postlink" target="_blank" rel="nofollow">~ Guide du débutant ~</a><br /><a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Règlement</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Contexte</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Bottin des Avatars</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> 
</div>
  <iframe src="ICI LE LIEN DE LA PAGE HTLM DE VOTRE PA" frameborder="0" scrolling="no" style="margin: auto; width: 700px; height: 570px;"></iframe>


Et voilà =D
Félicitation pour avoir survécu   :friends:

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.

Hancok

PA pour forum RP avec image - Sam 3 Jan 2015 - 11:35



Hello, je vais vous proposez ma deuxième PA. Dans celle-ci vous pourrez mettre un titre en image mais aussi une image en fond. Vous pourrez également changer l'onglet "RP du moment" par " top sites" c'est vous qui voyez. Maintenant place à l'aperçu et au code.

Voici un aperçu www et voici ce que donne l'infobulle www


Le code à mettre dans vos CSS:
Code:
 /*....Page d'accueil....*/
.cadre-principal {
  display:block;
  background-image:url(http://zupimages.net/up/16/21/fqiq.png);
  background-repeat: repeat;
  background-position: top center;
  width:820px;
  height:680px;
  margin-left:-5px;
  border-radius:15px 15px 15px 15px;
  border: 3px solid #8F4835;
  text-align: center;
}
.contexte {
float:left;
display:block;
background: #945539;
height:300px;
width:250px;
position:relative;
margin-top: 40px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.bloc1{ 
overflow:auto;
margin: auto;
width:235px;
height:270px;
text-align: left;}

.image {
float:left;
display:block;
background:# ;
background-repeat: no-repeat;
background-position: top center;
height:300px;
width:370px;
position:relative;
margin-top: 65px;
margin-left: 20px;
}

.bloc2{
width: 370px;
height: 300px;
margin: auto;
}

.crédit {
float:left;
display:block;
background: #945539;
height:120px;
width:110px;
padding:5px;
position:relative;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
margin-top: 40px;
margin-left: 20px;
text-align: left;
}
.lienutile {
float:left;
display:block;
background: #945539;
height:125px;
width:110px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: left;
}
.rpmoment {
float:left;
display:block;
background: #945539;
height:100px;
width:230px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: left;
}
.new {
float:left;
display:block;
background: #945539;
height:100px;
width:300px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.bloc3{
overflow:auto;
width:300px;
height:80px;
text-align: left;
margin: auto;}

.staff {
float:left;
display:block;
background: #945539;
height:100px;
width:180px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: center;
}
.partenaire {
float:left;
display:block;
background: #945539;
height:50px;
width:770px;
padding:5px;
margin-top: 20px;
margin-left: 20px;
position:relative;

border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.titre2 {
  color:#4A1C00;font-size:30px;
  text-align:center;text-shadow:1px 1px 0px #fff;font-style: italic;
  font-family: 'Great Vibes', sans-serif;
  font-weight: 700;
  margin-top:-20px;}
div.infobulle{
position: relative;
display: inline-block;

}

div.infobulle span{
display: none;

}

div.infobulle:hover{
background: none;
z-index: 999;
}

div.infobulle:hover span
{
display: inline;
position: absolute;
top: 10px; left: 6px;
}
div.infobulle span{
  background: #8F4835;
  width: 50px;
  height: 70px;
  border: 1px solid #fff;
  border-radius:10px 10px 10px 10px;
 
}
/*....fin page d'accueil....*/


Code à mettre dans votre page d'accueil (HTML):
Code:
     
<div class="cadre-principal">
                                                                       <link href="https://fonts.googleapis.com/css?family=Great Vibes" rel="stylesheet" type="text/css" />                                                                   
   <div>
            <img src="http://zupimages.net/up/16/21/b84x.png" />                         
   </div>
                                                                                                
   <div class="contexte">
                                                                                                         
      <div class="titre2">
                                                                                     Le concept                                                       
      </div>
                                 
      <div class="bloc1">
                                                                   Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.        Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.                 
      </div>
                                                           
   </div>
                                                                                  
   <div class="image">
                               
      <div class="titre2">
                                                                                                                                          
      </div>
                 
      <div class="bloc2">
                             <img style="width: 370px; height: 300px;" src="http://zupimages.net/up/16/21/1cbt.png" />             
      </div>
                                         
   </div>
                                                                              
   <div class="crédit">
                                                                                 
      <div class="titre2">
                                                                             Crédits                                                       
      </div>
                                                            <br />Forum @...  <br /> PA @<a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Hancok</a> <br /> Design @... <br /> Catégorie @... <br /> Qeel @... <br />                                                                                   
   </div>
                                                                      
   <div class="lienutile">
                                                                                                           
      <div class="titre2">
                                                                       Liens                                                     
      </div>
                                                    <br /><a href="lien du règlement">Le règlement</a>  <br /> <a href="lien des règles">Les règles d'écriture</a> <br /><a href="lien de la présentation">Présentation</a> <br />                                                                                                                                           
   </div>
                                                            
   <div class="rpmoment">
                                                                                   
      <div class="titre2">
                                                                               Les rp du moments                                                                     
      </div>
                                                                <a href="Lien du rp">Titre du rp</a>                                                             
   </div>
                                                                        
   <div class="new">
                                 
      <div class="titre2">
                                                                               Les nouveautés                                                                   
      </div>
                                                                                                         
      <div class="bloc3">
                                                               ¤00/00/00: .... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />                                                 
      </div>
                                                                                     
   </div>
                                                                            
   <div class="staff">
                                                                               
      <div class="titre2">
                                                                           Le staff                                                                   
      </div>
                                                                                               
      <div class="infobulle">
                                                           <img src="http://img4.hostingpics.net/pics/171727ympapa.png" /><span>Pseudo  </span>*                                               
      </div>
                                                                                           
      <div class="infobulle">
                                                           <img src="http://img4.hostingpics.net/pics/423743roypa.png" /><span>  Pseudo</span>*                                               
      </div>
                                                                                             
      <div class="infobulle">
                                                           <img src="http://i39.servimg.com/u/f39/11/27/81/85/ava_pa10.png" /><span>  Pseudo  </span>                                                 
      </div>
                                                                           
   </div>
                                                                          
   <div class="partenaire">
                                                                           
      <div class="titre2">
                                                                             Les partenaires                                                                 
      </div>
                                                                                             
      <marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
                                                           <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Image hébergée gratuitement chez " border="0" /></a>-<a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a> <a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a>                             
      </marquee>
                                                                           
   </div>
   <div class="clear">
   </div>
                                                                                
</div>


Attention pour l'image du titre ne pas dépasser la taille suivante (mais vous pouvez faire plus petit) pour ne pas déformer la PA: 800*80


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.

Hiro'

[Template] Supprimer le fond et le cadre de la PA - Dim 22 Sep 2013 - 16:55


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour tout le monde !

Aujourd'hui je vous apporte une astuce très simple. Elle vous servira a supprimer le cadre et le fond de votre page d'accueil. Pour que vous vous compreniez bien, je vous montre un exemple avec et un exemple sans. J'espère ne pas faire doublon, je n'ai pas vu de topic là-dessus dans cette section.

Avec et Sans


C'est très simple. Vous allez devoir modifier votre template index_body.
Non, non, ne fuyez pas, les templates sont nos amies!
Et puis il n'y a pas grand chose à faire.

Repérez cette partie :

Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->


Regardez à la 3e ligne où vous avez un tableau avec la class "forumline" :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


Et vous enlevez la class, ce qui donne ceci :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0">


Oui, oui, c'est tout. Comment ça, je vous arnaque ?

Bon code et n'oubliez pas un petit crédit à Never-Utopia Wink


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 10:09