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

    Rappel du premier message :

    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
    fancy
    MasculinAge : 28Messages : 34

    le Jeu 21 Mai 2015 - 16:45

    c'est superbe, j'adore, merci du partage <3
    avatar
    Wolf Valley
    FémininAge : 18Messages : 70

    le Sam 6 Juin 2015 - 17:27

    Merci !
    avatar
    Lillyth
    FémininAge : 22Messages : 3

    le Dim 5 Juil 2015 - 23:10

    Yeah mici :p
    avatar
    Err0r
    FémininAge : 24Messages : 134

    le Lun 13 Juil 2015 - 18:31

    Je pique !



    avatar
    Raymanou
    MasculinAge : 25Messages : 49

    le Dim 18 Oct 2015 - 16:28

    merci
    avatar
    Kelalin
    FémininAge : 25Messages : 1888

    le Dim 18 Oct 2015 - 23:21

    Merci pour le partage ! (’-’*)
    avatar
    Pikabouh
    FémininAge : 16Messages : 123

    le Mer 4 Nov 2015 - 13:39

    Thanks Very Happy
    avatar
    Cydae
    FémininAge : 25Messages : 99

    le Jeu 5 Nov 2015 - 3:33

    Merci! :3
    avatar
    Gargouille
    MasculinAge : 20Messages : 83

    le Mar 1 Déc 2015 - 14:54

    Merci
    Brisyx
    FémininAge : 17Messages : 31

    le Jeu 21 Jan 2016 - 15:38

    Merci ^^
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Sam 19 Mar 2016 - 13:24

    Merci!
    avatar
    Unleash
    MasculinAge : 18Messages : 83

    le Mer 23 Mar 2016 - 10:55

    ty
    avatar
    Edward Speleers
    FémininAge : 30Messages : 456

    le Mar 20 Sep 2016 - 15:41

    Je prend, merci



    avatar
    duclos
    MasculinAge : 36Messages : 1

    le Mer 21 Déc 2016 - 21:14

    Merci beaucoup
    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Ven 17 Fév 2017 - 1:26

    merci :)
    avatar
    Cyra
    FémininAge : 30Messages : 40

    le Lun 5 Juin 2017 - 2:23

    Merci
    avatar
    Steel Block
    MasculinAge : 23Messages : 34

    le Lun 24 Juil 2017 - 0:18

    Mercieuh
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Mer 26 Juil 2017 - 12:28

    Merci !
    avatar
    Sophie2
    FémininAge : 54Messages : 63

    le Jeu 28 Sep 2017 - 18:07

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:02