The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Reputation + button move

View previous topic View next topic Go down

Solved Reputation + button move

Post by troyeccles on September 5th 2014, 3:35 pm

Hello!

I've redesigned the + button and removed the - button on the Like/Dislike/Reputation thingy.

I used some CSS code I found in here...with thanks!

However, as you can see, the alignment looks a bit weird (half off the page) and it seems to be replicating:





The CSS code for it is below. I can't say I understand why it seems to be replicating part of the png image.

Any ideas?

Troy.



Code:
.vote .vote-button, .vote-no-bar {
display:none;
}
.vote .vote-button:first-child {
display:block;
}
.vote .vote-button a {
background-image: url('http://i22.servimg.com/u/f22/09/02/12/09/001_1810.png') !important;
padding-right: 25px;
padding-top: 22px;
font-size: 9px !important;
}


Also, if there is a fix for this, how would I go about getting rid of the bar that gets activated when some clicks LIKE and replace it with a +1, +2, etc?

I've seen it mentioned elsewhere but only for PHPBB not PHPBB3 which I have.

Thanks again! Smile


Last edited by troyeccles on September 5th 2014, 3:42 pm; edited 1 time in total

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by Ange Tuteur on September 5th 2014, 3:40 pm

Hello troyeccles,

Try this :
Code:
.vote .vote-button, .vote-no-bar {
 display:none;
}
.vote .vote-button:first-child {
  display:block;
}
.vote .vote-button a {
background-image: url('http://i22.servimg.com/u/f22/09/02/12/09/001_1810.png') !important;
background-repeat:no-repeat;
padding-right: 20px;
padding-top: 20px;
font-size: 9px !important;
}

The background is set to repeat, I modified it so it doesn't repeat. I adjusted the padding some too. The padding is what shows the image, if it's clipped adjust the pixels until it's just right.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 5th 2014, 3:43 pm

Hi (again!) Ange.

I'll try it now.

I've just this second edited my original post with an additional question. I don't suppose you know the answer to THAT part do you?

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 5th 2014, 3:46 pm

Ange, that's FAB!

What do I need to change to move that icon in a few pixels?



