I’m creating a website for my University’s Mountaineering Club. I’m trying to create a committee page, where there is a picture of each member titled with their position. I’d like the pictures to appear as a set of circles with the descriptions underneath. The features widget does this, but I then need to crop the image into a circle to prevent it appearing as a square, as the image (the icon) overlays the background circle. I can do this, but when I upload the cropped image the quality is decreased – the pictures look very poor. Is there any way to prevent the features widget doing this?
My other option is to use the circle widget. Here I can just paste in the url of the original picture, with no need to crop it. The picture quality is also great. However, the circle is not big enough. Is there any way in which I can increase the circle size using css?
Both of these widgets are great, but it seems as though (in terms of functionality) they do not quite meet, and what I am attempting to do falls into this gap.
Any help is very appreciated!
Hi Adodge
Apologies for the delay. We’re busy catching up with support for our free customers :)
The Features widget would be best. It’s the updated version of the Circle Icon widget and has the advantage of working with any theme whereas the Circle Icon widget part of Vantage itself.
To help automatically round the Features Widget icon for you, add the following to Appearance > Custom CSS. If you don’t have the Custom CSS menu item under Appearance, install the SiteOrigin CSS plugin.
Paste the following:
/* Features Widget */ .sow-icon-image[style] { border-radius: 0.5em; font-size: 1em !important; }You can adjust the font size value to change the size. The border radius value must be half the font size. Please let us know how that goes.