Like, Quote, Reply Button Edit

Like, Quote, Reply Button Edit

Jordyn

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

hIBEES

Active member
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:

Jordyn

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

Jordyn

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

hIBEES

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

Jordyn

Formerly EvilSS
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%);
    }
 

hIBEES

Active member
AWESOME. just History,Delete,IP, Warn to go lol

Just kidding mate, that is awesome buddy, thank you very much.
 
Last edited:

Jordyn

Formerly EvilSS
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%);
    }
 

hIBEES

Active member
: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