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

nodebb-theme-persona/templates/partials/topic/post.tpl at master · NodeBB/nodebb-theme-persona

Persona - A modern and responsive NodeBB theme. Contribute to NodeBB/nodebb-theme-persona development by creating an account on GitHub.

GitHub (github.com)

nodebb-theme-persona/templates/partials/topic/post.tpl at master · NodeBB/nodebb-theme-persona

Persona - A modern and responsive NodeBB theme. Contribute to NodeBB/nodebb-theme-persona development by creating an account on GitHub.

GitHub (github.com)

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