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 des plus simples avec dégradé vert

    Partagez
    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Dim 11 Mai 2014 - 17:48

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

    Voici un exemple :



    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.



    avatar
    Neva
    FémininAge : 26Messages : 18564

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



     
    avatar
    Sauney
    FémininAge : 22Messages : 428

    le 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



    avatar
    Pentacle
    MasculinAge : 25Messages : 63

    le Dim 13 Juil 2014 - 18:54

    Thank you very much.
    avatar
    XIII
    MasculinAge : 21Messages : 19

    le Mar 5 Aoû 2014 - 21:18

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

    le Mar 12 Aoû 2014 - 21:41

    merci



    avatar
    Luwen Moon
    FémininAge : 25Messages : 21

    le Jeu 14 Aoû 2014 - 12:54

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

    le Ven 22 Aoû 2014 - 21:47

    merci
    avatar
    Nishimura
    FémininAge : 19Messages : 4

    le Sam 30 Aoû 2014 - 19:37

    Je l'aime beaucoup !*-* merci pour le partage ^3^
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Ven 5 Sep 2014 - 22:40

    merci



    avatar
    John Parker
    MasculinAge : 35Messages : 57

    le Mar 30 Sep 2014 - 14:03

    Merci beaucoup pour ce tutoriel ^^



    avatar
    -Larme-
    FémininAge : 17Messages : 62

    le Dim 12 Oct 2014 - 18:49

    Merci ^^



    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Mar 21 Oct 2014 - 19:09

    merci
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Sam 25 Oct 2014 - 14:16

    Bravo et merci ! ^^



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

    le Sam 8 Nov 2014 - 23:59

    Merci ♥
    avatar
    Cruelly
    FémininAge : 25Messages : 2563

    le Lun 10 Nov 2014 - 1:45

    Merci :)



    MON PROJET :heart: j'ai besoin d'avis ^^


    avatar
    Sinon
    FémininAge : 19Messages : 68

    le Jeu 13 Nov 2014 - 19:13

    Merci.
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Mer 26 Nov 2014 - 19:23

    Merci :)
    avatar
    Euterpe
    FémininAge : 31Messages : 303

    le Jeu 11 Déc 2014 - 17:49

    merciii
    avatar
    Chèlha
    FémininAge : 25Messages : 121

    le Mer 17 Déc 2014 - 14:06

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

    le Lun 29 Déc 2014 - 13:51

    Merci du partage =)



    avatar
    TheDrakLord
    MasculinAge : 22Messages : 59

    le Lun 23 Mar 2015 - 19:11

    Merci



    avatar
    Linoa17
    FémininAge : 28Messages : 42

    le Sam 11 Avr 2015 - 18:44

    Merci beaucoup !




    ~ If you come here... You'll find me. I promise ~





    Thanks Muscarine *u* ♥:

    avatar
    kinai0107
    MasculinAge : 42Messages : 15

    le Dim 19 Avr 2015 - 23:47

    merci
    Hop80
    MasculinAge : 28Messages : 138

    le Ven 8 Mai 2015 - 0:21

    Jolie merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 2:01