XF 2.1 Insert Quotes button color

[beerForo]

I am trying to change the properties of "Insert quotes" but NOT have it affect "Quote messages" in the pop-up...

Can someone help me style this button? Whatever I try, the color affects both, and the hover is still the old color... Thanks!

 

[Snog]

There might be a better way to do it, but this should work...

Add this to your extra.less template:

.button--multiQuote
{
    color: red !important;
    background-color: green !important;
}

.button--multiQuote:hover
{
    color: green !important;
    background-color: red !important;
}

 

[beerForo]

That's it thx @Snog! Now looking for hover to make it a little darker like the Post Thread button, but can't seem to get it.

 

[Snog]

I edited the post to include the hover part.

 

[beerForo]

Ah cool thanks!

 

[beerForo]

I tried this in hover, what am I doing wrong? Trying to mimic "Post thread" orange button, thx.

transition: background-color .25s ease !important;

 

[Snog]

That should work.

This does (the time for the transition is extended to make it more obvious):

.button--multiQuote:hover
{
    color: green !important;
    background-color: red !important;
    transition: background-color 3.25s ease !important;
}

 

[beerForo]

I must be doing something wrong no fade.

 

[Snog]

I must be doing something wrong no fade.

Post what you've put in extra.less for the multiQuote button.

 

[beerForo]

.button--multiQuote
{
    color: #fff !important;
    background-color: #d8830e !important;
}

.button--multiQuote:hover
{  
    color: #fff !important;
    background-color: #d8830e !important;
    transition: background-color .25s ease !important;
}

 

[BassMan]

Your background color is the same on hover.

 

[Snog]

If you're going to use the same color, you have to transition the opacity.

.button--multiQuote:hover
{ 
    color: #fff !important;
    background-color: #d8830e !important;
    opacity: 0.75;
    transition: opacity .25s !important;
}

 

[beerForo]

Indeed I was missing the opacity thanks!

Thanks @BassMan too.

 

[beerForo]

Is the call to action button using opacity or 2 colors?
The on like on here, the orange Post Thread.
I was trying to dupe that. Thx

 

[Snog]

It's the same color with a transparency applied to the default color.

This should be close enough:

.button--multiQuote
{
    color: #fff !important;
    background-color: @xf-buttonCtaBg !important;
    opacity: .90;
}

.button--multiQuote:hover
{   
    color: #fff !important;
    background-color: @xf-buttonCtaBg !important;
    opacity: 1.00;
    transition: opacity .25s !important;
}

If not, play with it.

 

[beerForo]

Bingo!

This helps a lot for the future as well, calling XF classes (@) thx!

 

[gouwepeer.nl]

Maybe you like this:

/* Button Multi Quote */
.button--multiQuote
{
    color: blue !important;
    background-color: moccasin !important;
}

.button--multiQuote:hover
{
    color: #fff !important;
    background-color: #000 !important;
}

/* Button Attachement Upload */
.js-attachmentUpload
{
    color: blue !important;
    background-color: moccasin !important;
}

.js-attachmentUpload:hover
{
    color: #fff !important;
    background-color: #000 !important;
}