XF 2 Tip Customizing The user Group Banner With CSS and Adding Animation

[DareSec]

DareDevil submitted a new resource:

Customizing The user Group Banner With CSS - user Group Banner customize

https://imgur.com/ZAv22wb

These instructions will explain how to Customizing for user banners.

Give the banner a title:
I given admin for example

Choose a class name for your custom class, in this example we are using admin
Add it to the custom CSS field for the user group, like so:

Go to extra.less template according to your style you are using

paste this code

.admin { display: inline-block; text-align: center; font-size: .7em; padding: .5em 0em...

Read more about this resource...

 

[Apih]

hi sir
can u explain more about add animation
i already tried it
its not working

 

[BattleKing]

hi sir
can u explain more about add animation
i already tried it
its not working

ApihThe CSS code has to look like:

.admin {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    padding: .5em 0em;
    font-weight: 500;
    color: #fff;
    background: #A9A9A9;
    text-transform: uppercase;
    border: none;
    position: relative;
    overflow: hidden;
}

.admin:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2s infinite;
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Please be aware to set the css banner text

 

[Apih]

The CSS code has to look like:

.admin {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    padding: .5em 0em;
    font-weight: 500;
    color: #fff;
    background: #A9A9A9;
    text-transform: uppercase;
    border: none;
    position: relative;
    overflow: hidden;
}

.admin:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2s infinite;
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Please be aware to set the css banner text
View attachment 21990

BattleKingthxx
now it works

 

[Soft4Win]

There is no permission error when opening the resources