Display a number in a circle

Google searched and got this.
http://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle

So, add a Template component to the page. Add the desired field to the template. Then set the Class of the Template to numberCircle.

.numberCircle {

border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }

Here’s the XML for said solution in Skuid.

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true"> <models> <model id="user" limit="20" query="true" createrowifnonefound="false" sobject="User"> <fields> <field id="Name"/> </fields> <conditions> <condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/> </conditions> <actions/> </model> </models> <components> <template multiple="false" model="user" allowhtml="true" cssclass="numberCircle"> <contents>1</contents> </template> </components> <resources> <labels/> <javascript/> <css> <cssitem location="inline" name="newcss" cachelocation="false">.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 40px; height: 40px; padding: 8px; background: #fff; border: 4px solid #6cb0d7; color: #666; text-align: center; font: 32px Arial, sans-serif; }</cssitem> </css> </resources> </skuidpage>

That is good work for a Friday.  Thanks Pat! 

WoW!! Thank you so much that is fantastic work. Your googling skills are much better than mine. You went above and beyond thank you. If it can help anyone here are the changes that I made to the css to be more in line with the Skuid donut chart in a panel set.

 .numberCircle { 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; behavior: url(PIE.htc); /* remove if you don't care about IE8 */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: auto;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-right: auto;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 25px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 25px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #fff;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 30px solid #6cb0d7;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #666;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font: 120px Arial, sans-serif;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

Thanks Tami.  Appreciate you giving back to the community!