Like, Quote, Reply Button Edit

Like, Quote, Reply Button Edit

Overview Updates (3) Reviews (6) Discussion
For XenForo 2.1.x:

CSS: 
/*------- Links as buttons on footer posts -----------*/
.actionBar-action--reply, .js-multiQuote, .actionBar-action.actionBar-action--reaction:not(.has-reaction) .reaction-text {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255) !important;
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255) !important;
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

.actionBar-action.actionBar-action--reaction:not(.has-reaction) .reaction-text:hover  {
        background: rgb(65, 158, 224);
        color: rgb(255, 255, 255) !important;
        text-decoration: none;
        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);
    }

@media (max-width: 800px) {
     .actionBar-action--like:hover {
          transform: none;
     }
}
Demo: https://xenfacil.com/foros
Salud2
 
Thanks for this, but I have several styles available for my forum. How do I have to change this, so that it takes dynamically the related colour of every separate style?
 
Cibox said:
Thanks for this, but I have several styles available for my forum. How do I have to change this, so that it takes dynamically the related colour of every separate style?
Click to expand...
Change the colour codes "rgb(255, 255, 255)" to match each style.

Will take some time but doable.
 
Cibox said:
Thanks for this, but I have several styles available for my forum. How do I have to change this, so that it takes dynamically the related colour of every separate style?
Click to expand...

hi mate, im still working on the hover and linear-gradient, but this works.
Code: 
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like, .actionBar-action--reaction {
         display:inline-block;
         background: @xf-paletteColor3;
         color: @xf-paletteColor1 !important;
         padding: 5px 12px 5px;
         line-height: 19px !important;
         background: linear-gradient(0deg, @xf-paletteColor3, mix(@xf-paletteColor3, @xf-paletteColor3, 0%));
         transition: 0.3s;
    }
.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: @xf-paletteColor3, 5%;
         color: @xf-paletteColor1 !important;
         text-decoration: none;
         background: linear-gradient(0deg, @xf-paletteColor3, mix(@xf-paletteColor3, @xf-paletteColor3, 5%));
    }
.actionBar-action--like:hover, .actionBar-action--reaction:hover  {
         background: @xf-textColorFeature;
         color: @xf-paletteColor1 !important;
         text-decoration: none;
         background: linear-gradient(0deg, @xf-paletteColor3, mix(@xf-paletteColor3, @xf-paletteColor3, 5%));
    }
@media (max-width: 800px) {
.actionBar-action--like:hover {
transform: none; } }
 
Thanks!
This is what i custumised it to:

255cf32083e27b67b83650e4f2c0e7b5.gif


I used the gradient, changed the hover effect a bit and added a border as i liked it that way.
 
Last edited:
MojoW said:
Thanks!
This is what i custumised it to:

255cf32083e27b67b83650e4f2c0e7b5.gif


I used the gradient, changed the hover effect a bit and added a border as i liked it that way.
Click to expand...
That looks sweet as, very nice work mate.

Manster54 said:
Wondering about this, at the bottom of code #2, it has two }
Click to expand...
Hi mate, yes, 1 is for media mobile only code, the other is for the actual code. The media code basically wraps the main code to work only on mobile.
 
Jordyn said:
That looks sweet as, very nice work mate.
Click to expand...

Thanks.
I also added the buttons in the reply box to make everything match.(.button--icon--reply, .button--icon--preview, .button--icon--attach)
b080662a66edc951827874231aecee4d.gif


Here is the code for anyone wanting to use it.
I did not use the transform scale on the buttons so i took out the mobile part as it seems to be working fine on my mobile
CSS: 
.actionBar-action--report, .actionBar-action--edit, .actionBar-action--history, .actionBar-action--delete, .actionBar-action--spam, .actionBar-action--warn, .actionBar-action--ip {
display:inline-block;
color: rgb(255, 255, 255) !important;
padding: 2px 6px 2px;
line-height: 19px !important;
border-radius: 1px;
background: linear-gradient(to top, #d2d2d2 0%, #3a3a3a 10%);
border: 1px outset #990000;
        &:hover {
        color: rgb(255, 255, 255) !important;
        border-radius: 1px;
        background: linear-gradient(to top, #ab0900 0%, #3a3a3a 20%);
    }
}

.actionBar-action--reply, .actionBar-action--mq, .actionBar-action--like, .actionBar-action--reaction, .button--icon--reply, .button--icon--preview, .button--icon--attach {
display: inline-block !important;
color: rgb(255, 255, 255) !important;
padding: 3px 7px 3px;
line-height: 19px !important;
border-radius: 1px;
background: linear-gradient(to top, #d2d2d2 0%, #3a3a3a 10%) !important;
border: 1px outset #990000 !important;
    &:hover {
        display: inline-block !important;
        color: rgb(255, 255, 255) !important;
        border-radius: 1px;
        background: linear-gradient(to top, #ab0900 0%, #3a3a3a 20%) !important;
    }   
}
Edit: Cleaned up code.
 
Last edited:
MojoW said:
Thanks.
I also added the buttons in the reply box to make everything match.(.button--icon--reply, .button--icon--preview, .button--icon--attach)
b080662a66edc951827874231aecee4d.gif


Here is the code for anyone wanting to use it.
I did not use the transform scale on the buttons so i took out the mobile part as it seems to be working fine on my mobile
CSS: 
.actionBar-action--report, .actionBar-action--edit, .actionBar-action--history, .actionBar-action--delete, .actionBar-action--spam, .actionBar-action--warn, .actionBar-action--ip {
display:inline-block;
color: rgb(255, 255, 255) !important;
padding: 2px 6px 2px;
line-height: 19px !important;
border-radius: 1px;
background: linear-gradient(to top, #d2d2d2 0%, #3a3a3a 10%);
border: 1px outset #990000;
        &:hover {
        color: rgb(255, 255, 255) !important;
        border-radius: 1px;
        background: linear-gradient(to top, #ab0900 0%, #3a3a3a 20%);
    }
}

.actionBar-action--reply, .actionBar-action--mq, .actionBar-action--like, .actionBar-action--reaction, .button--icon--reply, .button--icon--preview, .button--icon--attach {
display: inline-block !important;
color: rgb(255, 255, 255) !important;
padding: 3px 7px 3px;
line-height: 19px !important;
border-radius: 1px;
background: linear-gradient(to top, #d2d2d2 0%, #3a3a3a 10%) !important;
border: 1px outset #990000 !important;
    &:hover {
        display: inline-block !important;
        color: rgb(255, 255, 255) !important;
        border-radius: 1px;
        background: linear-gradient(to top, #ab0900 0%, #3a3a3a 20%) !important;
    }  
}
Edit: Cleaned up code.
Click to expand...
Thank you for sharing mate, looks cool and much appreciated.
 
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