Username with flipping icon

C

chibik

Member
Registered
Joined
May 21, 2019
Messages
23
Points
13

Reputation:

Anyone know how they make the flipping icon when you move your mouse to the username like here, i know they using the font awesome for the icon but when you move your mouse to the username it flips 360 or rotates rather. Anyone can point me to a right direction please? Thank you
Capture.PNG
 
eLeonore

eLeonore

Active member
Registered
Joined
Oct 21, 2021
Messages
39
Points
28

Reputation:

CSS: 
.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style3:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

put on
Code: 
extra.less
 
F

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

eLeonore said:
CSS: 
.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style3:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

put on
Code: 
extra.less
Click to expand...
eLeonoreThis code needs refactoring

Less: 
.username {
       .username--style3:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
              //your css here
        }
}

or for example like that

Less: 
.groupBeforeIcon (@groupid, @faicon) {
    .username {
       .username--style@{groupid}:before {
            .m-faBase();
            content: "\@{faicon}";
            //your css here
        }
    }
}

.groupBeforeIcon (3, f521);
 
↑View previous replies…
C

chibik

Member
Registered
Joined
May 21, 2019
Messages
23
Points
13

Reputation:

notwonderful said:
This code needs refactoring

Less: 
.username {
       .username--style3:before {
            .m-faBase();
            .m-faContent(@fa-var-crown);
              //your css here
        }
}

or for example like that

Less: 
.groupBeforeIcon (@groupid, @faicon) {
    .username {
       .username--style@{groupid}:before {
            .m-faBase();
            content: "\@{faicon}";
            //your css here
        }
    }
}

.groupBeforeIcon (3, f521);
Click to expand...
notwonderfulI palace this in the usergroup CSS?
 
C

chibik

Member
Registered
Joined
May 21, 2019
Messages
23
Points
13

Reputation:

I did, but how do i get it to show up in usergroups? it has to reference something no?
 
eLeonore

eLeonore

Active member
Registered
Joined
Oct 21, 2021
Messages
39
Points
28

Reputation:

chibik said:
I did, but how do i get it to show up in usergroups? it has to reference something no?
Click to expand...
chibik
CSS: 
.username--style[3]:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style[3]:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

just replace the usergroup id
Code: 
.username--style[3]


this is default usergroup id

administrator : 3
moderator : 4
registered : 2
unregistered : 1
 
eLeonore

eLeonore

Active member
Registered
Joined
Oct 21, 2021
Messages
39
Points
28

Reputation:

chibik said:
I did, but how do i get it to show up in usergroups? it has to reference something no?
Click to expand...
chibik
CSS: 
// this is for administrator
.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style3:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

//this is for moderator
.username--style4:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style4:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

// this is for registered
.username--style2:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style2:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

just add to extra.less
 
C

chibik

Member
Registered
Joined
May 21, 2019
Messages
23
Points
13

Reputation:

eLeonore said:
CSS: 
// this is for administrator
.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style3:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

//this is for moderator
.username--style4:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style4:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

// this is for registered
.username--style2:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style2:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

just add to extra.less
Click to expand...
eLeonoreOhhh awesome, thank you very much, this helped alot. But this is for the banner style, how do i get that to do it next to a username?
 
rigarus99

rigarus99

Well-known member
Registered
Joined
Sep 13, 2021
Messages
192
Points
53

Reputation:

Go to your usergroups and click on one usergroup.
1639458874741.png

In the settings you have this option.

type the css class name in the section "Other, using custom css class name"
 
C

chibik

Member
Registered
Joined
May 21, 2019
Messages
23
Points
13

Reputation:

Nevermind, i figured it out. You have to put below code into Usergroup>>Username CSS not extra.less

Edit: Place the code both in extra.less and inside the username CSS

Code: 
.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\1F451";
    padding-right: 1px;
    display: inline-block;
}

.username--style3:hover:before {
    display: inline-block;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    -o-transition: all .8s
}

Thank you eLeonore
 
Last edited:
O

one_finger_man

Well-known member
Registered
Joined
Jan 20, 2022
Messages
383
Points
53

Reputation:

you want to add for all users
these are the codes add to extra less

Code: 
.avatar:hover, .avatar img:hover, .img.s:hover{
-moz-transition: all 5s ease-in-out;
  -webkit-transition: all 5s ease-in-out;
  -o-transition: all 5s ease-in-out;
  -ms-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  o-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
 
Levi Ackerman

Levi Ackerman

Collaborate
Collaborate
Registered
Joined
Dec 26, 2021
Messages
106
Points
63

Reputation:

Less: 
.username--style3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f521";
    padding-right: 1px;
    display: inline-block;
}
1642665832884.png
 
You must log in or register to reply here.
Top