How to change the up vote/down vote
-
How can I change the chevrons in the up/down vote to another image? I can't seem to get the css to work.
I know I can add this:
background-image: url("https://i.imgur.com/EWAgx1K.png"); background-size: 14px;I can't get the chevron to not show though?
-
Oh I'm looking for that as well :)
-
@torn2 @azeus I would suggest you to change the icons in the theme template
change these lines...
https://github.com/NodeBB/nodebb-theme-persona/blob/master/templates/partials/topic/post.tpl#L70
https://github.com/NodeBB/nodebb-theme-persona/blob/master/templates/partials/topic/post.tpl#L77
-
I thought @Jonathan-Hunter changed the chevron's on hos site by using just CSS? I'm not sure where to begin on changing the template?
-
Yep I did. CSS is in the other thread of mine.
-
Solved for Persona Theme:
.topic [component="post/upvote"] {
background-image: url("https://i.imgur.com/EWAgx1K.png");
background-size: 20px;
}
.fa-chevron-up {
color: rgba(250,235,215,0);
}
-
@Jonathan-Hunter said in How to change the up vote/down vote:
Solved for Persona Theme:
.topic [component="post/upvote"] {
background-image: url("https://i.imgur.com/EWAgx1K.png");
background-size: 20px;
}
.fa-chevron-up {
color: rgba(250,235,215,0);
}Works for me :) Thanks a lot.
-
@azeus Cool. Glad I could help.
-
@Jonathan-Hunter said in How to change the up vote/down vote:
@azeus Cool. Glad I could help.
Another question please, is there a way to center the icon ? Because it display as a mosaic :(
-
What do you mean mosaic?
Looks ok to me. . Except the hand is a little cut off.
Perhaps change backgruond size to 18 or 16px
EDIT* @torn2 you may want to edit this style as well to make yours centered and look a bit better.
Ok I see. :
Try put this instead of making the backgrund-size in px:
background-size: cover;
-
@Jonathan-Hunter Tks for the support, I've tried with the cover option, it didn't help. Making the size smaller makes a better mozaic actually :D But it still not working
-
@azeus Ok damb, thats odd cos when I add these style on your site in dev tools it seams to work ok.
.topic [component="post/downvote"] {
background-image: url("/uploads/files/1467360867036-down-copy.png");
background-size: cover;
}Sorry Couldn't get it to work.
-
@Jonathan-Hunter Appreciated. It's better with this:
background-size: contain;
background-repeat: no-repeat;
-
I had to remove mine for now as it works, but in IE and FF it would cutoff the picture, but worked pretty well in Chrome.
