Bonjour tout le monde ^^
Ce n'est pas sans une certaine émotion que je vous propose mon tout premier LS... Une PA assez simple à personnaliser, sobre, aux tons clairs.
HTML à mettre dans Panneau d'Administration > Affichage > Généralité
CSS à mettre dans Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS
Ce n'est pas sans une certaine émotion que je vous propose mon tout premier LS... Une PA assez simple à personnaliser, sobre, aux tons clairs.
Screen, effet au survol : Aperçu 1 - Aperçu 2 - Aperçu 3
HTML à mettre dans Panneau d'Administration > Affichage > Généralité
- Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Amita|BenchNine' rel='stylesheet' type='text/css' />
<div class="pa_totale">
<div class="bloc_staff1 img_staff"><span>texte1 <br /><a href="#">MP Le/la</a></span>
<img src="http://nsa37.casimages.com/img/2015/07/11/150711030606762635.png" />
</div>
<div class="bloc_staff2 img_staff"><span>texte2 <br /><a href="#">MP Le/la</a></span>
<img src="http://nsa37.casimages.com/img/2015/07/11/150711030606762635.png" />
</div>
<div class="bloc_staff3 img_staff"><span>texte3 <br /><a href="#">MP Le/la</a></span>
<img src="http://nsa37.casimages.com/img/2015/07/11/150711030606762635.png" />
</div>
<div class="bloc_staff4 img_staff"><span>texte4 <br /><a href="#">MP Le/la</a></span>
<img src="http://nsa37.casimages.com/img/2015/07/11/150711030606762635.png" />
</div>
<div class="pa_centre"><span>Bienvenue sur "Nom du Forum"</span>
<div class="navig"><a href="#">lien1</a> - <a href="#">lien2</a> - <a href="#">lien3</a></div>
<div class="cadre_contexte"><div class="titre_contexte">Contexte</div>
<div class="texte_contexte">Hac ita persuasione reducti intra moenia bellatores obseratis undique portarum aditibus, propugnaculis insistebant et pinnis, congesta undique saxa telaque habentes in promptu, ut si quis se proripuisset interius, multitudine missilium sterneretur et lapidum.<br /><br />
Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.<br /><br />
Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. <a href="#"> Lire la suite...</a></div>
</div>
<div class="cadre_nouv"><div class="titre_nouv">Nouveautés</div>
<div class="texte_nouv"><u>Nouveauté 1 :</u> Per hoc minui studium suum existimans Paulus.<br /> <u>Nouveauté 2 :</u> Vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit.<br /> <u>Nouveauté 3 :</u> et instabat ut eum quoque cum tribunis et aliis pluribus.</div>
</div><br />
<div class="cadre_topsite"><div class="titre_topsite">Top-Sites</div><a href="#"><img src="http://nsa37.casimages.com/img/2015/07/27/150727055448685890.png" style="margin: 10px 10px 0 0;" /></a> <a href="#"><img src="http://nsa37.casimages.com/img/2015/07/27/150727055448685890.png"/></a> <br /> <a href="#"><img src="http://nsa37.casimages.com/img/2015/07/27/150727055448685890.png" style="margin-right: 10px;"/></a> <a href="#"><img src="http://nsa37.casimages.com/img/2015/07/27/150727055448685890.png" /></a></div>
<div class="cadre_parten"><div class="titre_parten">Top-Partenaires</div><a href="http://www.never-utopia.com/"><img src="http://i51.servimg.com/u/f51/09/01/19/65/miniba14.gif" style="margin-top: 10px;" /></a><a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/493732miniban4.jpg" style="margin-left: 5px;" /></a> <a href="http://www.never-utopia.com/"><img src="http://img11.hostingpics.net/pics/742104logo5.jpg" style="margin-left: 5px;" /></a><br /><a href="http://www.never-utopia.com/"><img src="http://img15.hostingpics.net/pics/465368bouton3.jpg" style="margin-top: 10px;" /></a> <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/504729logo2.gif" style="margin-left: 5px;" /></a> <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/127496miniban12.jpg" style="margin-left: 5px;" /></a>
</div>
<div class="cadre_credit"><div class="titre_credit">Crédits</div>
<div class="texte_credit"> Le contexte a été écrit par ..XX.., la PA a été réalisé par Fyraliel de <a href="http://www.never-utopia.com/">Never-Utopia</a>, les catégories par ..XX.. et le QEEL par ..XX... Merci de respecter leur travail.</div>
</div><div style="font: 10px 'Time New Roman'; margin-top: 5px;"><a href="http://www.never-utopia.com/" style="color: #97AEEF;">Fyraliel</a></div>
</div>
<div class="img_predef1 bloc_predef"><span><a href="#">Nom du Perso</a></span><img src="http://nsa38.casimages.com/img/2015/07/26/150726121906363028.png" /></div>
<div class="bloc_predef img_predef2"><span><a href="#">Nom du Perso</a></span><img src="http://nsa38.casimages.com/img/2015/07/26/150726121906363028.png" /></div>
<div class="bloc_predef img_predef3"><span><a href="#">Nom du Perso</a></span><img src="http://nsa38.casimages.com/img/2015/07/26/150726121906363028.png" /></div>
</div>
CSS à mettre dans Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS
- Code:
/*** PA ***/
.pa_totale {
position: relative;
width: 840px;
margin: auto;
}
.pa_centre {
height: 620px;
border: 2px solid #71838D;
position: relative;
margin: auto;
border-radius: 40px;
text-align: center;
color: #97AEEF;
}
.pa_centre span{
font: 25px 'Great Vibes';
}
.img_staff {
height: 81px;
width: 151px;
border: 2px solid #71838D;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
left: -75.5px;
background: #000000;
overflow: hidden;
text-align: center;
z-index: 2;
}
.img_staff img{
height: 81px;
width: 151px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
transition: 1.3s all;
}
.img_staff:hover img{
top: 55px;
}
.img_staff span{
color: #7FC4E2;
font: 18px 'BenchNine';
}
.bloc_staff1 {
top: 140px;
}
.bloc_staff2 {
top: 231px;
}
.bloc_staff3 {
top: 322px;
}
.bloc_staff4 {
top: 413px;
}
.navig {
height: 40px;
width: 670px;
border: 2px solid #71838D;
margin: 20px auto 0;
border-radius: 18px;
font: 20px 'Amita';
color: #97AEEF;
padding-top: 10px;
}
.navig a, .navig a:link{
color: #97AEEF;
}
.cadre_contexte{
height: 240px;
width: 365px;
border: 2px solid #71838D;
margin-top: 15px;
border-radius: 20px;
font: 20px 'Amita';
display: inline-block;
}
.titre_contexte{
border-bottom: 1px solid #71838D;
width: 255px;
height: 32px;
margin: auto;
}
.texte_contexte{
height: 185px;
width: 325px;
overflow: auto;
text-align: justify;
font: 15px 'Time New Roman';
color: #4B5A83;
margin: auto;
padding-top: 5px;
}
.cadre_nouv{
height: 240px;
width: 185px;
border: 2px solid #71838D;
border-radius: 20px;
display: inline-block;
font: 20px 'Amita';
vertical-align: top;
margin: 15px 0 0 15px;
}
.titre_nouv{
border-bottom: 1px solid #71838D;
width: 140px;
height: 32px;
margin: auto;
}
.texte_nouv{
height: 185px;
width: 170px;
overflow: auto;
text-align: center;
font: 15px 'Time New Roman';
color: #4B5A83;
margin: auto;
padding-top: 5px;
}
.cadre_topsite{
height: 170px;
width: 170px;
border: 2px solid #71838D;
display: inline-block;
margin: 15px 0 0 50px;
border-radius: 20px;
font: 20px 'Amita';
vertical-align: top;
}
.titre_topsite{
border-bottom: 1px solid #71838D;
width: 140px;
height: 32px;
margin: auto;
}
.cadre_parten{
height: 170px;
width: 300px;
border: 2px solid #71838D;
border-radius: 20px;
display: inline-block;
margin: 15px 0 0 10px;
vertical-align: top;
font: 20px 'Amita';
}
.titre_parten{
border-bottom: 1px solid #71838D;
width: 230px;
height: 32px;
margin: auto;
}
.cadre_credit{
height: 170px;
width: 170px;
border: 2px solid #71838D;
display: inline-block;
margin: 15px 25px 0 10px;
border-radius: 20px;
font: 20px 'Amita';
}
.titre_credit{
border-bottom: 1px solid #71838D;
width: 100px;
height: 32px;
margin: auto;
}
.texte_credit{
height: 130px;
width: 150px;
overflow: auto;
text-align: justify;
font: 15px 'Time New Roman';
color: #4B5A83;
margin: auto;
}
.bloc_predef {
height: 98px;
width: 98px;
border: 2px solid #71838D;
position: absolute;
right: -50px;
background: #000000;
text-align: center;
overflow: hidden;
border-radius: 50px;
}
.bloc_predef img{
position: absolute;
transition: 2s;
border-radius: 50px;
top: 0;
left: 0;
z-index: 2;
}
.bloc_predef:hover img{
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.bloc_predef span{
display: block;
color: #7FC4E2;
font: 15px 'benchNine';
padding-top: 30px;
opacity: 0;
transition: 2s;
position: relative;
}
.bloc_predef:hover span{
opacity: 1;
z-index: 3;
}
.img_predef1 {
top: 140px;
}
.img_predef2 {
top: 255px;
}
.img_predef3 {
top: 375px;
}
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.
Dernière édition par Onyx le Mar 29 Mai 2018 - 19:21, édité 4 fois (Raison : Retrait du hide)
