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.

-45%
Le deal à ne pas rater :
Harman Kardon Citation One MK3 – Enceinte intelligente ...
99 € 179 €
Voir le deal

    PA couleur claire et assez simple

    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Lun 27 Juil 2015 - 22:45

    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.

    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)



    PA couleur claire et assez simple F86e7518c1
    mon-etoile
    mon-etoile
    FémininAge : 36Messages : 140

    Mer 9 Mar 2016 - 9:07

    Merci beaucoup
    Anonymous
    Invité

    Mer 9 Mar 2016 - 14:49

    Merci pour le partage !
    Bunny Lune
    Bunny Lune
    FémininAge : 35Messages : 145

    Jeu 10 Mar 2016 - 14:13

    Très belle PA. Merci pour le partage.
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Ven 11 Mar 2016 - 17:09

    l'est belle merci *.*
    Loona
    Loona
    FémininAge : 57Messages : 22

    Dim 10 Avr 2016 - 20:52

    Très jolie. Merci.



    PA couleur claire et assez simple Signat10
    avatar
    Etoile*
    FémininAge : 33Messages : 82

    Dim 17 Avr 2016 - 20:23

    Très jolie, merci :)
    RPG Maker
    RPG Maker
    FémininAge : 30Messages : 53

    Mar 19 Avr 2016 - 14:34

    Jolie, merci. ^^
    Manwin
    Manwin
    MasculinAge : 26Messages : 25

    Jeu 28 Avr 2016 - 21:12

    Merci beaucoup, c'est très joli :)
    Mandinoux
    Mandinoux
    FémininAge : 35Messages : 38

    Ven 29 Avr 2016 - 21:14

    Très joli et sympa. Merci.
    Shaolan
    Shaolan
    MasculinAge : 33Messages : 121

    Lun 2 Mai 2016 - 12:19

    Merci beaucoup !!
    Isyndra
    Isyndra
    FémininAge : 42Messages : 41

    Jeu 5 Mai 2016 - 17:30

    Merci^^
    gwenM
    gwenM
    FémininAge : 28Messages : 278

    Mer 11 Mai 2016 - 5:16

    Merci
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Mer 11 Mai 2016 - 19:04

    Coucou!
    Merci pour cette petit Pa.
    A trés vite!
    Tchii.
    Ahina
    Ahina
    FémininAge : 43Messages : 73

    Mar 17 Mai 2016 - 21:57

    Merci beaucoup pour le code \o/
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Mar 31 Mai 2016 - 17:53

    merci



    PA couleur claire et assez simple 707828SignArthur2
    PrincesseÔ
    PrincesseÔ
    FémininAge : 27Messages : 220

    Jeu 2 Juin 2016 - 9:22

    Merci pour cette P.A toute belle :3
    Colombe
    Colombe
    FémininAge : 23Messages : 28

    Dim 5 Juin 2016 - 11:25

    Merci ;3
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Dim 5 Juin 2016 - 13:17

    Merci beaucoup !
    Neilia
    Neilia
    FémininAge : 33Messages : 101

    Lun 13 Juin 2016 - 20:58

    Merchiiiiiiiii ♥
    Velvet-Mist
    Velvet-Mist
    FémininAge : 33Messages : 45

    Sam 25 Juin 2016 - 23:37

    Merci pour le tuto
    Vani
    Vani
    FémininAge : 40Messages : 154

    Ven 1 Juil 2016 - 18:05

    Oh, c'est sympa ça, merci ^^
    Kaleessi
    Kaleessi
    FémininAge : 32Messages : 78

    Lun 4 Juil 2016 - 3:16

    Merci du partage!! :)
    megb59
    megb59
    FémininAge : 30Messages : 111

    Jeu 21 Juil 2016 - 15:48

    Merci beaucoup il est super ce code
    Sadie White
    Sadie White
    FémininAge : 33Messages : 38

    Ven 22 Juil 2016 - 18:25

    Merci beaucoup pour le code
    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 17:49