Change profile image dimensions globally

[enigma666666]

Hi there,

I want to use the profile image to display logos which are rectangular. What code do I need to edit in order to set a single rectangular size globally on all the different templates?

I have tried both the following, but not working properly:

span.up-profilepicture {
width:200px;`
height:100px;
}
.userpro-awsm-pic img
{
width:200px;
height:100px;
}

[admin]

Try to add !important rule. 🙂 Also which avatar/thumb are you trying to edit? There could be shortcode way to make it and css way to do it.

[enigma666666]

Hi Ahmed,

I have tried using !important declaration,before I posted this topic,but it only changed the image on memberslist and css of memberslist was then messed up. It did not change globally to the same dimensions. I need all profile pictures on card.php, memberslist.php, list.php and view.php to change to rectangular format.

[enigma666666]

Okay I found the correct css for changing the profile image to rectangular shape.

If anyone else needs to change profile pic dimensions on profile view page, here is the css to edit:

For profile view page:
div.userpro-profile-img img{
}

[admin]

Thanks for this tip! 🙂

[shoky]

I also need the profile images to keep their original dimensions (rectangle logos) – how would this be accomplished. I set sizing as was mentioned above – but I still get square images. Any ideas? Some people may have square logos and some will have rectangular ones – i would like to be able to use their dimensions – but resize to fit the area.

[enigma666666]

Have you tried adding important and exclamation mark?

For example:
.div.userpro-profile-img img{
{
width:200px !important;
height:100px !important;
}

[enigma666666]

Btw, for those who !important has no effect, try using min-height and min-width, instead of “height” and “width”.
Then you will definitely get the desired result.

[syiogene]

Hi,

thank you for your previous tips.

I’m trying to keep the original dimensions of my pictures as well (for rectangular logos)

If I use the css edit (width 200px / height 100px for example), the pictures are stretched.
Have you found a way to keep the proportions of the picture ?

Thanks