High resolution rank image

[CD130]

Hello, how can I use a high resolution rank image, but show it as a small image on the forum board? Like here on phpbb.com the support rank image is 544 × 96. When I use it on my board the image wont't fit in the banner.

[meetdilip]

You can define image size in CSS. See this

https://stackoverflow.com/questions/156 ... -using-css

I simply defined width and height to the image you attached here. You can see the result yourselves

Screenshot_2019-12-27 phpBB • High resolution rank image.png

width was 120px and height was 30px.

[HiFiKabin]

I don't know if you are using that rank image as an example or that you are actually going to use them on your board. If the second is correct, then please be aware that they were designed especially for phpBB.com by Hanakin and you should seek his permission before you can use them elsewhere.

[Mannix_]

I don't know if you are using that rank image as an example or that you are actually going to use them on your board. If the second is correct, then please be aware that they were designed especially for phpBB.com by Hanakin and you should seek his permission before you can use them elsewhere.

I think you can download them from cdb along with svg forum icons so he is free to use them

[CD130]

I don't know if you are using that rank image as an example or that you are actually going to use them on your board. If the second is correct, then please be aware that they were designed especially for phpBB.com by Hanakin and you should seek his permission before you can use them elsewhere.

I used it as an example

Can anybody tell me where I can find the CSS code for the rank image that I have to change?

[Mannix_]

there is none you would need to add it

Code: Select all

.rank-img img {
    width: your width in px;
}

you can add it to content.css file for example

[CD130]

Thanks, I already tried this code in content.css and common.css, but it won't work I also removed the cache.

Code: Select all

.rank-img img {
	width: 160px;
}

[Mannix_]

Then give us a link to a topic where we can see that image

[CD130]

@Mannix_ I send you a PM with more information about my private phpbb board and some photo's.

[CD130]

What do I have to do to add rank-img?

My board/ clean install phpbb:

Schermafbeelding 2019-12-27 om 17.17.21.png

pphpbb.com:

Schermafbeelding 2019-12-27 om 17.21.17.png

[Mannix_]

What do I have to do to add rank-img?

open viewtopic_body.html find

Code: Select all

<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

and replace with

Code: Select all

<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank rank-img">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

[3Di]

open viewtopic_body.html find

Why?

You simply go to ACP / Users and groups / Manage ranks and add the image previously saved in ./images/ranks/ to the rank.

2019-12-27 19_58_21-Manage ranks.png

The CSS change is ok, resize the image otherwise.

[Mannix_]

Why?

He want to add the class not the image hes done that already

[3Di]

He want to add the class not the image

I missed that point sorry

[CD130]

Mannix_ helped me out!!! Many thanks!!

Solution:

Code: Select all

.profile-rank img {
	width: 160px;
}