And is it my eyes or is the little "+" still there at the bottom (I've just noticed it then).

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by Ange Tuteur on September 5th 2014, 3:59 pm

See how this looks :
Code:
.vote .vote-button, .vote-no-bar {
  display:none;
}
.vote .vote-button:first-child {
    display:block;
}
.vote .vote-button a {
background-image: url('http://i22.servimg.com/u/f22/09/02/12/09/001_1810.png') !important;
background-repeat:no-repeat;
padding-right: 20px;
padding-top: 20px;
margin-right:6px;
font-size:0 !important;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 5th 2014, 4:04 pm



What was it that you changed? Is it "margin right 6px"?
If so, I can mess with that until it's right to save you the bother.


EDIT: nope. I changed it firstly to 10 and then 20. It didn't move Smile

EDIT 2: the little + has gone though!

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by APE on September 5th 2014, 4:15 pm

change the floowing codes and try and remove the margin-right Wink

Code:
padding-right: 20px;
padding-top: 20px;
margin-right:6px;




APE
Manager
Manager

Male Posts : 8615
Reputation : 748
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 5th 2014, 4:28 pm

Hi Ange,

The padding-top has been changed to align things how I like. Wonderful. Smile
The padding-righ though makes no difference at all no matter how I set it. ?????

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by Ange Tuteur on September 5th 2014, 5:11 pm

Here, add this to your CSS :
Code:
.vote { width:auto }

The vote element is set to 10px in width which is causing your vote button to go outside of the post.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 5th 2014, 5:49 pm

BRILL-E-ANT! Sorted. Smile Smile

Now, do you know how I can get the vote count happening like this forum does rather than that awful green bar? (+2, +3, etc)? And I'm using PHPBB3 (the BB2 indicated in my details is for an old forum).

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by Ange Tuteur on September 5th 2014, 6:01 pm

That would require a different approach. Go to :
Administration Panel > Modules > JavaScript codes management > create a new script

Title : Your choice
Placement : In the topics
Paste the code below and submit :
Code:
$(document).ready(function() {
  $('.vote').each(function() {
  if ($(this).find('.vote-bar').length) { var VCount = $(this).find('.vote-bar').attr('title').replace(/.*\((\d+).*\)/,'$1') }
  if (VCount == '1') { var vote = ' vote' }
  else { var vote = ' votes' }
  var VPlus = $(this).find('.vote-button:first a').addClass('VPlus').attr('title', 'Vote up');
 
  $(this).closest('.postbody').find('.profile-icons').append(VPlus);
  $(this).closest('.postbody:has(.vote-bar)').find('.profile-icons').append('<span class="VCount" title="'+VCount+vote+'">'+VCount+'</span>');
  $(this).remove();
  });
 
  $('.VPlus').click(function(){
  $.get($(this).attr('href'), function() {
  location.reload();
  });
  return false
  });
});

Then to style it go to :
Display > Colors > CSS stylesheet

and paste the following rules into your sheet :
Code:
/*Vote System*/
.VCount:before{
content:"+";
opacity:0.5;
filter:alpha(opacity=50);
}
.VCount{
color:#0A0;
font-size:10px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.3);
font-family: Verdana,Arial,Helvetica,sans-serif;
cursor:default;
}
.VPlus{
color:#0A0 !important;
font-size:10px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.1);
font-family: Verdana,Arial,Helvetica,sans-serif;
position:relative;
left:9px;
z-index:1;
}
.VPlus:hover{
color:#0D0 !important;
}
.vote{
opacity:0;
filter:alpha(opacity=0);
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 6th 2014, 2:20 am

Hi Ange.

This is REALLY close. I've tried changing a few things but don't understand the CSS enough to help myself properly.

At present this is what happens:
1. The LIKE button is a "+"
2. When you click it, it changes to a THUMBS UP icon.
3. The number of LIKES are displayed next to the THUMBS UP icon.

Here are a couple of screenshots.

Before:


After:



Almost perfect. 2 and 3 (the "after" screenshot) is exactly what I want so we're almost there! Smile

The question now is: how do I change the "+" to my own icon?


Here is the entire code as it is now:


Code:
.vote .vote-button, .vote-no-bar {
display:none;
}
.vote .vote-button:first-child {
display:block;
}
.vote .vote-button a {
background-image: url('http://i39.servimg.com/u/f39/18/78/19/68/tbar_t10.png') !important;
background-repeat:no-repeat;
padding-right: 40px;
padding-top: 50px;

font-size:0 !important;
}
.vote { width:auto }

/*Vote System*/
.VCount:before{
content: url('http://i39.servimg.com/u/f39/18/78/19/68/tbar_t10.png');
opacity:1;
filter:alpha(opacity=50);
}
.VCount{
color:#00;
font-size:12px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.3);
font-family: Verdana,Arial,Helvetica,sans-serif;
cursor:default;
}
.VPlus{
color:#00 !important;
font-size:15px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.1);
font-family: Verdana,Arial,Helvetica,sans-serif;
position:relative;
left:9px;
z-index:1;
}

.vote{
opacity:0;
filter:alpha(opacity=0);
}


I have a feeling the top part (vote button) might now be redundant but I'm not sure.

Can you help for that last step?

Many thanks!

Troy.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by Ange Tuteur on September 6th 2014, 2:44 am

We'll have to change the plus button in the script.

Replace you script by :
Code:
$(function() {
  var voteImage = '';
 
  $('.vote').each(function() {
  if ($(this).find('.vote-bar').length) { var VCount = $(this).find('.vote-bar').attr('title').replace(/.*\((\d+).*\)/,'$1') }
  if (VCount == '1') { var vote = ' vote' }
  else { var vote = ' votes' }
  var VPlus = $(this).find('.vote-button:first a').addClass('VPlus').attr('title', 'Vote up').html('<img src="'+voteImage+'" alt="+"/>');
 
  $(this).closest('.postbody').find('.profile-icons').append(VPlus);
  $(this).closest('.postbody:has(.vote-bar)').find('.profile-icons').append('<span class="VCount" title="'+VCount+vote+'">'+VCount+'</span>');
  $(this).remove();
  });
 
  $('.VPlus').click(function(){
  $.get($(this).attr('href'), function() {
  location.reload();
  });
  return false
  });
});

At the top I've added :
Code:
var voteImage = '';

This will allow you to define a vote image. Simply place the URL of your image between the two single quotes and submit.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Reputation + button move

Post by troyeccles on September 6th 2014, 2:50 am

Ange....Marry me!!!!

It's perfect. Thank you! I'll change the icon's to suit but you can close this now and hopefully it will be helpful to others.

Thank you again.

Troy.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Solved Re: Reputation + button move

Post by SLGray on September 6th 2014, 2:53 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum