Page d'accueil
Ceci est un code de PA crée suite à la Demande de LinaK, ici.
Testé sous phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne
Vous DEVEZ avoir le portail activé pour pouvoir afficher les derniers sujets! Sinon, modifiez ce bloc pour qu'il contienne autre chose!
Les images
LEs seules images de la PA sont celles à droite (les blanches). Leur taille est de 243px de largeur et 26px de hauteur.
Le code
Code HTML à placer dans Affichage -> Page d'accueil -> Généralités :
- Code:
<div id="contour_pa">
<div id="bloc_gauche_pa">
<h1>
~ Le Chicaneur de Pottermore ~
</h1>
<div id="texte_gauche_pa">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit risus sed leo fringilla, ac fermentum ligula mollis. Ut tincidunt quis sem lobortis hendrerit. Nullam ligula orci, hendrerit et ante sed, volutpat condimentum dui. Aenean iaculis quis arcu sit amet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mauris, mollis vitae bibendum pharetra, vehicula id ipsum. Morbi bibendum velit mauris, sit amet molestie dui commodo pretium. Proin id urna in eros commodo adipiscing id eu mi. Donec consectetur metus quam, a mollis turpis venenatis eget. Vivamus venenatis purus a scelerisque aliquam. Praesent volutpat nibh sed dolor vestibulum vestibulum. Sed venenatis et nisl ornare imperdiet. Etiam sed nisi aliquet, facilisis lorem id, egestas mauris. Nam lobortis mauris dui. Phasellus tempus lobortis imperdiet. Duis quis ullamcorper lacus.<br /><br />Quisque a ultrices justo, in gravida ante. Praesent blandit sagittis pellentesque. Vivamus eget aliquet odio. Nam adipiscing mauris arcu, in interdum mi molestie vel. Ut vel augue bibendum, dapibus felis vel, pulvinar orci. Nam porttitor enim vitae nisi sodales aliquam. Cras at eros non metus mollis accumsan eu eget libero. Maecenas lectus tortor, varius sed volutpat id, elementum at justo.<br /><br />Vivamus tristique eros vel enim blandit, sit amet accumsan nisl gravida. Integer bibendum libero a justo cursus ornare. Fusce a adipiscing purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pulvinar porta nunc, vel aliquam lectus elementum et. Fusce imperdiet mauris sed euismod consequat. Suspendisse consectetur, lorem id tristique lobortis, tortor justo molestie leo, non adipiscing dui lorem et ipsum. <br />
</div>
</div>
<div id="bloc_droite_pa">
<h1>
~ En ce moment sur le forum ~
</h1>
<h2 id="gauche_titre_pa">
Derniers Sujets
</h2>
<h2 id="droite_titre_pa">
Titre
</h2>
<div id="marquee_latest_pa">
<marquee behavior="scroll" direction="up" scrollamount="1">
<div id="recent-topics">
</div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
</marquee>
</div>
<div id="droite_moment_pa">
<div class="case_info_pa">
<img src="http://i39.servimg.com/u/f39/09/03/38/36/test10.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit risus sed leo fringilla, ac fermentum ligula mollis. Ut tincidunt quis sem lobortis hendrerit. Nullam ligula orci, hendrerit et ante sed, volutpat condimentum dui. Aenean iaculis quis arcu sit amet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mauris, mollis vitae bibendum pharetra, vehicula id ipsum. Morbi bibendum velit mauris, sit amet molestie dui commodo pretium. Proin id urna in eros commodo adipiscing id eu mi. Donec consectetur metus quam, a mollis turpis venenatis eget. Vivamus venenatis purus a scelerisque aliquam. Praesent volutpat nibh sed dolor vestibulum vestibulum. Sed venenatis et nisl ornare imperdiet. Etiam sed nisi aliquet, facilisis lorem id, egestas mauris. Nam lobortis mauris dui. Phasellus tempus lobortis imperdiet. Duis quis ullamcorper lacus.<br /><br />Quisque a ultrices justo, in gravida ante. Praesent blandit sagittis pellentesque. Vivamus eget aliquet odio. Nam adipiscing mauris arcu, in interdum mi molestie vel. Ut vel augue bibendum, dapibus felis vel, pulvinar orci. Nam porttitor enim vitae nisi sodales aliquam. Cras at eros non metus mollis accumsan eu eget libero. Maecenas lectus tortor, varius sed volutpat id, elementum at justo.<br />
</p>
</div>
<div class="case_info_pa">
<img src="http://i39.servimg.com/u/f39/09/03/38/36/test10.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit risus sed leo fringilla, ac fermentum ligula mollis. Ut tincidunt quis sem lobortis hendrerit. Nullam ligula orci, hendrerit et ante sed, volutpat condimentum dui. Aenean iaculis quis arcu sit amet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mauris, mollis vitae bibendum pharetra, vehicula id ipsum. Morbi bibendum velit mauris, sit amet molestie dui commodo pretium. Proin id urna in eros commodo adipiscing id eu mi. Donec consectetur metus quam, a mollis turpis venenatis eget. Vivamus venenatis purus a scelerisque aliquam. Praesent volutpat nibh sed dolor vestibulum vestibulum. Sed venenatis et nisl ornare imperdiet. Etiam sed nisi aliquet, facilisis lorem id, egestas mauris. Nam lobortis mauris dui. Phasellus tempus lobortis imperdiet. Duis quis ullamcorper lacus.<br /><br />Quisque a ultrices justo, in gravida ante. Praesent blandit sagittis pellentesque. Vivamus eget aliquet odio. Nam adipiscing mauris arcu, in interdum mi molestie vel. Ut vel augue bibendum, dapibus felis vel, pulvinar orci. Nam porttitor enim vitae nisi sodales aliquam. Cras at eros non metus mollis accumsan eu eget libero. Maecenas lectus tortor, varius sed volutpat id, elementum at justo.<br />
</p>
</div>
</div>
<div id="barre_moment_pa">
</div>
</div>
<div id="bloc_liens_pa">
<a href="#">Crédits et Remerciements</a> ¤ <a href="#">Le Staff du Chicaneur</a> ¤ <a href="#">Notre section RPG</a> ¤ <a href="#">Autre Lien</a> ¤ <a href="#">Autre Lien</a> ¤
</div>
</div>
Le CSS:
- Code:
/********** DÉBUT PA **********/
/* Entoure toute la PA */
#contour_pa {
width: 895px;
padding: 10px 0 10px 0;
margin: auto;
/* Couleur de fond */
background-color: #1D1A19;
}
/* Mise en forme des titres (Chicaneur de Pottermore et En ce moment) */
#contour_pa h1 {
/* Annulation des effets de FA */
display: block;
margin: 0px;
border-width: 0px;
background: none;
margin-top: 10px;
/* Taille */
width: 100%;
font-weight: normal;
text-align: center;
/* Taille puis couleur du texte */
font-size: 15pt;
color: #E0D0A6;
}
/* Met en place le bloc de gauche (Chicaneur de Pottermore) */
#bloc_gauche_pa {
display: inline-block;
vertical-align: bottom;
/* Taille */
width: 345px;
height: 307px;
margin-right: 2px;
padding: 5px;
/* Bordure */
border: 1px solid #E0D0A6;
border-radius: 10px;
}
/* Mise en place du carré de texte dans la partie gauche (Chicaneur de Pottermore) */
#texte_gauche_pa {
/* Taille */
width: 320px;
height: 240px;
margin: auto;
margin-top: 15px;
padding: 5px;
overflow: auto;
/* Alignement puis couleur du texte */
text-align: justify;
color: #FFFFFF;
/* Bordure */
border: 2px solid #E0D0A6;
}
/* Met en place le bloc de gauche (En ce moment) */
#bloc_droite_pa {
display: inline-block;
vertical-align: bottom;
/* Taille */
width: 525px;
height: 317px;
margin-left: 2px;
/* Bordure */
border: 1px solid #E0D0A6;
border-radius: 10px;
/* Pour le placement interne des blocs */
text-align: left;
}
/* Met en forme le texte des sujets récents */
#recent-topics {
/* Couleur puis taille du texte */
color: black;
font-size: 9pt;
}
/* Met en forme les liens des sujets récents */
#recent-topics a {
/* Couleur puis taille */
color: #E0D0A6;
font-size: 12pt;
text-decoration: none;
}
/* Met en forme les petits titres (Derniers sujets et Titre) de la partie de droite (En ce moment) */
#contour_pa h2 {
display: inline-block;
vertical-align: middle;
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
/* Alignement du texte puis couleur */
text-align: center;
color: white;
}
/* Taille du titre Derniers Sujets pour l'aligner au centre du bloc correspondant */
#contour_pa h2#gauche_titre_pa {
width: 200px;
/* Correspond à la marge du bloc derniers sujets */
margin-left: 20px;
}
/* Taille du titre Titre pour l'aligner au centre du bloc correspondant */
#contour_pa h2#droite_titre_pa {
width: 268px;
/* Correspond à la marge du bloc */
margin-left: 10px;
}
/* Mise en forme du bloc contenant les derniers sujets */
#marquee_latest_pa {
display: inline-block;
vertical-align: top;
/* Taille */
height: 190px;
width: 190px;
padding: 5px;
margin-left: 20px;
margin-right: 5px;
/* Alignement du texte */
text-align: justify;
/* Couleur de fond puis bordure */
background-color: #7F6C53;
border: 1px dotted white;
overflow: hidden;
}
/* Création du bloc de droite dans le bloc En ce moment */
#droite_moment_pa {
display: inline-block;
vertical-align: top;
/* Taille */
width: 268px;
height: 205px;
margin-left: 10px;
overflow: hidden;
}
/* Création des cases dans ce même bloc */
.case_info_pa {
/* Taille */
width: auto;
height: 81px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
/* Bordure */
border: 2px solid #E0D0A6;
}
/* Mise en forme du texte dans ces cases */
.case_info_pa p {
/* Taille */
width: 233px;
height: 30px;
padding: 5px;
margin: 0px;
margin-top: 10px;
overflow: auto;
/* Couleur puis alignement du texte */
color: #FFFFFF;
text-align: justify;
}
/* Barre dans le bloc En ce moment */
#barre_moment_pa {
/* Taille */
width: 480px;
height: 15px;
margin: auto;
margin-top: 10px;
padding: 5px;
/* Couleur de bordure */
border: 2px solid #E0D0A6;
}
/* Création de la barre de liens en bas de la PA */
#bloc_liens_pa {
/* Taille */
width: 885px;
height: 27px;
margin-top: 5px;
padding-top: 5px;
/* Bordure */
border: 2px solid #E0D0A6;
/* Couleur du texte */
color: #FFFFFF;
overflow: hidden;
}
/* Mise en forme des liens dans la barre de liens */
#bloc_liens_pa a, #bloc_liens_pa a:link, #bloc_liens_pa a:active, #bloc_liens_pa a:visited {
/* Couleur puis taille */
color: #FFFFFF;
font-size: 13pt;
text-decoration: none !important;
transition: all ease 1s;
}
/* Mise en forme des liens dans la barre de liens au passage de la souris */
#bloc_liens_pa a:hover {
/* Couleur */
color: #E0D0A6;
text-decoration: none !important;
transition: all ease 1s;
}
/********** FIN PA **********/
Comment retirer les derniers sujets?
Le bloc des derniers sujets dans le HTML est celui-ci:
- Code:
<div id="marquee_latest_pa">
<marquee behavior="scroll" direction="up" scrollamount="1">
<div id="recent-topics">
</div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
</marquee>
</div>
Il vous suffit de supprimer ceci:
- Code:
<marquee behavior="scroll" direction="up" scrollamount="1">
<div id="recent-topics">
</div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
</marquee>
Et remplacer par n'importe quoi, par exemple un texte:
- Code:
<div id="marquee_latest_pa">
Je suis un texte.
</div>
Je rappelle que pour la changement de la mise en forme de ce bloc, même avec les derniers sujets retirés, est ceci dans le CSS:
- Code:
/* Mise en forme du bloc contenant les derniers sujets */
#marquee_latest_pa {
display: inline-block;
vertical-align: top;
/* Taille */
height: 190px;
width: 190px;
padding: 5px;
margin-left: 20px;
margin-right: 5px;
/* Alignement du texte */
text-align: justify;
/* Couleur de fond puis bordure */
background-color: #7F6C53;
border: 1px dotted white;
overflow: hidden;
}
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.
