xF2 Template Modification Ask

[Almighty]

How i can replace or add new user groups banners like this.

 

[Splicho]

Go here /admin.php?user-groups/ > pick a usergroup

Write a class u wanna use. Then one setting above, enter User banner text (Otherwise banner wont show).

Then go to extra.less

.yourClass {
    text-indent: -10000em;
    background: url(bannerpathURL) no-repeat;
    width: BannerWidthDimension;
    height: BannerHeightDimension;
    background-size: 100%;
}

Replace properties.

 

[Almighty]

The banner look big and on top of that, it doesn't look good. I want it to have the same dimensions and position (centered) as the "Forum staff" banner, for example. @Splicho

 

[Almighty]

The banner look big and on top of that, it doesn't look good. I want it to have the same dimensions and position (centered) as the "Forum staff" banner, for example. @Splicho
View attachment 40515

AlmightyI've added the code but it looks so big and it has a disproportionate size, apart from that, I reduced the size of the image but I saw that it is not centered (it is on the left) how could it be centered like the "Forum staff" banner and of the same dimensions? @Splicho

 

[Splicho]

I've added the code but it looks so big and it has a disproportionate size, apart from that, I reduced the size of the image but I saw that it is not centered (it is on the left) how could it be centered like the "Forum staff" banner and of the same dimensions? @Splicho

AlmightyUse the banner dimensions.

130x31

 

[Almighty]

Use the banner dimensions.

130x31

SplichoIt doesn't work.
Even though i setted the dimensions, it doesn't work, the banner is still large and disproportionate.

/* User group custom */
.administrator1 {
    text-indent: -10000em;
    background: url("data/styles/2/styles/evolve-dark/images/bngroup/administratorrr.png") no-repeat;
    width: 130;
    height: 31;
    background-size: 100%;
}

That's the dimensions that i've put as you said @Splicho

 

[Almighty]

Use the banner dimensions.

130x31

SplichoIts done, i was already able to do it, I had to add a few more things to the code. For be exactly, " margin: auto; "

Now the next question I have, how can I place it a little higher without leaving so much space between the "forum staff" banner and the other banner in png, I tried to use margin-top: and it doesn't work for me. @Splicho

 

[Splicho]

Its done, i was already able to do it, I had to add a few more things to the code. For be exactly, " margin: auto; "
View attachment 40519

Now the next question I have, how can I place it a little higher without leaving so much space between the "forum staff" banner and the other banner in png, I tried to use margin-top: and it doesn't work for me. @Splicho

AlmightyNeed to see on your forum

 

[Almighty]

Need to see on your forum

SplichoI've send You the link throught prívate message