Like, Quote, Reply Button Edit

Like, Quote, Reply Button Edit

Jordyn

Well-known member
Jordyn submitted a new resource:

Like, Quote, Reply Button Edit - This gives the Like, Quote and Reply links a button look.

Simple template edit to make the Like, Quote and Reply links look like buttons.
These codes are to be added in Extra.less template.

The second code adds a zoom type effect to the like button for something different. If you do use code 2, you will not need to add code 1 and vice versa.

This was tested on default XF2 style, edit color codes to your liking. This has only been tested in IE, FF and safari. Tested only on Desktop Computer, Iphone 7 and iPad 4.

Code 1, no like zoom...

Read more about this resource...
 
Anything that says color in the code is your text/font color. Example: color: rgb(255, 255, 255); which can simply be changed to
color: #000000; or any color you want.

I thought that but I have changed them but its not changing for some reason

Code:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like
    {
         display:inline-block;
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(1, 91, 1) 0%, rgb(1, 91, 1) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107);
         text-decoration: bold;
         background: linear-gradient(rgb(5, 6, 0) 0%, rgb(5, 6, 0) 0%);
    }

.actionBar-action--like:hover  {
        background: rgb(6, 11, 6);
        color: rgb(249, 240, 107);
        text-decoration: bold;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
        transform: scale(1.25);
    }
 
Last edited:
Hi mate, can you try this code please.
Code:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like {
         display:inline-block;
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         padding: 4px 9px;
         line-height: 19px;
         font-weight: bold;
         background: linear-gradient(rgb(1, 91, 1) 0%, rgb(1, 91, 1) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         text-decoration: none;
         background: linear-gradient(rgb(5, 6, 0) 0%, rgb(5, 6, 0) 0%);
    }

.actionBar-action--like:hover  {
        background: rgb(6, 11, 6);
        color: rgb(249, 240, 107) !important;
        text-decoration: none;
        font-weight: bold;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
        transform: scale(1.25);
    }
 
Any way to do for report. Edit ;)
Haha, i have been waiting for someone to ask. The only reason i didnt do it in the first place is because the buttons hit. But if its just report and edit, that should be fine. Fyi, your buttons look great.

I'll be back soon with some code.
 
Haha, i have been waiting for someone to ask. The only reason i didnt do it in the first place is because the buttons hit. But if its just report and edit, that should be fine. Fyi, your buttons look great.

I'll be back soon with some code.
Thank you for code. I love them. Thank you so so much.

Do not spent lots of your time on the others.

Thanks again. Been looking for ages for these.
 
Thank you for code. I love them. Thank you so so much.

Do not spent lots of your time on the others.

Thanks again. Been looking for ages for these.
You're welcome mate thanks ;)

This code is for edit and report with your colors.
Code:
.actionBar-action--report, .actionBar-action--edit {
         display:inline-block;
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         padding: 4px 9px;
         line-height: 19px;
         font-weight: bold;
         background: linear-gradient(rgb(1, 91, 1) 0%, rgb(1, 91, 1) 0%);
    }

.actionBar-action--report:hover, .actionBar-action--edit:hover {
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         text-decoration: none;
         background: linear-gradient(rgb(5, 6, 0) 0%, rgb(5, 6, 0) 0%);
    }
 
AWESOME. just History,Delete,IP, Warn to go lol

Just kidding mate, that is awesome buddy, thank you very much.
 
Last edited:
AWESOME. just History,Delete,IP, Warn to go lol

Just kidding mate, that is awesome buddy, thank you very much.
:D Replace your edit report code with this mate ;)
Code:
.actionBar-action--report, .actionBar-action--edit, actionBar-action--history, .actionBar-action--delete, .actionBar-action--warn, .actionBar-action--ip {
         display:inline-block;
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         padding: 4px 9px;
         line-height: 19px;
         font-weight: bold;
         background: linear-gradient(rgb(1, 91, 1) 0%, rgb(1, 91, 1) 0%);
    }

.actionBar-action--report:hover, .actionBar-action--edit:hover, actionBar-action--history:hover, .actionBar-action--delete:hover, .actionBar-action--warn:hover, .actionBar-action--ip:hover {
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         text-decoration: none;
         background: linear-gradient(rgb(5, 6, 0) 0%, rgb(5, 6, 0) 0%);
    }
 
Sorted them all. Just changed the code. Warn. ip etc etc

Looks bloody superb. Thank you J
 

Attachments

  • Screenshot_20190106-022059_Chrome.webp
    Screenshot_20190106-022059_Chrome.webp
    45.9 KB · Views: 28
:D Replace your edit report code with this mate ;)
Code:
.actionBar-action--report, .actionBar-action--edit, actionBar-action--history, .actionBar-action--delete, .actionBar-action--warn, .actionBar-action--ip {
         display:inline-block;
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         padding: 4px 9px;
         line-height: 19px;
         font-weight: bold;
         background: linear-gradient(rgb(1, 91, 1) 0%, rgb(1, 91, 1) 0%);
    }

.actionBar-action--report:hover, .actionBar-action--edit:hover, actionBar-action--history:hover, .actionBar-action--delete:hover, .actionBar-action--warn:hover, .actionBar-action--ip:hover {
         background: rgb(1, 91, 1);
         color: rgb(249, 240, 107) !important;
         text-decoration: none;
         background: linear-gradient(rgb(5, 6, 0) 0%, rgb(5, 6, 0) 0%);
    }


Ah yes. I went the long way about it and copy/pasted code and changed names. Same outcome but will change to your code to keep extra.less compact. :)
 
Top Bottom