SP_ 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.)

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

2nd Quarter 2019 Progress Report: New Plugins and Recent Updates

May 21, 2019

Over the last couple of months we’ve been busy making tweaks and enhancements to a number of our plugins and themes. The result of this work can be see in the following updates: New Simple:Press Core Release Version 6.2.0 Simple:Press is now available in the WordPress.org repository. This release includes the following changes: New: SVG…

Read More

How We Do Backups

May 10, 2019

Introduction Occasionally we write about how we run out business – the tools and technology we use. This article is one of those and it covers a very important topic that many sites and business don’t pay enough attention to. Hopefully by reading this you’re reminded to take another look at how your backups work…

Read More

Move To Semantic Versioning Complete

May 3, 2019

If you’ve never heard the term “semantic version”, don’t feel bad – most end users of software have never heard the term either. But more and more, software is using the concept to govern the release numbers that are assigned to new public releases. In the case of Simple:Press, we’ve completed our to move to…

Read More

New Release: Simple:Press 6.2

April 29, 2019

In this new version of Simple:Press, we will be focusing on providing additional options for selecting icons that can be used in Forum Lists, Ranks and Reputation. This is a small, incremental step in focusing our attention on the overall User Interface and User Experience in Simple:Press. Introducing SVG Icon Sets In version 6.1 and…

Read More