Replies

Dec 10, 2017 8 years ago
Artiste
User Avatar
Zip

OK, so I've figured out everything else I could want for my user profile, but I'm struggling with this one.

Why can I change my pet's image size but not the image size of the avatars in my "friends" category? It's driving me a bit nuts that I can't figure it out, hahaa!

Dec 10, 2017 8 years ago
Hongske
is lost in space
User Avatar

What code have you used up till now? And what size do you want to make them?

Dec 11, 2017 8 years ago
Artiste
User Avatar
Zip

Here's what I use for the pet image. I can't figure out how to convert that to be something for my friend's images, or if that's even possible.

/** Pet Images **/ .avatar_head {height:75px!important; width:70px!important;}

I'm not sure what size I want them, I expect I can play around with it once I know the code itself. Probably something like 100 height by 50 width?

Dec 11, 2017 8 years ago
Dotty
User Avatar
Pippa

Try

img { height: 50px; width: 50px; }

To target the images of any specific section - like your friends, wishlist or pet treasure on a pet profile you can just add "img" and then specify height/width/etc.

You've basically already done this with your wishlist and stickers, so just do the same for the friends ^^

click for user profiles

Dec 11, 2017 8 years ago
Hongske
is lost in space
User Avatar

The friends section doesn't work with normal images, it works with background-images (or at least the friends section on Artiste's profile does). To change its size, you'll need this .data .ui.image { width: 50px!important; height: 100px!important; }:)

Dec 14, 2017 8 years ago
Artiste
User Avatar
Zip

Thank you both so much!!

Dotty, I couldn't get that code to work but Hongske's code did work. I never would have considered the whole data ui part -_- some of this stuff gets complicated!

Thank you both again so much <3

Dec 14, 2017 8 years ago
Hongske
is lost in space
User Avatar

You're quite welcome :) And in the future, you can see what you need to target by using your browser's element inspector. Just right click the element you want to target and choose "inspect element" or "element inspector" or some variation thereof. You'll get a console on your screen that shows the HTML on the left side and the CSS on the right side. Hovering over the elements in the HTML-side will highlight the element in question and if you click on it then the CSS-side will show the applied CSS properties and which selectors were used to apply it. Feel free to ping/comment/message me if you ever need more coding help!

Please log in to reply to this topic.