Modifier la CSS des bouton et de la part de vote dans les message

2 participants

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

Résolu Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Lun 5 Fév 2018 - 23:15

Bonjour tout le monde,
Je souhaiterais changer légèrement le contenus des votes sur les message sur Ce Forum Tout d'abords j'aimerais remplacer les petit bouton "+" et "-' par une minuscule image Smile et deuxièmement j'aimerais que la barre de vote soit d'une autre couleur que le vert et le rouge quand quelqu'un a voter, est ce que c'est possible ?  cat Merci beaucoup de votre aide <3


Dernière édition par Offrande le Dim 18 Fév 2018 - 21:17, édité 1 fois
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Mar 6 Fév 2018 - 9:05

Petit Up, Merci Smile
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Chacha Mar 6 Fév 2018 - 9:35

Message par Offrande Hier à 23:15
Message par Offrande Aujourd'hui à 9:05


Modifier la CSS des bouton et de la part de vote dans les message 9Wrx4p4Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Mer 7 Fév 2018 - 9:44

Petit up
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Jeu 8 Fév 2018 - 13:19

Petit up 
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Invité Ven 9 Fév 2018 - 23:10

bonsoir

sujet déjà évoqué sur le forum , une petite recherche , et vous devriez trouvé votre bonheur

exemple >> celui ci est trés bien >> https://forum.forumactif.com/t392578-ameliorer-le-systeme-de-vote-des-messages-sous-forme-de-like?highlight=vote
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Dim 11 Fév 2018 - 19:44

Merci beaucoup @R-max je vais aller voir cela de suite <3
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Dim 11 Fév 2018 - 19:45

Ce petit code est bien mais serais-ce possible de le mettre à la vertical à la place des bouton actuelle ? Smile
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Lun 12 Fév 2018 - 13:47

Petit up
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Invité Lun 12 Fév 2018 - 21:36

bonsoir , je ne sait pas , je vais regardé si c'es possible.. ( a vrais dire y'a un moment que je n'est pas codé ) Sad
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Mar 13 Fév 2018 - 15:03

Bonjour et merci de tout coeur @R-max 
Passe une très agréable journée <3
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Invité Mar 13 Fév 2018 - 21:54

bonsoir , avant de vouloir modifier cette astuce , il serais bien de savoir si ton forum rempli ces conditions ?

Modifier la CSS des bouton et de la part de vote dans les message 2018-010

bonne soirée
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Mar 13 Fév 2018 - 22:26

Re @R-max
J'ai modifier le template d'un sujet pour afficher en bas des sujets remercier un petit message
mais sinon rien d'autre Smile et j'ai bien activer le système de réputation <3
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Jeu 15 Fév 2018 - 18:42

Petit Up
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Invité Ven 16 Fév 2018 - 22:25

bonsoir offrande désolé pour le retard

le css

Code:
.fa_vote, .fa_voted, .fa_count {
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, Sans-serif;
  /*display:inline-block !important;*/
  width:auto !important;
  float:none !important;
  transition:300ms;
}
 
.fa_voted, .fa_vote:hover { opacity:0.4 }
.fa_voted { cursor:default }
 
.fa_count {
  font-weight:bold;
  margin:0 3px;
  cursor:default;
}
 
