XF 2 Tip Custom Banner Img

[moxx]

Custom Banner image
Welcome to my First tutorial
Want Group Banners Like this?

Then here you are right
First login in admin panel.
Go to appearance > styles > templates > extra.less

.owner {
    color: #fff;
    background: url(https://moxx.tech/data/assets/m/admin-banner.webp);
    background-position: center;
    background-size: cover;
    border-color: #971a1a !important;
    transition: ease-out .5s;
    position: relative;
    text-align: center;
    align-items: center;
    padding: 1px 6px 0px 32px;
    font-size: 75%;
    font-weight: bold;
    border-radius: 3px;
    margin-top: 3px;
    cursor: default;
}
.owner::before {
    
    font-family: 'font awesome 5 pro';
    content: "\f21b";
    width: 9px; /* Adjust the width of the icon as needed */
    height: 16px; /* Adjust the height of the icon as needed */
    position: absolute;
    left: 8px; /* Adjust the left position of the icon */
    top: 50%;
    transform: translateY(-50%);
}

.
Like this:

​

Then go to

Groups & permissions > User group > Your user Group​

Change it to your group name that you but in the extra.less if ther stand .owner then you need to typ in owner if it is .moxx then moxx​

Thanks for reading Love u All

 

[Splicho]

Great share thank you brotherman.

 

[Sagex]

Very gut sir <3 Danke!

 

[ilona]

From where i can get background?
Link not working

 

[moxx]

From where i can get background?
Link not working

ilonahere you go its in the zip!

 

[one_finger_man]

you will need to make the User banner text for this to work he left that out as you can see i add the image with out doing it that way it will not work

 

[Cracky]

you will need to make the User banner text for this to work he left that out as you can see i add the image with out doing it that way it will not work

View attachment 37392

one_finger_manThe bg image gif not in center it show only simple in buttom red and black

 

[one_finger_man]

The bg image gif not in center it show only simple in buttom red and black

Crackyyeah i only got it working like that i tryed it the other way it would not show so i did it this way

 

[Cracky]

yeah i only got it working like that i tryed it the other way it would not show so i did it this way
View attachment 37393

one_finger_manCan you tell how this work properly?

 

[Cracky]

I think its need to edit extra.less and put align center.

 

[Cracky]

Please sent the all gif images of this user tittle banner.. i have only 1 banner that illona sent attachment..

 

[doxx]

Please sent the all gif images of this user tittle banner.. i have only 1 banner that illona sent attachment..

Crackylook at here ther is an zip

 

[Cracky]

Please share all images gif thanks

 

[one_finger_man]

Please share all images gif thanks

Crackyyou dont need to spam the topic we can see your message

 

[jhoancito]

Custom Banner image
Welcome to my First tutorial
Want Group Banners Like this?
View attachment 37053
Then here you are right
First login in admin panel.
Go to appearance > styles > templates > extra.less

.owner {
    color: #fff;
    background: url(https://moxx.tech/data/assets/m/admin-banner.webp);
    background-position: center;
    background-size: cover;
    border-color: #971a1a !important;
    transition: ease-out .5s;
    position: relative;
    text-align: center;
    align-items: center;
    padding: 1px 6px 0px 32px;
    font-size: 75%;
    font-weight: bold;
    border-radius: 3px;
    margin-top: 3px;
    cursor: default;
}
.owner::before {
   
    font-family: 'font awesome 5 pro';
    content: "\f21b";
    width: 9px; /* Adjust the width of the icon as needed */
    height: 16px; /* Adjust the height of the icon as needed */
    position: absolute;
    left: 8px; /* Adjust the left position of the icon */
    top: 50%;
    transform: translateY(-50%);
}

.
Like this:

View attachment 37054 ​

Then go to

Groups & permissions > User group > Your user Group​

View attachment 37055

Change it to your group name that you but in the extra.less if ther stand .owner then you need to typ in owner if it is .moxx then moxx​

Thanks for reading Love u All

moxxHow can I enlarge or widen the rectangle that is the image of the range?

and also what would be the code for prizes, you can also

 

[Flixer]

How can I enlarge or widen the rectangle that is the image of the range?

and also what would be the code for prizes, you can also

jhoancitosame im tryna make it bigger

 

[ka4p3]

Hey, could you share all banners?

 

[Pinuccio]

Immagine del banner personalizzato
Benvenuti nel mio primo tutorial
Vuoi banner di gruppo come questo?
View attachment 37053
Allora qui hai ragione
Primo accesso nel pannello di amministrazione.
Vai su aspetto > stili > modelli > extra.less
[CODICE=css].proprietario {
colore: #fff;
sfondo: url (https://moxx.tech/data/assets/m/admin-banner.webp);
posizione dello sfondo: centro;
dimensione dello sfondo: copertina;
colore del bordo: #971a1a !importante;
transizione: allentamento .5s;
posizione: relativa;
allineamento testo: centro;
allineare gli elementi: centro;
imbottitura: 1px 6px 0px 32px;
dimensione carattere: 75%;
peso carattere: grassetto;
raggio del bordo: 3px;
margine superiore: 3px;
cursore: predefinito;
}
.proprietario:rima {

font-family: 'font awesome 5 pro';
contenuto: "\f21b";
larghezza: 9px; /* Regola la larghezza dell'icona secondo necessità */
altezza: 16px; /* Regola l'altezza dell'icona secondo necessità */
posizione: assoluta;
sinistra: 8px; /* Regola la posizione a sinistra dell'icona */
superiore: 50%;
trasformazione: traduciY(-50%);
}
[/CODICE]
.
Come questo:

View attachment 37054 ​

Allora vai a

Gruppi e autorizzazioni > Gruppo utenti > Il tuo gruppo utenti​

View attachment 37055

Cambialo nel nome del tuo gruppo, ma in extra.less se è .owner allora devi digitare proprietario se è .moxx quindi moxx​

Grazie per aver letto Vi amo tutti

moxxhttps://moxx.tech ----> What is this site about?

 

[jhoancito]

Custom Banner image
Welcome to my First tutorial
Want Group Banners Like this?
View attachment 37053
Then here you are right
First login in admin panel.
Go to appearance > styles > templates > extra.less

.owner {
    color: #fff;
    background: url(https://moxx.tech/data/assets/m/admin-banner.webp);
    background-position: center;
    background-size: cover;
    border-color: #971a1a !important;
    transition: ease-out .5s;
    position: relative;
    text-align: center;
    align-items: center;
    padding: 1px 6px 0px 32px;
    font-size: 75%;
    font-weight: bold;
    border-radius: 3px;
    margin-top: 3px;
    cursor: default;
}
.owner::before {
  
    font-family: 'font awesome 5 pro';
    content: "\f21b";
    width: 9px; /* Adjust the width of the icon as needed */
    height: 16px; /* Adjust the height of the icon as needed */
    position: absolute;
    left: 8px; /* Adjust the left position of the icon */
    top: 50%;
    transform: translateY(-50%);
}

.
Like this:

View attachment 37054 ​

Then go to

Groups & permissions > User group > Your user Group​

View attachment 37055

Change it to your group name that you but in the extra.less if ther stand .owner then you need to typ in owner if it is .moxx then moxx​

Thanks for reading Love u All

moxxI have changed the number, there is no indication how I can change the friend icon.

 

[BattleKing]

I have changed the number, there is no indication how I can change the friend icon.

View attachment 38100

View attachment 38101

jhoancitois that really available in FontAwesome version 5

 

[Splicho]

I have changed the number, there is no indication how I can change the friend icon.

View attachment 38100

View attachment 38101

jhoancitohttps://fontawesome.com/v5/icons/gem?f=classic&s=solid

f3a5

Try this one.