AccueilFAQRechercherMembresGroupesS'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.


    PA couleur claire et assez simple

    Partagez
    avatar
    Fyraliel
    FémininAge : 27Messages : 1424

    le 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)



    avatar
    mon-etoile
    FémininAge : 29Messages : 140

    le Mer 9 Mar 2016 - 9:07

    Merci beaucoup
    avatar
    Kelalin
    FémininAge : 25Messages : 1886

    le Mer 9 Mar 2016 - 14:49

    Merci pour le partage !
    avatar
    Bunny Lune
    FémininAge : 28Messages : 142

    le Jeu 10 Mar 2016 - 14:13

    Très belle PA. Merci pour le partage.
    avatar
    Patdrue
    FémininAge : 28Messages : 157

    le Ven 11 Mar 2016 - 17:09

    l'est belle merci *.*
    avatar
    Loona
    FémininAge : 51Messages : 21

    le Dim 10 Avr 2016 - 20:52

    Très jolie. Merci.



    Etoile*
    FémininAge : 26Messages : 73

    le Dim 17 Avr 2016 - 20:23

    Très jolie, merci :)
    avatar
    RPG Maker
    FémininAge : 23Messages : 44

    le Mar 19 Avr 2016 - 14:34

    Jolie, merci. ^^
    avatar
    Manwin
    MasculinAge : 20Messages : 25

    le Jeu 28 Avr 2016 - 21:12

    Merci beaucoup, c'est très joli :)
    avatar
    Mandinoux
    FémininAge : 29Messages : 37

    le Ven 29 Avr 2016 - 21:14

    Très joli et sympa. Merci.
    avatar
    Shaolan
    MasculinAge : 26Messages : 107

    le Lun 2 Mai 2016 - 12:19

    Merci beaucoup !!
    avatar
    Isyndra
    FémininAge : 36Messages : 41

    le Jeu 5 Mai 2016 - 17:30

    Merci^^
    avatar
    gwenM
    FémininAge : 21Messages : 232

    le Mer 11 Mai 2016 - 5:16

    Merci
    avatar
    Tchii
    FémininAge : 32Messages : 251

    le Mer 11 Mai 2016 - 19:04

    Coucou!
    Merci pour cette petit Pa.
    A trés vite!
    Tchii.
    avatar
    Ahina
    FémininAge : 36Messages : 52

    le Mar 17 Mai 2016 - 21:57

    Merci beaucoup pour le code \o/
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Mar 31 Mai 2016 - 17:53

    merci



    avatar
    Piratress
    FémininAge : 20Messages : 215

    le Jeu 2 Juin 2016 - 9:22

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

    le Dim 5 Juin 2016 - 11:25

    Merci ;3
    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Dim 5 Juin 2016 - 13:17

    Merci beaucoup !
    avatar
    Neilia
    FémininAge : 26Messages : 101

    le Lun 13 Juin 2016 - 20:58

    Merchiiiiiiiii ♥
    avatar
    Velvet-Mist
    FémininAge : 27Messages : 44

    le Sam 25 Juin 2016 - 23:37

    Merci pour le tuto
    avatar
    Vani
    FémininAge : 34Messages : 154

    le Ven 1 Juil 2016 - 18:05

    Oh, c'est sympa ça, merci ^^
    avatar
    Kaleessi
    FémininAge : 26Messages : 69

    le Lun 4 Juil 2016 - 3:16

    Merci du partage!! :)
    avatar
    megb59
    FémininAge : 24Messages : 104

    le Jeu 21 Juil 2016 - 15:48

    Merci beaucoup il est super ce code
    avatar
    Sadie White
    FémininAge : 27Messages : 36

    le Ven 22 Juil 2016 - 18:25

    Merci beaucoup pour le code
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:41