*RESOLU* Couleur Rang dans infobulle

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

*RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 12:14
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
Lien forum: ICI

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

1 WEBMASTER et AdminGroupe d'administrateurs du forumColor 
Code:
#02A30D

 
2ModérateurModérateurColor 
Code:
 #44C748

3EliteMembre éliteColor 
Code:
 #40826D

4Membre PassionnéMembre PassionnéColor 
Code:
 #00A65B

5MembreMembreColor 
Code:
 #7fff7f

6Nouveau MembreNouveau MembreColor 
Code:
 #11f0f0

7Nouveau Sans PostNouveau membre qui n'a pas encore PostéColor 
Code:
 #0066ff

8Limité sur ForumLimité sur ForumColor 
Code:
 #990888

Bonjour;
Est-il possible  d'avoir dans mon infobulle Profil, sur le Rang un fond Gris et une couleur identique au Rang, et un petit espace entre les écriture ?
Cordialement
explication en Image 
images de ma demande:
deux possibilité de fond :
(1)

ou
(2) 

Exemple:
j'ai ceci 

Je souhaiterai avoir 
 ou 
et sur un autre rang:
Je souhaiterai avoir 
 ou 


Dernière édition par Quad Daniel le Lun 10 Juil 2017 - 16:40, édité 1 fois

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 19:11
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Dan,
la couleur de rang ne pourra pas être ajoutée car c'est bien un endroit
qui est géré différemment.

Par contre quelle couleur de fond dois je mettre ainsi que les bordures gauche et droite clin oeil

Pour cette image:


Et si tu veux tu peux avoir des bordures arrondies comme ceci Dan:




Ou avec une transition:




Et au survol du rang les bordures apparaitront progressivement:



Dans tous les cas Dan , il me faudra ton template: mentions_tooltip entre les balises code stp clin oeil
Affichage/Templates/Général/mentions_tooltip




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

Fondateur des forums





Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 20:03
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
Bonsoir Philippe,
Mon: mentions_tooltip 
Code:
<style>
.tooltip-content {
    width: 100%;
    float: left;
}

.tooltip-content img {
    float: left;
    max-width: 30%;
    margin: 0 10px 0 0;
}

span.tooltip-title {
    width: 60%;
    float: left;
    margin: 5px 0 10px 0;
    font-weight: bold;
    font-size: 1.5em;
}

span.tooltip-subtitle {
    width: 60%;
    float: left;
}

ul.tooltip-counts {
    width: 60%;
    float: left;
        margin: 0;
    padding: 0;
}

.tooltip-counts li {
    list-style: none;
}

.tooltip-actions {
    width: 100%;
    float: left;
    margin: 8px -10px -8px -10px;
    padding: 5px 10px 5px 10px;
    background: #EEE;
}
.tooltip-actions ul {
    margin: 0;
    padding: 0;
}
.tooltip-actions li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0 2px 0 0;
}
</style>
<div class="main-tooltip">
    <div class="tooltip-content">
        <img src="{USER_AVATAR}" alt="{USER_NAME}" />
        <span class="tooltip-title">{USER_NAME_COLORED}</span>
        <!-- BEGIN switch_rank_info -->
        <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
        <!-- END switch_rank_info -->
        <ul class="tooltip-counts">
          
  <li>{L_POSTS}: <b>{POSTS}</b></li>
            <li>{L_FRIENDS}: <b>{FRIENDS}</b></li>
          
        </ul>
    </div>
    <div class="tooltip-actions">
        <ul>
            <!-- BEGIN switch_button_tooltip_PROFILE -->
            <li>
                <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
                    <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_PROFILE -->
            <!-- BEGIN switch_button_tooltip_PM -->
            <li>
                <a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
                    <img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_PM -->
            <!-- BEGIN switch_button_tooltip_FRIEND -->
            <li>
                <a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
                    <img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_FRIEND -->
            <!-- BEGIN switch_button_tooltip_MESSAGES -->
            <li>
                <a href="{switch_button_tooltip_MESSAGES.URL}" rel="nofollow" title="{switch_button_tooltip_MESSAGES.LANG}">
                    <img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_MESSAGES -->
            <!-- BEGIN switch_button_tooltip_FACEBOOK -->
            <li>
                <a href="{switch_button_tooltip_FACEBOOK.URL}" target="_blank" title="{switch_button_tooltip_FACEBOOK.LANG}">
                    <img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_FACEBOOK -->
            <!-- BEGIN switch_button_tooltip_TWITTER -->
            <li>
                <a href="{switch_button_tooltip_TWITTER.URL}" target="_blank" title="{switch_button_tooltip_TWITTER.LANG}">
                    <img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_TWITTER -->
        </ul>
    </div>
