How do I resize the group stars?

[jjson]

Greetings. I've been trying to figure out a way to resize the group stars in the Display.template file. This is the bit I've been working on yet couldn't manage:

Code Select Expand

', $message['member']['group_stars'], '
I've previously tried to add in

Code Select Expand

<div style="overflow: auto; width: 100%;"> but it didn't work so far. How do I modify the aforementioned code in the Display.template so I can resize the group stars?

[Steve]

Wouldn't resizing the stars and then replacing them be easier?

[jjson]

Wouldn't resizing the stars and then replacing them be easier?

I've done that, too, but the quality of the images would be drastically lost. So instead I'm trying to find a way to resize the original images through html/css.

[Steve]

I don't know what program you used to resize images but there are some that will do the job without perceptible quality loss.

I'll leave the coding advice to others as that isn't my area of expertise.

[jjson]

I don't know what program you used to resize images but there are some that will do the job without perceptible quality loss.

I'll leave the coding advice to others as that isn't my area of expertise.

PS 2018 was the program I used to resize images. The original images were exported from Sketch 72.4 and when displayed they looked much bigger than they were intended to. When I exported them using 1x size, then the quality would worsen. So I had to export them using 2x size on Sketch in order to get the best quality. As I did do that, the images would look way bigger in the form of group stars... Now I need to keep the quality as is, while getting them to look smaller...

[Kindred]

use the browser's examine tool...

Code (for example, add) Select Expand

.icons {
    width: 20px;
}


[jjson]

Code Select Expand

use the browser's examine tool...

[code: for example]
.icons {
    width: 20px;
}


Didn't work. I feel like we should add something to the following bit in the Display.template file:

Code Select Expand

', $message['member']['group_stars'], '

[Kindred]

no. there is no need to edit a template file at all.  The template has a CSS name already identified.

[jjson]

My template doesn't have the following code in the css file:

Code Select Expand

.icons {
    width: 20px;
}

[shadav]

My template doesn't have the following code in the css file:

Code Select Expand

.icons {
    width: 20px;
}

add it to the end of your css file, change the 20px to whatever number you want to use

[Kindred]

My template doesn't have the following code in the css file:

Code Select Expand

.icons {
    width: 20px;
}

yes, I am aware it does not have it....  I typed shorthand and forgot to use the word add...   but using the browser examine tool allows you to play around before editing the actual css file..

[Antechinus]

You want this code:

Code Select Expand

.stars img {
    width: 20px;
    height: auto;
}Where obviously you can change the width to suit yourself.

[Kindred]

OOPS!    lol.... I was checking a 2.1 site.

nice catch Antechinus

[efk]

Back in time I have downloaded icons, changed what I needed and uploaded with the same name. Its easiest way since there are online tools for photo-editing , all what you need is to keep the same file type. Even that is not completely true, since when replacing stars (.gif) I used huge images as replacement (.png), like these for example