Resource icon

Hover Effect for actionBar

Overview Updates (1) Discussion
I

inzanty

Active member
inzanty submitted a new resource:

Hover Effect for actionBar - Hover Effect for actionBar

Add some code to extra.less
Code: 
//Action Bar
.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
      
        &:hover{
            font-size: 100%;
            text-decoration:none;
            color: @xf-paletteColor3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }...
Click to expand...

Read more about this resource...
 
Pretty cool. Thank you for this nifty extra!

Went with this though, for the IP. Search icon seemed off to me.
CSS: 
}
        &--ip:before{
            content: "\f233";
}
 
Manster54 said:
Seems to hide or disable the likes reaction
Click to expand...
A short conversation with @Russ solved this.

Below this:
CSS: 
&--history:before{
            content: "\f1da";
        }

Add this:
CSS: 
&--reaction i {
            display: none;
        }
        &--reaction:before {
            content: "\f164";
        }

If you want this:
WITHreaction.webp


Otherwise you won't see any new reactions abilities, you will only see reactions for posts that were previously reacted to.

Thank you @Russ for taking a look and solving this.
 
One problem we've noticed.

When you react to a post, the FA icon stays for you after you react to a post. Would be nice to have the FA icon disappear for you after you react to a post.
 
Manster54 said:
One problem we've noticed.

When you react to a post, the FA icon stays for you after you react to a post. Would be nice to have the FA icon disappear for you after you react to a post.
Click to expand...
Any updates to incorporate this change?
 
In 2.2, the hover effect keeps the 'thumbs up' icon, thus showing 2 of the same icon. I'd like to remove one of the thumbs-up icons when the hover is active, to remove the duplicate. Any pointers on how to achieve this?
I tried the below, but ti didn't change anything.
CSS: 
        &--like:before { content: "\f087"; }
        &--like:hover:before { content: ""; }
 
Mouth said:
In 2.2, the hover effect keeps the 'thumbs up' icon, thus showing 2 of the same icon. I'd like to remove one of the thumbs-up icons when the hover is active, to remove the duplicate. Any pointers on how to achieve this?
I tried the below, but ti didn't change anything.
CSS: 
        &--like:before { content: "\f087"; }
        &--like:hover:before { content: ""; }
Click to expand...
Have you managed to solve this?
 
You must log in or register to reply here.
Back
Top Bottom