• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

How to change the up vote/down vote

Scheduled Pinned Locked Moved Technical Support
14 Posts 4 Posters 3.4k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    torn2
    wrote on last edited by
    #1

    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?

    pichaliteP 1 Reply Last reply
    1
  • A Offline
    A Offline
    azeus
    wrote on last edited by
    #2

    Oh I'm looking for that as well 🙂

    1 Reply Last reply
    0
  • pichaliteP Offline
    pichaliteP Offline
    pichalite Plugin & Theme Dev
    replied to torn2 on last edited by
    #3

    @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

    1 Reply Last reply
    1
  • T Offline
    T Offline
    torn2
    wrote on last edited by
    #4

    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?

    1 Reply Last reply
    0
  • Jonathan HunterJ Offline
    Jonathan HunterJ Offline
    Jonathan Hunter
    wrote on last edited by
    #5

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

    1 Reply Last reply
    0
  • Jonathan HunterJ Offline
    Jonathan HunterJ Offline
    Jonathan Hunter
    wrote on last edited by
    #6

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

    A 1 Reply Last reply
    1
  • A Offline
    A Offline
    azeus
    replied to Jonathan Hunter on last edited by
    #7

    @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 HunterJ 1 Reply Last reply
    0
  • Jonathan HunterJ Offline
    Jonathan HunterJ Offline
    Jonathan Hunter
    replied to azeus on last edited by
    #8

    @azeus Cool. Glad I could help. 💃

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    azeus
    replied to Jonathan Hunter on last edited by
    #9

    @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

    1 Reply Last reply
    0
  • Jonathan HunterJ Offline
    Jonathan HunterJ Offline
    Jonathan Hunter
    wrote on last edited by Jonathan Hunter
    #10

    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;

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    azeus
    replied to Jonathan Hunter on last edited by
    #11

    @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 HunterJ 1 Reply Last reply
    0
  • Jonathan HunterJ Offline
    Jonathan HunterJ Offline
    Jonathan Hunter
    replied to azeus on last edited by
    #12

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

    A 1 Reply Last reply
    1
  • A Offline
    A Offline
    azeus
    replied to Jonathan Hunter on last edited by
    #13

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

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

    1 Reply Last reply
    0
  • T Offline
    T Offline
    torn2
    wrote on last edited by
    #14

    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.

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development