Bouton Like en haut du message
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Bouton Like en haut du message
Détails techniques
Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
forum de test : http://14022010.fullsubject.com/
Description du problème
.bonjour a tous,
J'ai utilise ce code qui fonctionne parfaitement sous invision (CSS + javascript) et qui vient du confrère forumactif portugais,
mais j'aurai besoin d'aide pour deux points précis :
1.
j'aimerai que tout soit en haut de chaque message (image, bouton, résultat...)
a margin-top: 17px du haut de chaque message. a quels endroits dois-je mettre cette donnée dans le code ?
2.
J'aimerai que contrairement a ce code, le résultat ne soit pas sous forme de lien (donc quand on survole, il n'y ait pas la main
comme sur une zone cliquable, que cela soit simplement une zone texte et image toute simple...). comment puis-je modifier le3 code ?
CSS
- Spoiler:
- Code:
/* systeme de comptage des mercis par message et positions des nouveaux boutons mercis */
#rep_post .reput_vote {
background-color: #EFF1F3;
color: #666;
-khtml-user-select: none;
-moz-transition: all,0.15s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,0.15s;
-webkit-touch-callout: none;
-webkit-transition: all,0.15s;
-webkit-user-select: none;
background: #EFF1F3 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
background-size: 12px;
clear: both;
color: #666;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 400;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 25px;
text-align: right;
transition: all,0.15s;
}
.reput_vote.zero {
background-color: #6a6a6a;
}
.BS_like:hover {
background-color: #222129;
border-radius: 5px;
color: #999;
}
.BS_like {
-khtml-user-select: none;
-moz-transition: all,0.15s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,0.15s;
-webkit-touch-callout: none;
-webkit-transition: all,0.15s;
-webkit-user-select: none;
background: #222129 url(http://i84.servimg.com/u/f84/14/18/18/04/bouton15.png) no-repeat 6px center;
background-size: 12px;
border-radius: 5px;
clear: both;
color: #999;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 400;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 25px;
text-align: right;
transition: all,0.15s;
user-select: none;
}
.BS_like:before {
content: "Remercier";
}
#rep_post .bs_inline {
list-style: none;
}
.BS_like:hover {
background-color: #222129;
border-radius: 5px;
color: #999;
}
#rep_post {white-space: nowrap;margin: 1px 1px;float: right;}
#rep_post .bs_inline {list-style: none;}
#rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
#rep_post .bs_inline > li:first-child {margin-left: 0;}
#rep_post .bs_inline img {display: none;}
#rep_post span img {cursor: pointer;}
.reput_vote.positive {background-color: #8db13e;}
.reput_vote.zero {background-color: #6a6a6a;}
#rep_post .reput_vote:before {
content: "Mercis: ";
}
JAVASCRIPT
- Spoiler:
- Code:
function bestskins_ls() {
for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
var count = 0,
qtd = 0,
barra = $('.vote-bar', vote)[0],
botao = $('.vote-button', vote)[0];
if (barra) {
var numbarra = barra.title.match(/\d+/g);
qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
}
//Imagem de reputaçăo
var reputation_UP = 'http://2img.net/i/fa/empty.gif';
botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
var htmlFinal =
'<div class="rep_bar clearfix" id="rep_post">' +
' <ul class="bs_inline">' + botao + numrep + '</ul>' +
'</div>';
$('.postbody', vote.parentNode.parentNode.parentNode).append( htmlFinal );
}
x.remove();
};
function bestskinsVoto(b,a) {
a.onclick = '#';
$.get(b, function() {
a.parentNode.style.display = 'none';
var verify = a.parentNode.nextSibling.firstChild.innerHTML;
if(verify == 0) {
a.parentNode.nextSibling.firstChild.classList.remove('zero'),
a.parentNode.nextSibling.firstChild.classList.add('positive');
}
var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
c.innerHTML = c.innerHTML.replace(/\d+/,b);
});
};
if (document.readyState === 'complete') {
bestskins_ls();
} else {
document.addEventListener('DOMContentLoaded', function() {
bestskins_ls();
});
}
IMAGE DU RESULTAT
- Spoiler:
Merci encore pour vos aides precieuses...
.
Dernière édition par LDL le Jeu 17 Mar 2016 - 2:19, édité 1 fois
LDL- ****
-
Messages : 235
Inscrit(e) le : 31/07/2009
Re: Bouton Like en haut du message
Un up, de l'aide, non ?
encore merci pour le coup de pouce....
LDL- ****
-
Messages : 235
Inscrit(e) le : 31/07/2009
Re: Bouton Like en haut du message
Hellow
On va essayer ceci :
1) On met le parent en position relative pour l'avoir comme référence :
2) On place le bloc "like" en position absolute, à droite et à 17px du haut :
Par contre, attention : un id (= représenté par un #) ne doit être présent qu'une seule fois sur ta page. Autrement dit, il vaut mieux supprimer l'id du bloc "rep_bar"
ici :
j'aimerai que tout soit en haut de chaque message (image, bouton, résultat...)
a margin-top: 17px du haut de chaque message. a quels endroits dois-je mettre cette donnée dans le code ?
On va essayer ceci :
1) On met le parent en position relative pour l'avoir comme référence :
- Code:
.postbody{
position: relative;
}
2) On place le bloc "like" en position absolute, à droite et à 17px du haut :
- Code:
.postbody #rep_bar {
white-space: nowrap;
margin: 1px 1px;
position: absolute;
top: 17px;
right: 0;
}
Par contre, attention : un id (= représenté par un #) ne doit être présent qu'une seule fois sur ta page. Autrement dit, il vaut mieux supprimer l'id du bloc "rep_bar"
J'aimerai que contrairement a ce code, le résultat ne soit pas sous forme de lien (donc quand on survole, il n'y ait pas la main
comme sur une zone cliquable, que cela soit simplement une zone texte et image toute simple...). comment puis-je modifier le3 code ?
ici :
- Code:
.BS_like {
-khtml-user-select: none;
-moz-transition: all,0.15s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,0.15s;
-webkit-touch-callout: none;
-webkit-transition: all,0.15s;
-webkit-user-select: none;
background: #222129 url(http://i84.servimg.com/u/f84/14/18/18/04/bouton15.png) no-repeat 6px center;
background-size: 12px;
border-radius: 5px;
clear: both;
color: #999;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 400;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 25px;
text-align: right;
transition: all,0.15s;
user-select: none;
}
- Code:
cursor: pointer;
Re: Bouton Like en haut du message
Miettes a écrit:Hellow
1) On met le parent en position relative pour l'avoir comme référence :
......
Par contre, attention : un id (= représenté par un #) ne doit être présent qu'une seule fois sur ta page. Autrement dit, il vaut mieux supprimer l'id du bloc "rep_bar"
merci pour ton aide.
dans ma feuille CSS je n'ai pas de rep_bar excepte dans le code que tu me donnes,
il doit donc se trouver je suppose dans le template, non ? sur la feuille posting_body genre ? ou ca exactement ?
sinon si je supprime simplement le # de ton script que je rajoute dans la feuille CSS, ca fonctionne pas malheureusement.
Miettes a écrit:Hellow
on va supprimer la ligne :
cursor: pointer;
super, ca fonctionne, par contre si je supprime la ligne uniquement pour le paragraphe "BS_like" comme tu l'indiques ca fonctionne pas,
par contre si je supprime aussi celui du paragraphe précédent "rep_post .reput_vote", les deux et sur le bouton pour voter et celui des résultats disparaissent.
je l'ai donc laissé enlevé pour "rep_post .reput_vote", et je l'ai par contre rajouté dans le paragraphe suivant "BS_like:before",
et la nickel. on a bien la zone cliquable sur le bouton "Remercier" pour voter, et une fois voté, on a plus du tout de zone cliquable sur l'affichage du résultat "Mercis". Un problème en moins hehe....
.
LDL- ****
-
Messages : 235
Inscrit(e) le : 31/07/2009
Re: Bouton Like en haut du message
Coucou
En supprimant l'id, ce qui donne :
Et du coup, dans la CSS, il faut remplacer tous les :
Non il est probablement dans la CSS de base du forum. Dans ce cas, ajoute uniquement dans ta CSS :il doit donc se trouver je suppose dans le template, non ?
- Code:
.postbody .rep_bar {
position: absolute;
top: 17px;
right: 0;
}
Il faut aussi faire la modif dans le js, ici :sinon si je supprime simplement le # de ton script que je rajoute dans la feuille CSS, ca fonctionne pas malheureusement.
- Code:
var htmlFinal =
'<div class="rep_bar clearfix" id="rep_post">' +
' <ul class="bs_inline">' + botao + numrep + '</ul>' +
'</div>';
En supprimant l'id, ce qui donne :
- Code:
var htmlFinal =
'<div class="rep_bar clearfix">' +
' <ul class="bs_inline">' + botao + numrep + '</ul>' +
'</div>';
Et du coup, dans la CSS, il faut remplacer tous les :
- Code:
#rep_post
- Code:
.rep_bar
Re: Bouton Like en haut du message
merci pour vos aides, je reviens sur ce thread pour tester les dernieres suggestions, le temps de virer mes virus sur mon pc,
a plus tard et merci...
a plus tard et merci...
LDL- ****
-
Messages : 235
Inscrit(e) le : 31/07/2009
Re: Bouton Like en haut du message
bon ça y est, j'ai épuré les virus des mes supports, donc je reviens sur le thread...
(édition de ce message dans une petite heure...)
(édition de ce message dans une petite heure...)
Dernière édition par LDL le Mer 16 Mar 2016 - 19:42, édité 2 fois
LDL- ****
-
Messages : 235
Inscrit(e) le : 31/07/2009
Re: Bouton Like en haut du message
Eh bien ce fut bien long ^^
On attend ton retour du coup
On attend ton retour du coup
Re: Bouton Like en haut du message
Il faut aussi faire la modif dans le js
..............................
super, ça fonctionne !
(j'ai du faire quelques petites modifs sur la hauteur des blocs et la couleur des fonds, rien de mechant).
Bravo et encore merci Miettes pour avoir trouvé la soluce a mon problème ainsi que l'aide de tous les autres intervenants, merci a tous.
Je passe en mode RÉSOLU pour le lock service.
.
LDL- ****
-
Messages : 235
Inscrit(e) le : 31/07/2009
Sujets similaires
» L'éditeur revient en haut du message en cliquant sur un bouton
» Bouton haut/bas
» Bouton haut et bas (#top)
» bouton haut/bas
» Bouton haut bas
» Bouton haut/bas
» Bouton haut et bas (#top)
» bouton haut/bas
» Bouton haut bas
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum