*RESOLU* Imitation bouton sur légende

Voir le sujet précédent Voir le sujet suivant Aller en bas

*RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 11:09
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
Lien forum: ICI https://www.quadsalvetain.com/

j'utilise Google
forum en Invision
(Template Java css modifier)

Bonjour;
est t'il possible d'avoir un fond de couleur imitation bouton avec écriture dedans ou en image (si image je peut les créer comme ci dessous)
et rajouté si possible une infobulle
Cordialement

j'ai ceci:

j'aimerai bien avoir ceci si possible:


code CSS :

CSS
Code:
/*script message remercie*/
#fa_thanks_message {
  color:#000000;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  background-color:#5A6B58;
  border:1px solid black;
  border-radius:6px;
  padding:6px;
  margin:6px;
}
/*Positionnemnt du bouton merci NE PAS TOUCHER LE DISPLAY NONE*/
ul.posting-icons li a[href*="thank"] img,ul.posting-icons li img[alt="Sujet déjà remercié"]{display:none;margin-top: 20px;}
/*Colorisation d un message remercie*/
.M14_PostThanK  .post-header{min-height: 47px;}
.M14_PostThanK  .post-entry,
.M14_PostThanK  .post-entry a,
.M14_PostThanK  .signature_div,
.M14_PostThanK  .signature_div a,
.M14_PostThanK  .postprofile ,
.M14_PostThanK  .user-info .label span,
.M14_PostThanK strong,.M14_PostThanK span
{color:#000000 !important;}



body
{
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: top center;

}
div#logostrip #logo {
 display: block;
 margin: 0 0px;
                padding: 0.8em 0em 0em 0em;
 float: center;
 }
table.ipbtable tfoot td { background-color: #000000; background-image: url("https://i.servimg.com/u/f84/13/64/43/70/rr210.jpg");}
.box-content { border-bottom:10px  #000000; }
#gfooter {
background-color:#;
height: 80px;
background: url("https://i.servimg.com/u/f84/13/64/43/70/tes111.jpg") no-repeat 50% 50%;
}
#submenu ul li a {
padding: 0px;
margin: 0px;
text-decoration: none;
}
#navstrip li {
 float: left;
 margin: 0 5px;
 padding-left: 10px;
 background: url('https://i.servimg.com/u/f61/13/51/88/96/fleche10.png') no-repeat left 50%;
 }
#navstrip li.begin {
 padding-left: 10px;
 background: url('https://i.servimg.com/u/f61/13/51/88/96/fleche11.png') no-repeat left 50%;
 }
div.maintitle .expand,div.maintitle .contract {
 float: right;
 width: 10px;
 height: 10px;
 background: url('https://i.servimg.com/u/f61/13/51/88/96/invisi11.png') no-repeat 50% 50%;
 cursor: pointer;
 }
div.maintitle .expand {
 background: url('https://i.servimg.com/u/f61/13/51/88/96/invisi10.png') no-repeat 50% 50%;
 }
.popmenubutton a {
 display: block;
 padding: 2px 16px 2px 8px;
 background-image: url('https://i.servimg.com/u/f61/13/51/88/96/fleche12.png');
 background-position: 97% 50%;
 background-repeat: no-repeat;
 font-size: 11px;
 font-weight: bold;
 text-align: center;
 white-space: nowrap;
 text-decoration: none;
 }
div.maintitle {
 vertical-align: middle;
 padding: 8px 8px 8px 15px;
 background-image: url("https://i.servimg.com/u/f84/13/64/23/61/rr210.jpg");
 background-repeat: repeat-x;
 }
div.maintitle:hover {
                vertical-align: middle;
 padding: 8px 8px 8px 15px;
                background-image: url("https://i.servimg.com/u/f84/13/64/23/61/test_l10.jpg");
                background-repeat: repeat-x;
}
.row2 {
 background-color: #262626;
        background-image: url('https://i.servimg.com/u/f80/13/60/15/08/fond2_11.jpg');
        background-repeat: repeat-y;
        background-position: top left;
 }
.row2:hover {
background-image: url('https://i.servimg.com/u/f80/13/60/15/08/fond_c11.jpg');
background-repeat: repeat-y;
background-position: top left;
}


