Skip to main content ↑ ↓
When changing rank icons to higher sizes than 16px allow resizing them. Started by Saiyen · · Read 4826 times 0 Members and 3 Guests are viewing this topic. previous topic - next topic

When changing rank icons to higher sizes than 16px allow resizing them.

Hello I just came up with a nice idea.

How about if you change User rank images on {theme}/images/group_icons and if you upload a high resolution image then there is a option to resize it to 16px which is the default icon.png size, but in same time keeping the quality of the image.

At this moment if you edit image sizes in group_icons folder I guess that they will displayed bigger on forum posts and other sections too which completely destroys the theme and makes page bigger.
 In shorter: You can upload any size images, but you can select size that they are resized to when being displayed on forums yet they keep the quality of it in same time.

I am very sure that it is posibble to code it.

Thank you!
Signed by S-A-I-Y-E-N....

Re: When changing rank icons to higher sizes than 16px allow resizing them.

Reply #1 –

Hi Sayen and welcome to elkarte.net. :)

I don't remember all the places the icons are shown, but in general I would avoid a "setting" for such things, better either properly resize the image[1] or just use some css like:
Code: [Select]
#forumposts .icons img {
    width: 16px;
    height: 16px;
}
You can stuff that into a custom.css in your theme folder and be done with it.
The advantage is that if you want an icon 32x32 for desktops and a 16x16 for mobile, with css you can, with a setting you'd need yet another two (one for the size and one for the screen size for the toggling). ;)
1 This is a good thing because you save bandwidth as well.↵
Bugs creator.
Features destroyer.
Template killer.

Re: When changing rank icons to higher sizes than 16px allow resizing them.

Reply #2 –

Quote from: emanuele – Hi Sayen and welcome to ElkArte.net. :)

I don't remember all the places the icons are shown, but in general I would avoid a "setting" for such things, better either properly resize the image[1] or just use some css like:
Code: [Select]
#forumposts .icons img {
    width: 16px;
    height: 16px;
}
You can stuff that into a custom.css in your theme folder and be done with it.
The advantage is that if you want an icon 32x32 for desktops and a 16x16 for mobile, with css you can, with a setting you'd need yet another two (one for the size and one for the screen size for the toggling). ;)

I guess this is what I wanted. I wanted the images to keep same quality, however they are scaled down.

Which CSS code would I be required to use to do same for smileys?

Oh and probaly a noob question, but where do I put the CSS class? Which file?
1 This is a good thing because you save bandwidth as well.↵
Signed by S-A-I-Y-E-N....

Re: When changing rank icons to higher sizes than 16px allow resizing them.

Reply #3 –

Quote from: Saiyen – Oh and probaly a noob question, but where do I put the CSS class? Which file?

You can use a custom css file in Ellkarte
  • for BeSocial style: /themes/default/css/_besocial/custom_besocial.css
  • for Light style: /themes/default/css/_light/custom_light.css
sorry for my bad english

Re: When changing rank icons to higher sizes than 16px allow resizing them.

Reply #4 –

In fact, you need to create custom_variant-name.css file in corresponding directory.
 

Re: When changing rank icons to higher sizes than 16px allow resizing them.

Reply #5 –

Actually, for that change that can affect all the variants, you can just create the file directly in the "css" directory, it's not necessary to create one per variant. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: When changing rank icons to higher sizes than 16px allow resizing them.

Reply #6 –

@emanuele , news to me. Thanks.