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.

-16%
Le deal à ne pas rater :
Aspirateur balai Dyson V15 Detect Absolute (2023)
669 € 799 €
Voir le deal

    PA couleur claire et assez simple

    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Lun 27 Juil 2015 - 22:45

    Rappel du premier message :

    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 - Page 2 F86e7518c1
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Lun 19 Sep 2016 - 13:39

    Merci !
    Minoe
    Minoe
    FémininAge : 30Messages : 13

    Sam 8 Oct 2016 - 16:11

    Merci pour le LS ^^
    Exuperance
    Exuperance
    FémininAge : 33Messages : 50

    Lun 21 Nov 2016 - 2:36

    Merci ♥♥
    Dariel
    Dariel
    FémininAge : 54Messages : 69

    Mar 22 Nov 2016 - 5:22

    cheers Fyra,beau début...
    Merci

    :ange:



    C'est la vie Invité ! Pas le paradis.
    La Sagesse
    La Sagesse
    FémininAge : 51Messages : 25

    Jeu 24 Nov 2016 - 20:00

    Merci beaucoup, elle est magnifique ! Very Happy
    Shiba Rikubi
    Shiba Rikubi
    MasculinAge : 29Messages : 23

    Lun 12 Déc 2016 - 22:44

    Merci beaucoup pour ce très joli code très sympa! ^^
    Ombeline30
    Ombeline30
    FémininAge : 39Messages : 130

    Dim 22 Jan 2017 - 16:03

    Magnifique PA merci beaucoup pour ce beau partage <3
    Ari
    Ari
    FémininAge : 23Messages : 109

    Mer 25 Jan 2017 - 16:12

    Merci !
    Azuna
    Azuna
    FémininAge : 20Messages : 12

    Lun 13 Mar 2017 - 18:32

    Merci
    luna-chan86
    luna-chan86
    FémininAge : 35Messages : 201

    Mar 14 Mar 2017 - 17:38

    merci beaucoup <3



    Kitket
    Kitket
    FémininAge : 40Messages : 106

    Mer 15 Mar 2017 - 10:06

    Merci
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Ven 31 Mar 2017 - 18:39

    Merci !
    icequeen38
    icequeen38
    FémininAge : 31Messages : 49

    Sam 20 Mai 2017 - 19:02

    merci pour cette pa
    Kamui Kyuuji
    Kamui Kyuuji
    MasculinAge : 32Messages : 30

    Dim 21 Mai 2017 - 22:00

    Merci.
    Laurolay
    Laurolay
    FémininAge : 20Messages : 109

    Jeu 8 Juin 2017 - 10:25

    Parfaite mercii !
    Manue
    Manue
    FémininAge : 43Messages : 58

    Mer 21 Juin 2017 - 23:51

    Merci beaucoup !! Très beau travail !!
    Ombeline30
    Ombeline30
    FémininAge : 39Messages : 130

    Dim 2 Juil 2017 - 11:37

    Bonjour

    J'édite mon message pensant avoir un souci avec l'affichage mais j'ai trouvé ce qui clochait encore merci pour ce beau partage  :love:

    Belle soirée  :hug:
    Yamoto
    Yamoto
    FémininAge : 22Messages : 29

    Mar 1 Aoû 2017 - 12:08

    Merci c'est très beau
    Selmacke
    Selmacke
    FémininAge : 34Messages : 100

    Sam 9 Sep 2017 - 10:02

    Merci :)
    Brises
    Brises
    FémininAge : 26Messages : 28

    Jeu 21 Sep 2017 - 15:38

    Merci ^^



    PA couleur claire et assez simple - Page 2 Cwq6
    Mystick
    Mystick
    FémininAge : 39Messages : 100

    Ven 22 Sep 2017 - 14:44

    Merci beaucoup pour le partage :).
    mama74
    mama74
    MasculinAge : 37Messages : 19

    Dim 24 Sep 2017 - 21:57

    merci beaucoup
    taeya
    taeya
    FémininAge : 32Messages : 1

    Mar 31 Oct 2017 - 20:04

    merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Juin 2024 - 9:02