Qrew Legend
Are you trying to actually make billiard balls? Here is a snippet that you can make a nice easy circle - but the shading around the number will be much trickier and require much more CSS if that's a requirement. The below will just be a simple solid color with a number inside. I can try and modify it as well if you need a smaller/different colored circle in the middle as well.
"<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%'>1</div>"
You can adjust the height with the height/width/line-height entries - the 50% border-radius makes it a circle.
If you need to line them up left to right you will also need to add some floats like:
"<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>1</div>" &
"<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>2</div>" &
"<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>3</div>" &
"<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>4</div>"
Qrew LegendAwesome. Not I don't need the inner circle. I see I can control the font color of the words so I can choose a contrasting color (probably black or white) according to what is most readable for that background color.
Just make sure that if you change the overall size of the circle you keep the height/width the exact same - and then the line-height is just there to force the div to vertically align the text in the middle. It should be right around the same px of the height/width as well but not exact given the shape of the element.
Qrew LegendChayce, how do I control the font size, so I can scale the circle larger and increase the font size?
You can add font-size: 12px (or whatever font size in pt or px that you want)
"<div style='font-size: 12px; font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%'>1</div>"
Based on how big you want you may have to increase the size of the div to make it look good but otherwise adjust as you need. I believe the default QB font-size ends up being 12px as a reference point to adjust from.
