Can I move the "like" and "dislike" buttons apart a bit. Or just put something in the middle of them

  • I have had a few fat fingered people hitting the wrong button and have asked if they can be separated apart by moving something between them. Is this possible.


    I found one article using the search feature but it was way over my head. It mentioned finding <footer class="messageOptions"> but it did not elaborate on what to change so I decided to ask the question......



    Edited once, last by rabtech ().

  • I found this in an old thread and it appeared that all I had to do was add this in the CSS section in each style.


    But that didnt work. I apologize for my ignorance. I just need some additional help on this issue.



  • Did you try adding padding through CSS ? That is the most easiest option. Give a 20px space and see what it returns.

    Smile , it's good for health

  • Sorry to hijack this thread, but I'd like to know if it's possible to change to colour of the like thumbs up?

    Maybe green for like and red for dislike?

    for the like


    Code
    .icon.icon16.fa-thumbs-o-up {
    
        color: green;
        background-color: green;
    
    }

    choose if you want the color of element or the color of the background green


    i don't use the don't like but probably fa-thumbs-o-down

  • Did you try adding padding through CSS ? That is the most easiest option. Give a 20px space and see what it returns.

    I added it before everything else in the CSS and it didn't change anything on the forum.


    buttonList.smallButtons .button{

    padding:10px;

    }

  • Which browser do you use ? Use the inspect element to see where you need to put the CSS. To add CSS, you can go with custom CSS option in ACP.

    Smile , it's good for health

  • For wcfDislikeButton , add


    Code
    .wcfDislikeButton {
    margin-left: 20px;
    }

    It gave me this



    Smile , it's good for health

    Edited 2 times, last by Dilip ().

  • You can try this on a template. On which one, I am not sure


    Code
    <li class="wcfDislikeButton" style="margin-left: 20px;"><a class="button" href="#" data-type="dislike" data-tooltip="Dislike"><span class="icon icon16 fa-thumbs-o-down"></span> <span class="invisible">Dislike</span></a></li>

    I had to try on a live forum, so chose Splinter's forum. Not sure how it will work on WCf 2.1

    Smile , it's good for health

  • Splinter I couldn't find a css class where I could change the colour. But adding it to the element worked for me


    Code
    .icon .icon16 .fa-thumbs-o-down" {
    
    color: red;
    
    }



    You can add green the same way


    Code
    .wcfLikeButton {
    
    color: green;
    }

    Smile , it's good for health

    Edited 2 times, last by Dilip ().

  • OK. The spacing worked perfectly. I added it in all my styles in the CSS section and each one loaded perfectly.


    However I couldn't add the color portion. It would crash the site and load the "page of death" i call it. I just hit the back button and remove the code and save and it fixes the problem.


    I would like to know why i cant add the lines for the color... However,,,,, I got the part that I needed....



    Thank you Dilip for the info.



  • Just curious,,,, could it be that the color option is referenced lower in the CSS and i have two of the entries. Some of the styles have quite a long CSS.

  • You want to change the colour just like @ Splinter ?

    If it was easy. But not if its a lot of trouble. Anything to help the older members on my site to be able to see the button better.

  • I give up.... I cant make them all happy... Now i have a problem with it looking wrong on a phone. Its exactly what they asked for! And that spacing has to appear somewhere on the mobile view.


    Once you get around 2000 members its not easy making them all happy for sure... Im going to stop asking them if they are ok with changes I make.....X(






    If you can figure out how for me to change the color I may just change the dislike button to red and remove the spacing..