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

Le Deal du moment : -25%
Appareil Photo Instantané Fujifilm Instax ...
Voir le deal
59.99 €

    PA des plus simples avec dégradé vert

    Sauney
    Sauney
    FémininAge : 25Messages : 428

    Dim 11 Mai 2014 - 17:48

    Bonjour à tous, voici un petit code tout simple pour un PA concise et sans chichi.

    Voici un exemple :
    PA des plus simples avec dégradé vert Padegr10


    Alors pour commencer allez dans "Panneau d'administration" > "Affichage" > "Templates" > "Général" > "index_body"
    Trouvez(en tout début de page) :
    Code:
    {JAVASCRIPT}
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

    Et remplacez par :
    Code:
    {JAVASCRIPT}
    <!-- BEGIN message_admin_index -->
    <table class="cadre_pa" width="100%" border="0" cellspacing="1" cellpadding="0">

    Enregistrez puis publiez(appuyez sur le +).

    Rendez-vous dans "Panneau d'administration" > "Affichage" > "Page d'accueil" > "Généralités" et dans le cadre vous remplacez le
    Code:
    <br />
    par ce code-ci :
    Code:
    <table>
        
       <tbody>
          
          <tr>
              
             <td>
                
                <div class="contexte">
                    ICI LE CONTEXTE !
                </div>
                
             </td>
              
             <td class="staff">
                 <valign="top"></valign="top">
                <div class="infobulle">
                        <img class="imgstaff" src="lienavatar" />
                   <div>
                      
                      <div class="contenu">
                          Pseudo<br />Rang<br /> <a class="lien" href="#"><em>Profil</em></a> - <a class="lien" href="#"><em>Envoyer un MP</em></a>
                      </div>
                      
                   </div>
                    
                </div><valign="top"></valign="top">
                <div class="infobulle">
                        <img class="imgstaff" src="lienavatar" />
                   <div>
                      
                      <div class="contenu">
                          Pseudo<br />Rang<br /> <a class="lien" href="#"><em>Profil</em></a> - <a class="lien" href="#"><em>Envoyer un MP</em></a>
                      </div>
                      
                   </div>
                    
                </div><valign="top"></valign="top">
                <div class="infobulle">
                        <img class="imgstaff" src="lienavatar" />
                   <div>
                      
                      <div class="contenu">
                          Pseudo<br />Rang<br /> <a class="lien" href="#"><em>Profil</em></a> - <a class="lien" href="#"><em>Envoyer un MP</em></a>
                      </div>
                      
                   </div>
                    
                </div><valign="top"></valign="top">
                <div class="infobulle">
                    <img class="imgstaff" src="lienavatar" />
                   <div>
                      
                      <div class="contenu">
                          Pseudo<br />Rang<br /> <a class="lien" href="#"><em>Profil</em></a> - <a class="lien" href="#"><em>Envoyer un MP</em></a>
                      </div>
                      
                   </div>
                    
                </div>
                
             </td>
              
          </tr>
          
          <tr>
              
             <td>
                
                <div class="lier">
                    <a href="nouslier"><img src="http://img4.hostingpics.net/pics/620376boutonpartenariat.png" /></a>
                </div>
                
             </td>
              
             <td>
                
                <div class="news">
                    <marquee style="height: 98px;" scrollamount="2" direction="up"> bla bla bla bla bla bla bla bla bla bla<br /><br />bla je suis une new !</marquee>
                </div>
                
             </td>
              
          </tr>
          
          <tr>
              
             <td>
                
                <div class="partenaires">
                    
                   <center>
                       <a href="partenaire"><img src="http://img4.hostingpics.net/pics/620376boutonpartenariat.png" /></a> <a href="partenaire"><img src="http://img4.hostingpics.net/pics/620376boutonpartenariat.png" /></a> <a href="partenaire"><img src="http://img4.hostingpics.net/pics/620376boutonpartenariat.png" /></a>
                   </center>
                    
                </div>
                
             </td>
              
          </tr>
    <tr><td>
    <div class="credits">Codage : Sauney de <a href="http://www.never-utopia.com/">Never Utopia</a></div>
    </td></tr>
       </tbody>
    </table>

    Venons-en au CSS maintenant, allez dans "Panneau d'administration" > "Affichage" > "Images et couleurs" > "Couleurs" > "Feuille de style CSS" et rajoutez :
    Code:
    /* DEBUT DE LA PA*/
    .cadre_pa{  
    background: rgba(50, 50, 50, 0.8); /* met la couleur noir en semi transparence */
    margin: auto;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #fff;
    }
    .contexte{
    position: relative;
    float: left;
    width: 200px;
    height: 150px;
    margin-left: 10px;
    background: -webkit-linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    background:    -moz-linear-gradient( #c9de96, #398235); /* Ces 4 lignes nommées background servent à adapter le dégradé à tous les navigateurs */
    background:    -ms-linear-gradient( #c9de96, #398235);
    background:      -o-linear-gradient( #c9de96, #398235);
    background:        linear-gradient( #c9de96, #398235);
    border: 2px solid #fff;
    border-radius: 10px 0px 10px 0px;
    overflow-y: auto;
    color: #fff;
    padding: 5px;
    font-size: 11px;
    }
    .lier{
    position: relative;
    position: left;
    margin-left: 80px;
    margin-top: 20px;
    }
    .news{
    position: relative;
    position: left;
    margin-left: -440px;
    background: -webkit-linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    background:    -moz-linear-gradient( #c9de96, #398235); /* Ces 4 lignes nommées background servent à adapter le dégradé à tous les navigateurs */
    background:    -ms-linear-gradient( #c9de96, #398235);
    background:      -o-linear-gradient( #c9de96, #398235);
    background:        linear-gradient( #c9de96, #398235);
    border: 2px solid #fff;
    border-radius: 0px 10px 0px 10px;
    padding: 5px;
    width: 420px;
    height: 100px;
    color: #fff;
    font-size: 11px;
    }
    .partenaires{
    margin: 5px auto 5px 10px;
    background: -webkit-linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    background:    -moz-linear-gradient( #c9de96, #398235); /* Ces 4 lignes nommées background servent à adapter le dégradé à tous les navigateurs */
    background:    -ms-linear-gradient( #c9de96, #398235);
    background:      -o-linear-gradient( #c9de96, #398235);
    background:        linear-gradient( #c9de96, #398235);
    border: 2px solid #fff;
    border-radius: 10px 0px 10px 0px;
    width: 680px;
    height: 31px;
    }
    .credits{
    width 80px;
    height: 20px;
    color: #fff;
    font-size: 10px;
    margin: 5px auto;
    text-align: center;
    }
    /* INFOS STAFF */
    .staff{
    position: relative;
    float: left;
    height: 150px;
    margin-left: -440px;
    margin-bottom: 10px;
    color: #fff;
    }
    .imgstaff{
    width: 100px;
    height: 150px;
    margin-right: 5px;
    border-radius: 0px 10px 0px 10px;
    border-right: 2px solid #fff;
    border-bottom: 4px solid #fff;
    background: -webkit-linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    background:    -moz-linear-gradient( #c9de96, #398235); /* Ces 4 lignes nommées background servent à adapter le dégradé à tous les navigateurs */
    background:    -ms-linear-gradient( #c9de96, #398235);
    background:      -o-linear-gradient( #c9de96, #398235);
    background:        linear-gradient( #c9de96, #398235); }
    .infobulle {
      display: inline-block;
    }
    .infobulle > div {
      position: absolute;
      margin-top: -20px;
      opacity: 0;
      visibility: hidden;
    margin-left: -60px;
      -webkit-transform: scale(0.3);
      -moz-transform: scale(0.3);
      -o-transform: scale(0.3);
      transform: scale(0.3);
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .infobulle:hover > div {
      opacity: 1;
      visibility: visible;
    z-index: 999;
    margin-left: -60px;
      -webkit-transform: scale(1) rotate(0deg);
      -moz-transform: scale(1) rotate(0deg);
      -o-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
    }
    .contenu {
      width: 100px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 2px;
      padding-top: 2px;
    border-radius: 0px 10px 0px 10px;
    border: 2px solid #fff;
    background: -webkit-linear-gradient( #c9de96, #398235); /* gère le dégradé, 1ère couleur= couleur du haut, 2ième couleur= couleur du bas */
    background:    -moz-linear-gradient( #c9de96, #398235); /* Ces 4 lignes nommées background servent à adapter le dégradé à tous les navigateurs */
    background:    -ms-linear-gradient( #c9de96, #398235);
    background:      -o-linear-gradient( #c9de96, #398235);
    background:        linear-gradient( #c9de96, #398235);
      color: #fff;
      text-align: center;
      font-size: 12px;
      font-family: Arial;
      box-shadow: 0px 0px 5px #121212;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -o-border-radius: 5px;
    }
    .lien {
      color: #121212;
      text-decoration: none;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .lien:hover {
      color: #ffffff;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    /* FIN DE LA PA */

    En espérant que ça vous plaise !

    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.



    PA des plus simples avec dégradé vert Signne10
    Neva
    Neva
    FémininAge : 29Messages : 18565

    Jeu 5 Juin 2014 - 17:46

    Hey Samhain !
    Merci pour le partage du code ! On a toutes les infos, je déplace donc
    Juste, certains préfixes ne sont plus si utiles que ça avec les dernières versions des navigateurs. T'es pas obligée de t'embêter avec eux. Tu peux vérifier ici : http://caniuse.com/ :)



     
    Sauney
    Sauney
    FémininAge : 25Messages : 428

    Mar 1 Juil 2014 - 21:06

    Merci pour cette info et pour le lien Neva mais je crois que tu n'as pas mis tes lunettes mamie, moi c'est Sauney Razz



    PA des plus simples avec dégradé vert Signne10
    Pentacle
    Pentacle
    MasculinAge : 28Messages : 63

    Dim 13 Juil 2014 - 18:54

    Thank you very much.
    XIII
    XIII
    MasculinAge : 23Messages : 19

    Mar 5 Aoû 2014 - 21:18

    Merci pour le partage !
    shala
    shala
    FémininAge : 29Messages : 213

    Mar 12 Aoû 2014 - 21:41

    merci



    Luwen Moon
    Luwen Moon
    FémininAge : 28Messages : 21

    Jeu 14 Aoû 2014 - 12:54

    Merci Beauoup!
    Honeey L.
    Honeey L.
    FémininAge : 28Messages : 79

    Ven 22 Aoû 2014 - 21:47

    merci
    Nishimura
    Nishimura
    FémininAge : 22Messages : 4

    Sam 30 Aoû 2014 - 19:37

    Je l'aime beaucoup !*-* merci pour le partage ^3^
    Likilou
    Likilou
    MasculinAge : 27Messages : 307

    Ven 5 Sep 2014 - 22:40

    merci



    PA des plus simples avec dégradé vert 707828SignArthur2
    John Parker
    John Parker
    MasculinAge : 38Messages : 58

    Mar 30 Sep 2014 - 14:03

    Merci beaucoup pour ce tutoriel ^^



    PA des plus simples avec dégradé vert Ange_s10
    -Larme-
    -Larme-
    FémininAge : 20Messages : 63

    Dim 12 Oct 2014 - 18:49

    Merci ^^



    PA des plus simples avec dégradé vert 226604Larme20
    Féhéla
    Féhéla
    FémininAge : 47Messages : 238

    Mar 21 Oct 2014 - 19:09

    merci
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 21Messages : 304

    Sam 25 Oct 2014 - 14:16

    Bravo et merci ! ^^



    Just want to be yours.
    Emelyne
    Emelyne
    FémininAge : 39Messages : 77

    Sam 8 Nov 2014 - 23:59

    Merci ♥
    Cruelly
    Cruelly
    FémininAge : 27Messages : 2605

    Lun 10 Nov 2014 - 1:45

    Merci :)



    :heart: :heart:
    Sinon
    Sinon
    FémininAge : 22Messages : 68

    Jeu 13 Nov 2014 - 19:13

    Merci.
    Hayate747
    Hayate747
    MasculinAge : 31Messages : 196

    Mer 26 Nov 2014 - 19:23

    Merci :)
    Carmina
    Carmina
    FémininAge : 34Messages : 437

    Jeu 11 Déc 2014 - 17:49

    merciii
    Chèlha
    Chèlha
    FémininAge : 28Messages : 121

    Mer 17 Déc 2014 - 14:06

    Merci, c'est super !
    Selfura
    Selfura
    MasculinAge : 29Messages : 54

    Lun 29 Déc 2014 - 13:51

    Merci du partage =)



    PA des plus simples avec dégradé vert 1420386819-sign-deathrock
    TheDrakLord
    TheDrakLord
    MasculinAge : 25Messages : 61

    Lun 23 Mar 2015 - 19:11

    Merci



    PA des plus simples avec dégradé vert Tumblr_lungm7eJ4o1qbzgd7o1_r1_500
    Linoa
    Linoa
    FémininAge : 31Messages : 42

    Sam 11 Avr 2015 - 18:44

    Merci beaucoup !



    PA des plus simples avec dégradé vert Pdsm
    ~ If you come here... You'll find me. I promise ~
    kinai0107
    kinai0107
    MasculinAge : 45Messages : 15

    Dim 19 Avr 2015 - 23:47

    merci
    avatar
    Hop80
    MasculinAge : 31Messages : 138

    Ven 8 Mai 2015 - 0:21

    Jolie merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 3:36