</div>

Mon: JS Infobulle 
Code:
$(function() {
  var links = $('a[href^="/u"]').filter(function() {
            if (this.firstChild && this.firstChild.tagName) {
              if (this.firstChild.tagName != 'IMG') {
                return this;
              }
            } else {
              return this;
            }
          }),
            
          usersinfo = {};
        
links.tooltipster && links.not('.mentiontag,.tooltipstered').filter(function() {
            if (!$(this).closest('#tabs')[0]) {
              return this;
            }
          }).tooltipster({
            animation : 'fade',
            interactive : true,
            contentAsHTML : true,
            minWidth : 300,
            maxWidth : 300,
            delay : 500,
            arrowColor : "#EEE",
            autoClose : true,
            content : 'Patientez...',
            functionBefore: function(origin, continueTooltip) {
              continueTooltip();
        
              var userid = $(this).attr('href').replace(/.*?\/u(\d+).*/, '$1');
              if (origin.data('ajax') !== 'cached') {
                if (usersinfo[userid] != undefined) {
                  origin.tooltipster('content', usersinfo[userid]).data('ajax', 'cached');
                } else {
                  $.ajax({
                    type: 'GET',
                    url: "/ajax/index.php",
                    dataType: "html",
                  
                    data: {
                      f: "m",
                      user_id: userid
                    },
        
                    success: function(html) {
                      usersinfo[userid] = html;
                      origin.tooltipster('content', html).data('ajax', 'cached');
                    }
                  });
                }
              }
            }
          });
        });

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 20:03
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
c'est quoi exactement transition ?

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 20:04
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Transition est une animation progressive Dan



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

Fondateur des forums





Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 20:06
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Tu peux remplacer tout le contenu par celui-ci:
Code:
<style>

/*couleur de fond*/
.M14_tooltipRank
{
background:#CACBCB;
text-align:center;
  color:inherit;
height:40px;
line-height:40px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
  }


