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

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 le 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
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 le Mar 6 Fév 2018 - 9:05

Petit Up, Merci Smile
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 le Mar 6 Fév 2018 - 9:35

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


Je 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 :
avatar

Chacha
Modéractif
Modéractif

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

http://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 le Mer 7 Fév 2018 - 9:44

Petit up
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 le Jeu 8 Fév 2018 - 13:19

Petit up 
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 R-max le 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 >> http://forum.forumactif.com/t392578-ameliorer-le-systeme-de-vote-des-messages-sous-forme-de-like?highlight=vote
avatar

R-max
Membre habitué(e)

Masculin
Messages : 1620
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max 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 le Dim 11 Fév 2018 - 19:44

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

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 le 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
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 le Lun 12 Fév 2018 - 13:47

Petit up
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 R-max le 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
avatar

R-max
Membre habitué(e)

Masculin
Messages : 1620
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max 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 le Mar 13 Fév 2018 - 15:03

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

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 R-max le 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 ?



bonne soirée
avatar

R-max
Membre habitué(e)

Masculin
Messages : 1620
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max 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 le 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
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
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 le Jeu 15 Fév 2018 - 18:42

Petit Up
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par R-max le 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



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

bonne soirée ...

avatar

R-max
Membre habitué(e)

Masculin
Messages : 1620
Inscrit(e) le : 08/01/2015

http://www.milouze14.com/
R-max 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 le 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
avatar

Offrande
*****

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

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

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


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