.row1 {
 background-image: url('https://i.servimg.com/u/f80/13/60/15/08/fond_c11.jpg');
background-repeat: repeat-y;
background-position: top left;
}
.row1:hover {
background-image: url('https://i.servimg.com/u/f80/13/60/15/08/fond2_11.jpg');
        background-repeat: repeat-y;
        background-position: top left;
 }
.ipbform2 dl dd {
 background-image: url('https://i.servimg.com/u/f80/13/60/15/08/fond_c11.jpg');
        background-repeat: repeat-y;
        background-position: top left;
 }
.ipbform2 dl dd:hover {
 background-image: url('https://i.servimg.com/u/f80/13/60/15/08/fond2_11.jpg');
background-repeat: repeat-y;
background-position: top left;
}








/*MODIFIER AJOUTER PAR Quad Daniel*/








/*mini avatar sur forum Quad Daniel*/

        .mini_ava {
          float: left;
        }
        .mini_ava img {
          width: 40px;
          height: 40px;
          margin: 0 5px;
          border-radius: 10px;
          transition: all 2s;
          -moz-transition: all 2s;
          -webkit-transition: all 2s;
          -o-transition: all 2s;
        }
        .mini_ava img:hover
        {
          width: 80px;
          height: 80px;  
  }
      .sceditor-container iframe, .sceditor-container textarea {
    background-image: url("https://i.servimg.com/u/f39/16/47/45/04/transp10.png") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

#topicmenu-options.popmenubutton
{
margin-top: -07px;
}  


/*barre citer*/

blockquote cite {
background-color: #677E52
background-image: url(https://i.servimg.com/u/f38/16/47/45/04/t_new10.gif);
color: #002F2F;
min-height: 30px;
}

/*barre code*/

dl.codebox dt {
background-color: #6B0D0D;
background-image: url(https://i.servimg.com/u/f68/16/47/45/04/i_icon16.png);
color: #CC9900;
min-height: 25px;
}
    /*Placement du texte code selectionner le contenu*/
    .selectCode
    {
    float:right;
    margin-right:30px;
    cursor:pointer;
    }
div.cont_code { clear: right; }

dl.codebox dd {
background-color: #383636;
}

/*barre Spoiler*/

    dl.spoiler dt
    {
    background-color:#175732;
    /*l image du spoiler*/
    background-image:url(https://i.servimg.com/u/f68/16/47/45/04/21310.png);
    background-repeat:no-repeat;/*pas de répétition de l image*/
    background-position:right;/*on positionne l image a droite*/
    color:#AFAFAF;/*couleur du texte*/
min-height: 25px;
    }

/*barre Code Caché*/
/*Code box hide*/
dl.codebox.hidecode dd{background:#282828;color:white; }
/*barre Fond luminosité gris*/
/*Ombrage code spoiler hide*/
dl.codebox, dl.spoiler{box-shadow: 3px 3px 15px 5px #9E9E9E;}
/*FIN barre*/

/*correction sur les balises hide*/
dl.codebox.hidecode .codebox.contcode dt ,.codebox.hidecode dl.spoiler dt
{
display:block !important;
}
/*correction de l ascenceur*/
.codebox dd{word-wrap: break-word;}
/******espacer gauche et droite dans l affichage d un message******/
  
/*Correction des codesbox*/
dl.codebox , dl.spoiler,blockquote
{
margin:30px 60px !important;
}
    

/*FIN Correction des codesbox*/



  
        /*L apparence normale*/
        #search #keywords
        {
        transition-duration: 1s;
        width: 150px;
        }
        /*L apparence au clic*/
        #search #keywords:focus
        {
        width: 250px;
        }



/*DEBUT EFFET TOGGLE FAQ*/
    /*Les questions de la FAQ Modifier Daniel*/
    dd[onclick^="return"] a
    {
    color:#forum !important;/*on demande une couleur de police*/
    font-weight:normal;/*on demande en caractere normal*/
    font-style:italic;/*on demande en style italic*/
    text-decoration:none !important;/*on supprime le soulignement*/
    }

    /*Les reponses*/
    /*on depose un style pour l effet de transition en relation avec le script*/
    .M14_effet_Faq
    {
    position:fixed;/*on fixe le bloc*/
    left:45%;/*on le positionne a 45 pourcent de la gauche*/
    right:45%;/*on le positionne a 45 pourcent de la droite*/
    width:10%;/*il reste 10 pourcent pour la largeur*/
    top:10%;/*on le place a 10 pourcent du haut*/
    min-height:30px;/*on lui donne une largeur minimale*/
    height:auto;/*on demande une hauteur en automatique*/
    max-height:250px;/*on impose une hauteur maximale*/
    overflow-y:auto; /*on demande en cas dde depassement un scroll*/
    z-index:999;/*Au premier plan*/
    background-color:Black !important;/*couleur de fond*/
    -moz-opacity:0;/*Opacity a 0 navigateurs recents*/
    -khtml-opacity:0;
    -ms-filter:"alpha(opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
    opacity:0;
      /*on ajoute un entourage flou avec une couleur grise*/
      -moz-box-shadow: 0px 0px 30px 20px grey;
    -webkit-box-shadow: 0px 0px 30px 20px grey;
    -o-box-shadow: 0px 0px 30px 20px grey;
    box-shadow: 0px 0px 30px 20px grey;
      /*les bordures arrondies*/
      -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    /*La petite croix de fermeture*/
    .M14_Close_Faq
    {
    color:#ffff00;/*on demande une couleur de police*/
    font-weight:bold;/*on demande en caractere gras*/
    position:absolute;/*on demande une position bien definie*/
    top:10px;/*a 10px du haut*/
    left:98%;/*a 98 pourcent de la gauche*/
    cursor:pointer; /*on demande un style cursor*/
    }
    /*La cellule laissant apparaitre le contenu*/
    .M14_effet_Faq p
    {
    /*on demande un espace en haut 10px a droite 35px puis 5px en bas et a gauche*/
    /*le 35px est impose pour laisser la place au bouton de fermeture*/
    padding: 10px 35px 5px  5px !important;
      /*Apparence du texte et son placement*/
    color:grey;/*on demande une couleur de police*/
    font-weight:bold;/*on demande en caractere gras*/
    font-style:italic;/*on demande en style italic*/
    padding-right: 35px;/*on demande un espace de 35px a doite pour placer le bouton*/
    border:none !important;/*on supprime les bordures*/
    }


    /*Apparence des liens*/
    .M14_effet_Faq p a
    {
    color:orange;/*on demande une couleur de police*/
    font-weight:normal;/*on demande en caractere normal*/
    font-style:italic;/*on demande en style italic*/
    text-decoration:none !important;/*on supprime le soulignement*/
    }
    /*FIN EFFET TOGGLE FAQ*/


/*Effet loupe sur chaque message*/

    /*Le bouton pour l ouverture de la fenetre*/
    .M14_open_Body
    {
    width: 16px;
    height: 16px;
    right: 10px;
    float: right;
    cursor:pointer;
  margin-right: -17em;
    }
    /*Le bouton pour la fermeture de la fenetre*/
    .M14_close_Body
    {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    cursor:pointer;
    }
    /*On place les transitions sur les messages*/
    .post-entry
    {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    /*La fenetre agrandie*/
    #M14_Effet_body.post-entry
    {
    /*On donne une position absolute*/
    position:absolute;
    /*On demande une marge a gauche et a droite pour la correction de la fenetre*/
    left:20%;
    right:20%;
    /*La couleur de fond*/
    background: #2B2E2A;
    /*La couleur de police*/
    color:forum;
    /*La taille de police*/
    font-size:14px;
    /*On donne un espace conséquent si besoin peut etre supprime*/
    padding: 20px 30px 10px 10px;
    /*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
    -ms-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
      /*la couleur de bordure*/
    border:2px solid #339966;
      /*Les bordures arrondies sur la plupart des navigateurs*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
      /*On le place au premier plan*/
      z-index:999;
    }

/*FIN EFFET LOUPE*/

    

/*fond envoyer & Titre du sujet Vert*/

   input {
          color: #000000;
          background: #93ada6!important;
        }

/*FIN fond envoyer & Titre du sujet Vert*/
 

/*bouton 3D Prévisualiser envoyer*/

        input[name="preview"] ,input[name="post"]
        {background-color:#F5F5F5;background-image:url(https://i.servimg.com/u/f37/16/47/45/04/voirfi10.png);
          background-repeat:repeat-x;
          border:1px solid #C3E0F1;
          border-radius:2px;
          box-shadow:1px 1px 1px;
          color:#666!important;
          cursor:pointer;
          font-size:11px;
          font-weight:700;
          height:24px;
          line-height:18px;
          margin:5px 6px;
          padding:0 8px!important;
          text-align:center;
        }
        input[name="preview"]:hover ,input[name="post"]:hover
        {
        background-position:0 100%;
        border:1px solid #00ff00!important;
        box-shadow:1px 1px 5px!important;
        color:#00ff00!important;
        }

/*FIN bouton 3D Prévisualiser envoyer*/


/*image fond barre Toulbar*/

        #fa_toolbar, #fa_toolbar_hidden {background-image: url('https://i.servimg.com/u/f68/16/47/45/04/b21110.jpg');}

/*FIN image fond barre Toulbar*/


/*barre Toulbar Modifier*/

    /*Suppression de la recherche et du texte partager*/
    #fa_search, #fa_share_text{display:none !important;}


    #fa_M14_FA_Espace{width:30px !important;height:30px !important;}

/*Fond Couleur Notification et image poubelle*/
    #fa_right.notification > #fa_notifications{background-color: #578A5B !important;}
    #notif_list li a.delete{background:url(https://i.servimg.com/u/f68/11/26/21/37/poubel10.png)no-repeat !important;}

/*FIN barre Toulbar Modifier*/



/*Image Style barre verte bas sujet*/

      .post-footer
    {
    background-image: url("https://i.servimg.com/u/f58/16/47/45/04/mainme13.png");
    background-position: top center;
    background-repeat: no-repeat;
    border-top : none !important;
    }

/*FIN Image Style barre verte bas sujet*/


/*Image Style barre verte haut sujet*/

    .post .post-header
    {
    background-image: url("https://i.servimg.com/u/f58/16/47/45/04/back_t10.png");
    background-position: top center;
    background-repeat: repeat;
    }

/*FIN Image Style barre verte haut sujet*/



    /*Bouton vote reponse rapide*/

    a#M14_vote_Rap
    {
    position: absolute;
    width: 221px;
    height: 190px;
    margin-left: -50px;
    }

    /*Bouton vote repondre rapide*/

    a#M14_vote_btn
    {
    margin-top: -240px;
    float: right;
    }

/*FIN Bouton vote repondre rapide*/


/*Image et Cadre Vote*/


        #M14_vote_img
        {
        background:url(https://i.servimg.com/u/f58/16/47/45/04/cadre_12.png)no-repeat;
        width:200px;
        height:200px;
        margin-left: 320px;
        color:#578A5B !important;
        padding:80px 0;
        text-align: center;
        font-weight:bold;
    font-size:20px;
        }


    #M14_vote_img:before
    {
    content:"";
    position:absolute;
    background:url(https://i.servimg.com/u/f19/14/29/90/39/t508hv10.gif);
    height: 200px;
    width: 190px;
    margin-left: -320px;
    margin-top: -70px;
    }

/*FIN Image et Cadre Vote*/



/*Image de Fond Forum 100% sur la page*/

body {
    background-size: cover;
}

/*FIN Image de Fond Forum 100% sur la page*/




/*afficher ou masquer tous les champs du profil*/

.M14_Op_user-info , .M14_Close_user-info {cursor:pointer;}

/*FIN afficher ou masquer tous les champs du profil*/




/*Couleur bordure Infobulle en vert*/

.tooltipster-content{border:4px solid green;}
.tooltipster-arrow-top span{border-color :green !important;}

/*FIN Couleur bordure Infobulle en vert*/




/* INFO SUR LE PROFIL GLOBAL */

/* La popUp du profil*/
        #profcont-container {
            background:#b8fcbf !important;
            border:1px solid #CCC !important;
        }
         /*l avatar*/
        #userAVA img{
            position:absolute;
            top:73px;
            right:30px;
            height:50px;
            width:50px;
        }
         /*la barre des onglets*/
        .profile_popup_nav {
            background:#b8fcbf;
            margin:-4px -4px 10px -4px;
            padding:3px;
            padding-top:10px !important;
            height:auto;
            border-bottom:1px solid #CCC;
            -webkit-border-radius:5px 5px 0px 0px;
            -moz-border-radius:5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
        }
         /*Les onglets*/
        .propop_tab {
            color:green;
            text-shadow:1px 1px 0 #F5F5F5;
            cursor:pointer;
            -webkit-border-radius:4px 4px 0px 0px;
              -moz-border-radius:4px 4px 0px 0px;
                    border-radius:4px 4px 0px 0px;
            border:1px solid #CCC;
            border-bottom:none;
            -webkit-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
              -moz-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
                    box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
            background:#DDD;
            margin:0 2px;
            padding:3px;
        }
         /* Les onglets au survol*/
        .propop_tab:hover {
            position:relative;
            top:1px;
            color:#666;
            text-shadow:none;
            background-color:#EEE;
        }
         /*l onglet actif*/
        .propop_tab.activeTab {
            position:relative;
            top:1px;
            color:#666;
            text-shadow:none !important;
            background-color:#EEE !important;
        }
         /*La barre des contacts*/
        #profileLinks {
            background:#b8fcbf;
            display:block;
            padding:3px;
            margin:10px -4px -4px -4px;
            border-top:1px solid #CCC;
            -webkit-border-radius:0px 0px 5px 5px;
            -moz-border-radius:0px 0px 5px 5px;
            border-radius:0px 0px 5px 5px;
        }
#profileLinks a{color:black !important;text-ecoration:none !important;}
#profcont-container .maintitle{background-image:none !important;}
#profcont-container .maintitle,#profcont-container #userprofile{background-color:#b8fcbf;}
#profcont-container .maintitle h1,#profcont-container .maintitle h1 span{color:black !important;}

#profcont-container #profileLinks {color:black !important;}
/* FIN INFO SUR LE PROFIL GLOBAL */





/* Chatbox sur la toolbar */
    
     /*on place le bouton*/
    #fa_chat_button {

 right: 350px !important;
position: absolute !important;
color: #B7F58B !important;
font-size: 16px !important;
line-height: 30px !important;
text-decoration :none !important;
font-weight: bold;
cursor:pointer;
}

   #fa_chat_button:hover {
   color:yellow ! important;
   }

  /*La chatbox active*/
    #fa_chat {
   position:fixed;
   border: none;
   left:0px;
   right:0ox;
    }
    
  /* Fin de la Chatbox sur la toolbar */



  /* En Lien avec SCRIPT BOUTONS STAFF AVERTISSEMENT AUTORISATIONS AJOUTEE A L EDITEUR */

.M14_TagModer a img{max-height: 25px;}


#M14_TagModer
{
margin-top: -36px;
position: absolute;
margin-left: -130px;

}

  /* FIN En Lien avec SCRIPT BOUTONS STAFF AVERTISSEMENT AUTORISATIONS AJOUTEE A L EDITEUR */





Code couleurs Membres:

1 WEBMASTER et Admin #02A30D  
2Modérateur #44C748
3Elite #40826D
4Membre Passionné #00A65B
5Membre #7fff7f
6Nouveau Membre #11f0f0
7Nouveau Sans Post #0066ff
8Limité sur Forum #990888


Dernière édition par Quad Daniel le Lun 26 Juin 2017 - 7:35, édité 4 fois

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 11:17
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Dan,
alors ajoutes ceci dans ta feuille de style=

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:

/*on met la taille de police a zero pour masquer les accolades*/
#M14_legend{font-size:0px;}
/*on donne une apparence identique a tous les groupes */
#M14_legend a.gensmall[href^="/g"]
{
  font-size:12px !important;
  margin-left:5px;
  padding:4px 6px;
  color:white !important;
  text-decoration:none !important;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* on donne une couleur de fond differente aus groupes*/
/*Bouton admin*/
#M14_legend a.gensmall[href^="/g1"]
{background:#02A30D;}
/*Bouton modo*/
#M14_legend a.gensmall[href^="/g3"]
{background:#44C748;}
/*Bouton membre elite*/
#M14_legend a.gensmall[href^="/g11"]
{background:#40826D;}

/*Bouton membre passionne*/
#M14_legend a.gensmall[href^="/g8"]
{background: #00A65B;}
/*Bouton membre*/
#M14_legend a.gensmall[href^="/g5"]
{background:#7fff7f;}

/*Bouton nouveau membre*/
#M14_legend a.gensmall[href^="/g4"]
{background:#11f0f0;}

/*Bouton nouveau sans post*/
#M14_legend a.gensmall[href^="/g6"]
{background:#0066ff;}

/*Bouton limite sur le forum*/
#M14_legend a.gensmall[href^="/g7"]
{background:#990888;}



Penses à valider les modifications en cliquant sur le bouton Valider


Ensuite on va entourer la variable qui gère les groupes.

Dans le template index_body:
Affichage/Templates/Général/index_body


Recherches ceci:

Code:

{GROUP_LEGEND}


supprimes et remplaces par:

Code:

<span  id="M14_legend">{GROUP_LEGEND}</span>

Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis Ajout



Regarde c'est magique clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 11:40
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
super jolie  impeccable 
est t'il possible de le descendre un peut plus bas et laisser juste un petit espace au dessus et en dessous
et aussi de rajouté un infobulle ?

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 12:15
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
J'en ai profité pour le faire directement sur ton fofo Dan.
Pour les infobulles, il va falloir passer par un script.
Il me faudrait toutes les textes que tu désires par groupe et
je te fais çà ce soir mon ami clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 14:21
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
hello , j'ai sauvegardé et après avoir regardé plusieurs heure les codes; j'ai essayé de modifier la hauteur j'ai donc rajouté  top:10px;  devant tous les couleurs de fonds après le code couleur, cela fonctionne, 
ci j'ai fait une bêtise merci de me le faire savoir.
après modification  
Code:
/* SCRIPT Couleurs Fond sur légende info Rang */

/*on met la taille de police a zero pour masquer les accolades*/
#M14_legend{font-size:0px;}
/*on donne une apparence identique a tous les groupes */
#M14_legend a.gensmall[href^="/g"]
{
  top: 5px;
position: relative;
  font-size:12px !important;
  margin-left:5px;
  padding:4px 6px;
  color:white !important;
  text-decoration:none !important;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* on donne une couleur de fond differente aus groupes*/
/*Bouton admin*/
#M14_legend a.gensmall[href^="/g1"]
{background:#02A30D;top:10px;}
/*Bouton modo*/
#M14_legend a.gensmall[href^="/g3"]
{background:#44C748;top:10px;}
/*Bouton membre elite*/
#M14_legend a.gensmall[href^="/g11"]
{background:#40826D;top:10px;}

/*Bouton membre passionne*/
#M14_legend a.gensmall[href^="/g8"]
{background: #00A65B;top:10px;}
/*Bouton membre*/
#M14_legend a.gensmall[href^="/g5"]
{background:#7fff7f;top:10px;}

/*Bouton nouveau membre*/
#M14_legend a.gensmall[href^="/g4"]
{background:#11f0f0;top:10px;}

/*Bouton nouveau sans post*/
#M14_legend a.gensmall[href^="/g6"]
{background:#0066ff;top:10px;}

/*Bouton limite sur le forum*/
#M14_legend a.gensmall[href^="/g7"]
{background:#990888;top:10px;}

/* Fin SCRIPT Couleurs Fond sur légende info Rang */


ci dessous les textes pour infobulles

pour infobulles:

Administrateur Groupe Fondateur & d'administrateurs du forum
ModérateurGroupe Modérateurs  (Staff modérant le forum)
ÉliteGroupe Élite (Participe Souvent au forum & créer de bon sujet)
Quadeur Passionné Groupe Membre passionné  (Participe Souvent au forum)
MembreGroupe Membre (Membre Quad Salvetain)
Nouveau membreGroupe nouveau membre  (Nouveau ou peu de participation)
Nouveau sans PostGroupe Nouveau sans post  (non présenté)
Limité sur forumGroupe limité sur forum  (membre à accès limité)


Dernière édition par Quad Daniel le Dim 25 Juin 2017 - 17:52, édité 1 fois

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 17:50
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Me revoilou ,

Edit,je me suis permis de tout mettre en place sur ton fofo Dan clin oeil ,
mais je te donne tout de même la marche a suivre.



alors il faudrait modifier le:

Code:
margin-top:10px

pour le dernier groupe :

Code:

/*Bouton limite sur le forum*/
#M14_legend a.gensmall[href^="/g7"]
{background:#990888;top:10px;}

par 20px Dan afin qu'il ne chevauche pas celui du dessus.

Ensuite le script avec les infobulles :

Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur l'index

Déposes ceci:
Code:

$(function(){
$('#M14_legend').find('a.gensmall[href^="/g1"]').attr('title','Groupe Fondateur & d\'administrateurs du forum');
$('#M14_legend').find('a.gensmall[href^="/g3"]').attr('title','Groupe Modérateurs  (Staff modérant le forum)');
$('#M14_legend').find('a.gensmall[href^="/g11"]').attr('title','Groupe élite (Participe Souvent au forum & créer de bon sujet) ');
$('#M14_legend').find('a.gensmall[href^="/g8"]').attr('title','Groupe Membre passionné  (Participe Souvent au forum)');
$('#M14_legend').find('a.gensmall[href^="/g5"]').attr('title','Groupe Membre (Membre Quad Salvetain)');
$('#M14_legend').find('a.gensmall[href^="/g4"]').attr('title','Groupe nouveau membre  (Nouveau ou peu de participation)');
$('#M14_legend').find('a.gensmall[href^="/g6"]').attr('title','Groupe Nouveau sans post  (non présenté)');
$('#M14_legend').find('a.gensmall[href^="/g7"]').attr('title','Groupe limité sur forum  (membre à accès limité)');
});



Penses a cliquer sur le bouton Valider



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 18:18
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
Merci Philippe, juste j'ai le dernier bouton qui est plus bas car lui est en top:20px; et tout les autres en top:10px; ?

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 18:22
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ah, je vois pourquoi, tu as un écran de grande résolution,
il faut penser au petites résolutions et pour cela je vais mettre 4 groupes et en dessous les 4 autres.
Es tu ok ?



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 18:29
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
ce n'est pas possible de les mettre tous en long ?

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 18:30
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hum si, mais il faut que tu achétes des grands écrans à tous tes membres mdr



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 18:32
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
tu à de l'humour j'aime  mdr
je trouve que cela est moins beau comme ça...
juste une question pour apprendre et dormir moins bête ce soir, pourquoi il faut conserver le dernier en 20px et les autres en 10px ?

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 18:35
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
On peut faire marche arrière Dan,

dans le script il suffit de supprimer cette ligne:
Code:
$('#M14_legend').find('a.gensmall[href^="/g8"]').after('<br /><br />');


et d'ajouter dans la c.s.s un top:20px ici:
Code:

/*Bouton limite sur le forum*/
#M14_legend a.gensmall[href^="/g7"]
{background:#990888;}

mais je le fais pour toi afin que tu es un fofo agréable à l'oeil , le fait d'avoir un bouton qui se ballade tout seul n'est pas très chouette.

Pour ta question comme ce bouton était tout seul il chevauchait celui des admins, voilà pourquoi il fallait ajouter 10px de plus..
J'ai modifié ta c.s.s pour le top que tu avais déposé dans chaque style de groupe et je l'ai placé ici:
Code:
/*on donne une apparence identique a tous les groupes */
#M14_legend a.gensmall[href^="/g"]
{
 
  top:10px;
position: relative;
  font-size:12px !important;
  margin-left:5px;
  padding:4px 6px;
  color:white !important;
  text-decoration:none !important;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 19:05
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
j'ai toujours les boutons l'un au dessus de l'autre ; tu a pas dit que l'on faisait marche arrière ? comme dessous

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 19:11
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hum, je faisais des tests pour mettre le groupes avec une rotation (inclinés) .
Sinon tout es redevenu à la normal Dan:




-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 19:15
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
hhhaaaaa je te disais comme au début moi, plus esthétique

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 19:16
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
je m'absente je reviens après tardivement ou demain matin, j'ai du monde qui râle a coté clin oeil

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 19:18
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
je pansé on peut peut être redimensionné les boutons si c'est plus facile ?

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 19:21
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Quad Daniel a écrit:hhhaaaaa je te disais comme au début moi, plus esthétique


Ok Dan, je te fais tout çà hinhin



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 20:07
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hé voilou, tu me diras si cela te convient Dan clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 23:18
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
impeccable encore Merci l'ami   impeccable

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Dim 25 Juin 2017 - 23:43
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
 j'ai rien fait, j'ai rien fait, 
c'est mon jour, j'ai pas le bouton Résolu !  

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Lun 26 Juin 2017 - 5:36
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Dan,

Quad Daniel a écrit: j'ai rien fait, j'ai rien fait, 
c'est mon jour, j'ai pas le bouton Résolu !  

tu devrais l'avoir normalement hinhin



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Lun 26 Juin 2017 - 7:32
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
salut l'ami, ayé j'ai le beau et joli bouton qui qui yé ce matin. merci  impeccable

Re: *RESOLU* Imitation bouton sur légende

Icône par defaut le Lun 26 Juin 2017 - 8:53
Jackymi
avatar
Modérateur

MessageJackymi

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum