https://help.forumotion.com/t108561-a-new-like-dislike-system-phpbb3-and-invision#709635



Can I change that LIKE button to an image?

Pretty much this is what creates the button,

Code:

.LGlike {
  background: #105289;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #888;
  box-shadow: 1px 1px 1px #888;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

you would have to mess with the whole CSS.

Yea, I don't really know much of the CSS. I just copy and paste things in there.

Well, before anything I want to make sure on behalf LG to see if I'm available to mess around with his coding. Since it belongs to him.

Sure, but I think it is fine since he shared it to public.

True, but I've sent him a PM either way, don't want to have any problems.

Code:

.LGlike {
background-image: url(urlhere) no-repeat;
margin-right: 4px;
}

Try it.

Not working.

Here is the code I'm using:

Code:

.LGlike {
background-image: url(http://i855.photobucket.com/albums/ab117/jan2xonline/voteuphover_zps193684b2.png) no-repeat;
margin-right: 4px;
}

Is the forum URL the one inside your profile? Can you also provide a test account? Thanks.

Yea, that's the one.

I would like to put an image to the button and the already clicked button. And if it's possible, a hover image.

Vote:

Vote HOVEr:

Voted button:

Hmm, I don't think it'll work.

Try it though,

Code:


.LGlike {
background-image: url('http://i75.servimg.com/u/f75/15/15/90/66/vote_u11.png');
width: 40px;
height: 40px;
cursor: pointer;
margin-right: 705px;
}

Also, inside your JS.. erase: "vote"

Please remember the codes you had before, I don't want to mess up your site.

Code:


var avacweb_like_system = {
  dom_ready : false,
  vote_singular : 'Vote',
  vote_plural : 'Votes',
  callback : function(vote, new_button) {
      $('.corners-bottom', vote.parentNode.parentNode).before(new_button);
  }
};
$(function() { avacweb_like_system.dom_ready = true; });
$.getScript('http://www.avacweb.net/likesystem');

What should I remove in there?^

Remove, "vote"

Didn't work.

Yeah, I was afraid that it wouldn't work. I will look more into this tomorrow.

(I'm off for today).

Okay, sir. Thanks.

Code:

var avacweb_like_system = {
  dom_ready : false,
  vote_singular : 'Vote',
  vote_plural : 'Votes',
  callback : function(vote, new_button) {
      $('.corners-bottom', vote.parentNode.parentNode).before(new_button);
  }
};
$(function() { avacweb_like_system.dom_ready = true; });
$.getScript('http://www.avacweb.net/likesystem');


Change it to this ^ and then continue to set a background image. Good idea CJ11.

Alternatively you can try changing 'vote' into IMG HTML.

Code:

vote_singular : '<img src="img URL">';

Code:

var avacweb_like_system = {
  dom_ready : false,
  vote_singular : '<img src="img URL">';
  vote_plural : 'Votes',
  callback : function(vote, new_button) {
      $('.corners-bottom', vote.parentNode.parentNode).before(new_button);
  }
};
$(function() { avacweb_like_system.dom_ready = true; });
$.getScript('http://www.avacweb.net/likesystem');

Like that sir?

EDIT*

It works! I just need a little more help.