Like, Quote, Reply Button Edit

Like, Quote, Reply Button Edit

Overview Updates (3) Reviews (6) Discussion
Jordyn

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...
Click to expand...

Read more about this resource...
 
Jordyn said:
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.
Click to expand...

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);
    }
 
hIBEES said:
Any way to do for report. Edit ;)
Click to expand...
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.
 
Jordyn said:
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.
Click to expand...
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.
 
hIBEES said:
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.
Click to expand...
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:
hIBEES said:
AWESOME. just History,Delete,IP, Warn to go lol

Just kidding mate, that is awesome buddy, thank you very much.
Click to expand...
: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: 30
Jordyn said:
: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%);
    }
Click to expand...


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. :)
 
You must log in or register to reply here.

Similar threads

M
  • Question Question
XF 2.2 SourceJump and Quote/Reply Button Colors
Replies
1
Views
272
Matthew H
M
btmgreg
Fixed Spacing for like/quote/reply buttons
Replies
1
Views
348
XF Bug Bot
XF Bug Bot
erdis
  • Question Question
XF 2.1 How do show visitors to the quote / reply button?
Replies
6
Views
787
erdis
erdis
Steffen
Fixed On Chrome for Android it's (nearly?) impossible to hit the "Select-to-quote" reply button
Replies
2
Views
2K
Chris D
Chris D
Back
Top Bottom