Quick Tip: Rounded Avatars

The Goal: Rounded Avatars

The default avatar images in our themes are rectangular.  But, its easy to make them “rounded”.  i.e.: you can go from this:

 

to this:

The Solution: CSS

The trick is to add a CSS rule to set the border radius of the image to 50%.  To do this you can add this CSS rule to your theme:

/* Make avatars round */
#spMainContainer .spAvatar {
border-radius: 50%;
}

There are a number of ways to add this rule to your WordPress theme.  We will discuss two of them here – the easiest options

Option #1: Add it directly to the Custom CSS area in Simple:Press

Simple:Press does give you an option to add CSS to your Simple:Press theme.  Just go to FORUM->THEMES->CUSTOM CSS

There, you can paste the CSS code from above into the text box and click the UPDATE CSS button.  Your screen should look similar to this one:

After making these changes you should clear your caches, if any. This includes our local cache (wp-rocket for example) as well as your CDN cache such as Cloudflare.

Option #2:  Use the WordPress Customizer

For most modern WordPress themes you can add CSS via the WordPress customizer – which you can access from the main WordPress menu: APPEARANCE->CUSTOMIZE.

Locate the Additional CSS option in the customizer and add the above CSS.

If you have other custom CSS that are using and prefer to keep all your CSS changes in one place, then this is a good option.  However, if you switch WordPress themes you will lose your custom css and have to re-apply it in the new theme.  (Which is why the recommended approach for CSS is to load up your own style sheet but that is outside the scope of this “quick tip” article.)

Read Next

Did you find this article useful? Or do you use Simple:Press today?  If so, please support Simple:Press with a review on WordPress.org.  Every review goes a long way towards bringing other users on board!

Click here to review Simple:Press on wordpress.org

More From Simple:Press

How We Increased Performance On Our Site By 300%

July 4, 2020

A few days ago we moved our site from Liquid Web to our new FireupWP and WPCloudDeploy project platform. This new platform allows us to use dedicated cloud VMs from places like Digital Ocean, Linode and Vultr. We pay the cost of the VMs with no markup which provides huge savings over regular hosts. We…

Read More

New Simple:Press Forum Theme: Modern 2020

March 5, 2020

A new default theme is coming to Simple:Press Forums with the release of Simple:Press Forums 6.5.0. Features of this theme: More modern looking with larger default font sizes and button sizes. Less use of tiny icons More color customization options Better display on mobile More white space Just like our previous default theme, Barebones, you…

Read More

Now Available: SPMS Version 2.7

January 10, 2020

Version 2.7 of Simple:Press Member Subscriptions is now available. It includes more than two dozen fixes and tweaks.

Read More

Simple:Press Forums 6.3 Release Notes

December 19, 2019

The admin area of Simple:Press Forums 6.3 has a radically new user interface. Based on shades of blues and grays, it is more modern looking and better prepares the plugin for the 2020’s.

Read More