If a green circle is all you want, there is no need for an image.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Green Bullet List</title>
</head>
<body>
<style type="text/css">
.observations {
list-style-type: none;
padding: 0;
padding-left: 30px;
position:relative;
}
.observations li .green_circle {
background-color: rgb(0,204,0);
font-size: 1.5rem;
width: 0.7rem;
height: 0.7rem;
margin: 0.2rem 6px 0 -0.9rem;
padding: 0;
border-radius: 49.99%;
position: absolute;
}
</style>
<ul class="observations">
<li><span class="green_circle"></span> Text in list
tiem</li>
</ul>
</body>
</html>
Season to taste!
HTH,
Best,
Karl
> On May 11, 2021, at 7:21 PM, Larry Martell <[email protected]> wrote:
>
> I have this code and it works, displaying a green circle instead of
> the defaut li bullet:
>
> .observations li::before {
> content:
> url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBzdHJva2U9Im51bGwiIGZpbGw9IiMxYWFmNTQiIGlkPSJzdmdfMSIgZD0ibTAuMjAyMzEsNC45NzYxNjljMCwtMi42NTUzNTkgMi4xMzg2NTQsLTQuODA0MDQyIDQuNzgxNjIsLTQuODA0MDQyYzIuNjQxODA3LDAgNC43ODE2MiwyLjE0ODY4MyA0Ljc4MTYyLDQuODA0MDQycy0yLjEzOTgxMiw0LjgwNDA0MiAtNC43ODE2Miw0LjgwNDA0MmMtMi42NDI5NDcsMCAtNC43ODE2MiwtMi4xNDg2ODMgLTQuNzgxNjIsLTQuODA0MDQyeiIvPgogPC9nPgo8L3N2Zz4=");
> margin-right: 6px;
> }
>
> <ul class="observations" style="padding-left: 20px; list-style-type:none;">
> <::before></::before>
> <li style="line-height: 1.25;"><span style="color: black;">Current
> version: Agile vGold Required version: Agile Silver</span></li>
> </ul>
>
> But now I need to change the color of the circle programmatically. I
> ran that base64 through a decoder and it came out with this:
>
> <path stroke="null" fill="#1aaf54" id="svg_1"
> d="m0.20231,4.976169c0,-2.655359 2.138654,-4.804042
> 4.78162,-4.804042c2.641807,0 4.78162,2.148683
> 4.78162,4.804042s-2.139812,4.804042 -4.78162,4.804042c-2.642947,0
> -4.78162,-2.148683 -4.78162,-4.804042z"/>
>
> And I am trying to use that in my li::before (hoping I can then set
> the fill color):
>
> .observations li::before {
> background-image:url("data:image/svg+xml;utf8,<svg
> xmlns='http://www.w3.org/2000/svg' stroke='null' fill='#1aaf54' <path
> d='m0.20231,4.976169c0,-2.655359 2.138654,-4.804042
> 4.78162,-4.804042c2.641807,0 4.78162,2.148683
> 4.78162,4.804042s-2.139812,4.804042 -4.78162,4.804042c-2.642947,0
> -4.78162,-2.148683 -4.78162,-4.804042z' /> </svg>");
> }
>
> But no image is displayed. Can anyone see what I am doing wrong, or
> tell me another way I can change the color of the circle.
>
> Thanks!
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
