Just a side note, if using jQuery you can change this dynamically.
jQuery(".observations li .green_circle").css("background-color", "#000");
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com <http://designdrumm.com/>
> On May 12, 2021, at 2:05 AM, Karl DeSaulniers <[email protected]> wrote:
>
> 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/
______________________________________________________________________
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/
