How to change the up vote/down vote

torn2

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?

azeus

Oh I'm looking for that as well

pichalite

@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

torn2

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?

Jonathan Hunter

Yep I did. CSS is in the other thread of mine.

Jonathan Hunter

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);
}

azeus

@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.

Jonathan Hunter

@azeus Cool. Glad I could help.

azeus

@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

http://nodebb-forumfr.rhcloud.com/topic/21/sdsdv-dsfqs-sdv

Jonathan Hunter

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;

azeus

@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 But it still not working

Jonathan Hunter

@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.

azeus

@Jonathan-Hunter Appreciated. It's better with this:

background-size: contain;
background-repeat: no-repeat;

torn2

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.