.fa_positive { color:#4A0 }
.fa_negative { color:#A44 }
 
.fa_votebar, .fa_votebar_inner {
  background:#C44;
  height:3px;
}
 
.fa_votebar_inner {
  background:#4A0;
  transition:300ms;
}
 
.fa_reputation a {
  float: none;
}

le java script

Code:
$(function() {
  // General Configuration of the plugin
  var config = {
    position_left : true, // true for left || false for right
    mobile_position_left: false, // true for left || false for right
    negative_vote : true, // true for negative votes || false for positive only
    vote_bar : true, // display a small bar under the vote buttons
 
    // button config
    icon_plus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',
    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
 
    // language config
    title_plus : 'J\'aime',
    title_minus : 'Je n\'aime pas',
    error_limit : 'Vous ne pouvez plus voter aujourd\'hui',
 
    title_like_singular : '%{VOTES} personne aime le message de %{USERNAME}',
    title_like_plural : '%{VOTES} personnes aiment le message de %{USERNAME}',
 
    title_dislike_singular : '%{VOTES} personne n\'aime pas le message de %{USERNAME}',
    title_dislike_plural : '%{VOTES} personnes n\'aiment pas le message de %{USERNAME}',
 
    title_vote_bar : '%{VOTES} personne(s) aime(nt) le message de %{USERNAME} %{PERCENT}'
  },
   
  // function bound to the onclick handler of the vote buttons
  submit_vote = function() {
    var next = this.nextSibling, // the counter next to the vote button that was clicked
        box = this.parentNode,
        bar = box.getElementsByTagName('DIV'),
        vote = box.getElementsByTagName('A'),
        mode = /eval=plus/.test(this.href) ? 1 : 0,
        i = 0, j = vote.length, pos, neg, percent;

    // submit the vote asynchronously
    $.get(this.href, function(res) {
      if( res.search("Vous ne pouvez plus") == -1 ) {
        next.innerHTML = +next.innerHTML + 1; // add to the vote count
        next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });

        pos = +vote[0].nextSibling.innerHTML;
        neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
        percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';

        if (bar[0]) {
          bar[0].style.display = '';
          bar[0].firstChild.style.width = percent;
          box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
        }
      } else {
        alert( config.error_limit );
      }
    });

    // revoke voting capabilities on the post once the vote is cast
    for (; i < j; i++) {
      vote[i].href = '#';
      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
      vote[i].onclick = function() { return false };
    }

    return false;
  },
   
  vote = $('.vote'), i = 0, j = vote.length,
  version = $('.bodylinewidth')[0] ? 0 :
    document.getElementById('phpbb') ? 1 :
    $('.pun')[0] ? 2 :
    document.getElementById('ipbwrapper') ? 3 :
    document.getElementById('modernbb') ? 4 :
    document.getElementById('mpage-body-modern') ? 5 :
    'badapple', // version check

  // version data so we don't have to redefine these arrays during the loop
  vdata = {
    tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI', 'LI'][version],
    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name', '.poster_name'][version],
    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons', '.post-buttons'][version]
  },

  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop

  // prevent execution if the version cannot be determined
  if (version == 'badapple') {
    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
    return;
  }
 
  for (; i < j; i++) {
    post = $(vote[i]).closest('[class*="post--"]')[0];
    bar = $('.vote-bar', vote[i])[0]; // vote bar
    button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
    ul = $(vdata.actions, post)[0]; // post actions
    li = document.createElement(vdata.tag); // vote system container
    li.className = 'fa_reputation';

    if (li.tagName == 'SPAN') li.style.display = 'inline-block';

    // calculate votes
    if (bar) {
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');

      n_pos = Math.round(total * (percent / 100));
      n_neg = total - n_pos;
    } else {
      n_pos = 0;
      n_neg = 0;
    }

    // set up negative and positive titles with the correct grammar, votes, and usernames
    title_pos = (n_pos <= 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
    title_neg = (n_neg <= 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);

    // define the vote counts
    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points

    // create positive vote button
    plus = document.createElement('A');
    plus.href = button[0] ? button[0].href : '#';
    plus.onclick = button[0] ? submit_vote : function() { return false };
    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
    plus.innerHTML = config.icon_plus;
    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);

    span[0] && li.insertBefore(plus, span[0]);

    // create negative vote button
    if (config.negative_vote) {
      minus = document.createElement('A');
      minus.href = button[1] ? button[1].href : '#';
      minus.onclick = button[1] ? submit_vote : function() { return false };
      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
      minus.innerHTML = config.icon_minus;
      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);

      span[1] && li.insertBefore(minus, span[1]);
    }

    // create vote bar
    if (config.vote_bar) {
      vote_bar = document.createElement('DIV');
      vote_bar.className = 'fa_votebar';
      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
      vote_bar.style.display = bar ? '' : 'none';
      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
      li.appendChild(vote_bar);
    }
 
    // finally insert the vote system and remove the default one
    if(version != 4)
      config.position_right ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
    else
      config.mobile_position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
 
    vote[i].parentNode.removeChild(vote[i]);
  }
});

voici comment il se place en phpbb3

Modifier la CSS des bouton et de la part de vote dans les message 2018-011

test sur ton forum , et si il faut ont peut encore joué sur le placement

bonne soirée ...

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la CSS des bouton et de la part de vote dans les message

Message par Offrande Dim 18 Fév 2018 - 21:17

Merci de tout coeur @R-max
Je l'ai placer sur mon forum et cela fonctionne parfaitement bien Smile 
je met donc le sujet en résolus et je te souhaite une très agréable soirée <3
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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