CODEWITHSUNDEEP
htmlcsswordpress
FiNaR
FiNaR

Reputation: 87

WordPress CSS - how to resize and make it circular an image

I am trying to customise a CSS in WordPress, but I am struggling on what to do...

as you can see in the following code, there is an "li" element with an image that has the following class: "func-um_user gravatar avatar avatar-40 um-avatar um-avatar-uploaded"

the image property set the dimension to 40px...

<li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-663">
<a href="#">First Last <img onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" class="func-um_user gravatar avatar avatar-40 um-avatar um-avatar-uploaded" width="25" height="25" alt="First Last" pagespeed_url_hash="3917330287" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" border-radius="40">
</a>
</li>

I need to create a custom CSS that reset the picture to 30px and that create a rounded border instead of square...

how can I do that?

Many thanks

Regards

Upvotes: 0

Views: 592

Answers (4)

Adern Nerk
Adern Nerk

Reputation: 330

Just add this to your code.

<li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-663">
<a href="#">First Last <img class="some" onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" class="func-um_user gravatar avatar avatar-40 um-avatar um-avatar-uploaded" width="25" height="25" alt="First Last" pagespeed_url_hash="3917330287" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" border-radius="40">
</a>
</li>
<style>
.some
{
//change dimensions as desired 
width:30px;
height:30px;
//this will give a rounded border
border-radius:50%;
}
</style>

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12592

You can try this CSS:

.menu-item > a > img {
  width:         30px; 
  height:        30px; 
  border-radius: 30px;
}

... and when that does not work, because of specificity (you did not post your CSS file), you can try this:

#masthead .menu-item > a > img {
  width:         30px; 
  height:        30px; 
  border-radius: 30px;
}

... and when that does not work, use !important to force the CSS to work:

.menu-item > a > img {
  width:         30px!important; 
  height:        30px!important; 
  border-radius: 30px!important;
}

Here is a working example (selectors are simplified):

img {
  width:         30px; 
  height:        30px; 
  border-radius: 30px;
}
<img onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" />

Or check: https://codepen.io/anon/pen/aELYry

Upvotes: 0

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

Change your class in the wordpress image class 40 to 30. And in order to round the border, used border-radius: 30px inline styling. 

class="func-um_user gravatar avatar avatar-30 um-avatar um-avatar-uploaded"

Here is the full code

<li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-663">
  <a href="#">First Last <img onerror="this.src='http://italiancrypto.it/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg';" src="http://italiancrypto.it/wp-content/uploads/ultimatemember/10/profile_photo-40.jpg?1515135317" class="func-um_user gravatar avatar avatar-30 um-avatar um-avatar-uploaded" width="25" height="25"; alt="First Last" style="border-radius:30px";>
</a>
</li>

Hope this will meet your requirements.

Upvotes: 1

Nguyen Trung Hieu
Nguyen Trung Hieu

Reputation: 553

Follow code css

.menu-item .func-um_user.gravatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 5px; //use to spacing between name and avatar
}

Upvotes: 1

Related Questions