.M14_tooltipRight,.M14_tooltipLeft
{
margin-top:5px;
width:10px; 
height:30px;
line-height:20px;
background:#CACBCB ;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}
.M14_tooltipLeft
{
  float:left;

  -webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
  }
.M14_tooltipRight
{
float:right;

-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;

 
  /*l effet au survol*/
.M14_tooltipRank:hover .M14_tooltipLeft{background: #44C748;  margin-left:-5px;}
.M14_tooltipRank:hover .M14_tooltipRight{background: #44C748;margin-right:-5px;}
.tooltip-content {
    width: 100%;
    float: left;
}

.tooltip-content img {
    float: left;
    max-width: 30%;
    margin: 0 10px 0 0;
}

span.tooltip-title {
    width: 60%;
    float: left;
    margin: 5px 0 10px 0;
    font-weight: bold;
    font-size: 1.5em;
}

span.tooltip-subtitle {
    width: 60%;
    float: left;
  height:40px;
  line-height:40px;
}

ul.tooltip-counts {
    width: 60%;
    float: left;
        margin: 0;
    padding: 0;
}

.tooltip-counts li {
    list-style: none;
}

.tooltip-actions {
    width: 100%;
    float: left;
    margin: 8px -10px -8px -10px;
    padding: 5px 10px 5px 10px;
    background: #EEE;
}
.tooltip-actions ul {
    margin: 0;
    padding: 0;
}
.tooltip-actions li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0 2px 0 0;
}
</style>
<div class="main-tooltip">
    <div class="tooltip-content">
        <img src="{USER_AVATAR}" alt="{USER_NAME}" />
        <span class="tooltip-title">{USER_NAME_COLORED}</span>
        <!-- BEGIN switch_rank_info -->
      <span class="tooltip-subtitle"><div class="M14_tooltipRank">
        <div class="M14_tooltipLeft"></div>{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}
        <div class="M14_tooltipRight"></div></div></span>
        <!-- END switch_rank_info -->
        <ul class="tooltip-counts">
            <li>{L_POSTS}: <b>{POSTS}</b></li>
            <li>{L_FRIENDS}: <b>{FRIENDS}</b></li>
        </ul>
    </div>
    <div class="tooltip-actions">
        <ul>
            <!-- BEGIN switch_button_tooltip_PROFILE -->
            <li>
                <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
                    <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_PROFILE -->
            <!-- BEGIN switch_button_tooltip_PM -->
            <li>
                <a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
                    <img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_PM -->
            <!-- BEGIN switch_button_tooltip_FRIEND -->
            <li>
                <a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
                    <img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_FRIEND -->
            <!-- BEGIN switch_button_tooltip_MESSAGES -->
            <li>
                <a href="{switch_button_tooltip_MESSAGES.URL}" rel="nofollow" title="{switch_button_tooltip_MESSAGES.LANG}">
                    <img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_MESSAGES -->
            <!-- BEGIN switch_button_tooltip_FACEBOOK -->
            <li>
                <a href="{switch_button_tooltip_FACEBOOK.URL}" target="_blank" title="{switch_button_tooltip_FACEBOOK.LANG}">
                    <img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_FACEBOOK -->
            <!-- BEGIN switch_button_tooltip_TWITTER -->
            <li>
                <a href="{switch_button_tooltip_TWITTER.URL}" target="_blank" title="{switch_button_tooltip_TWITTER.LANG}">
                    <img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" />
                </a>
            </li>
            <!-- END switch_button_tooltip_TWITTER -->
        </ul>
    </div>
</div>


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



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

Fondateur des forums





Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Dim 9 Juil 2017 - 20:10
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
et'il possible de réduire l’épaisseur du gris ? de "haut en bas"
et le faire a peine plus clair ?
Philippe a écrit:Et au survol du rang les bordures apparaitront progressivement:
je veux bien essayer de voir celui-là !
pour la couleur, je souhaiterais proche du vert de contour de l'infobulle, ne me rappelle pas le code.
proche de:
Code:
#196d1f
si possible mettre à peine un peu d' espace entre Rang et message.

a "membre Passionné" et membre sans post j'ai un décalage

a nouveau membre c'est juste limite

pour les autres c'est bon, 
donc, je pense que le mot et juste un peu long.

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 5:41
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Dan,

voilà je viens de régler directement sur ton fofo la hauteur qui est passé de 40px a 30px.

Ensuite:
si possible mettre à peine un peu d' espace entre Rang et message.
Non car comme tu as des titres de rang assez longs ca ne fera qu’accentué le bug récurent que tu avais déjà ( qui a été réglè en diminuant la taille de police).

clin oeil



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

Fondateur des forums





Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 15:24
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
j'ai vu le résultat, 
merci Philippe bon travail comme d’habitudes  impeccable


Dernière édition par Quad Daniel le Lun 10 Juil 2017 - 16:13, édité 2 fois

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 16:12
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Est ce bon Dan ?



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

Fondateur des forums





Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 16:14
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
oups avais pas bien compris, je panser que les cotés vert apparaissait seul  pasvuT moqueur
oui c'est bon Philippe, bon travail merci  clin oeil

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 16:23
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ah ben vi faut passer le tit curseur mdr .



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

Fondateur des forums





Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 16:39
Quad Daniel
avatar
Membre

MessageQuad Daniel

  • 16px
  • 24px
  • Zoom
merci chef 

Re: *RESOLU* Couleur Rang dans infobulle

Sujet résolu le Lun 10 Juil 2017 - 16:41
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
De rein Dan clin oeil ,
-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



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

Fondateur des forums





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