How make this rank

[samavoda 0]

Hello, anyone know how to make this rank? ( https://prnt.sc/uqlpt8 ; https://prnt.sc/uqlq97 ) and how to add photo in nick name like this ( https://prnt.sc/uqlqn0 )

[Oni 61]

Check out this article https://cssgradient.io/blog/css-gradient-text/ for CSS text gradients.

To add images, just use the HTML img tag:

<img src="link_to_your_image.png">

If you want to use CSS-only, take a look at the CSS ::before or ::after Selector for the image.

Edited October 1, 2020 by Oni

[samavoda 0]

First work tnx for help, for second ask if it can be a little more detailed?

[Oni 61]

2 hours ago, samavoda said:

First work tnx for help, for second ask if it can be a little more detailed?

Sure pal!

Common way using the HTML <img> tag:

<img src="https://icons.iconarchive.com/icons/chanut/role-playing/24/Potion-icon.png"><span>samavoda</span>

Which looks like this: , We could also swap the position of both elements: .

<span>samavoda</span><img src="https://icons.iconarchive.com/icons/chanut/role-playing/24/Potion-icon.png">

The <span> tag is not necessary in this example but in general it's used to grouping of inline-elements/properties, like this:

<span style="color: red;font-weight: bold;">samavoda</span>

Outcome:

Alternative way using CSS only (will be cached):

.samavoda {
	color: #b57efa;
	font-weight: bold;
}

.samavoda::before {
	content: url(https://icons.iconarchive.com/icons/chanut/role-playing/24/Potion-icon.png);
}

As you can see we have 2 classes, the second one extends the first one using a ::before Selector. Let's see what that selector does:

<span class="samavoda">samavoda</span>

Outcome: , as you can see it does exactly the same thing, except that we have to manually center the vertical-align of the image. Using ::after instead of ::before does the same as swapping elements in HTML templates like showed above. This way just makes your code more maintainable.

Stick to the first way if you don't have too much inline-properties, it's easier and your styling doesn't get cached.

Edited October 1, 2020 by Oni

[samavoda 0]

This is for group, I know this but  I ask how to add this on member no group, where write this code ?

[Oni 61]

This is not just for formatting groups, you can apply these everywhere you want. You can paste the CSS code in your themes custom.css as an example.

If you need assistance, show me exactly what you want to achieve and I'll help you.

Edited October 2, 2020 by Oni

[samavoda 0]

On 10/2/2020 at 4:32 PM, Oni said:

This is not just for formatting groups, you can apply these everywhere you want. You can paste the CSS code in your themes custom.css as an example.

If you need assistance, show me exactly what you want to achieve and I'll help you.

See PM.